Version >= 9.12.0 breaks automatic InteractionOberserver setup with jest

[valleywood]

We have a test environment where we've used mockAllIsIntersecting from react-intersection-observer/test-utils together with Jest
This has worked just fine until we updated to version 9.12.0 and beyond after that we've started to get type errors when running tests.

After that we got the error:

TypeError: observer.observe is not a function

      at observe (node_modules/react-intersection-observer/src/observe.ts:153:12)
      at node_modules/react-intersection-observer/src/useInView.tsx:66:19
      at commitHookEffectListMount (node_modules/react-dom/cjs/react-dom.development.js:23189:26)

The error could be resolved by manually adding this code to our Jest tests:

beforeEach(() => {
  setupIntersectionMocking(jest.fn);
});

afterEach(() => {
  resetIntersectionMocking();
});

So it seems like version 9.12.0 broke the automatic setup with Jest? 🤔

To Reproduce Try and recreate the issue in a Codesandbox:

Expected behavior
If react-intersection-observer should still be possible to run together with Jest without manually using setupIntersectionMocking and resetIntersectionMocking types should be fixed.

I suspect that this error comes from this update mentioned in the release notes for version 9.12.0

"Types cleanup in test-utils, getting rid of @types/jest (replaced with vitest)"

Screenshots

**Desktop **

• OS: Mac OS Sonoma
• Browser N/A (Jest tests)
• Version >= 9.12.0

[thebuilder]

Can you verify that it's 9.12 it first happens? What if you run just one test? It could be Jest resets the observer after a run, so before All isn't working as expected.
Do you have something in your code that resets it after a test?

I unfortunately won't have a chance to look into it until September.

[valleywood]

I've now verified that the error isn't there with version 9.11 it starts with 9.12.
I've also verified that the error doesn't occur if I run just one test.

The error occurs only when I have two or more tests that both contains a call to mockAllIsIntersecting(true);

I didn't have anything that resets between the test before I've added a the fix to circumvent this error (the setupIntersectionMocking/resetIntersectionMocking mentioned above)

[thebuilder]

Could be a difference between vitest and jest, and how they reset code. Might have to go back to beforeEach for Jest tests then.

[thebuilder]

I've tried installing and running the hooks.test.tsx tests using Jest instead of Vitest - Using a default Jest configuration, it correctly does the mocking, so mockAllIsIntersecting works as expected.

Is there anything special in your setup or Jest configuration?

[denchen]

I just want to chime in and say I'm experiencing the same issue as well using Jest and starting with 9.12, though my error looks slightly different:

    TypeError: io.observe is not a function

@valleywood 's workaround solved the issue for me, but I only needed setupIntersectionMocking(jest.fn) in the beforeEach() hook. I did not need resetIntersectionMocking() in afterEach()

[Toolo]

We're running into the same issue, updating from 9.10.3 to 9.13.1 and getting the observer.observe is not a function error.

In terms of custom setup, the only thing that comes to mind is that we add a top-level

import "intersection-observer";

at the top of our test setup file.