fix: always recreate observer in beforeEach

[thebuilder]

• Always recreate the mock function in a beforeEach.
• Drop beforeAll, since it would be overwritten by the beforeEach
• Drop checking if the IntersectionObserver is already mocked, since it can't be reliably determined.

Fixes #699

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-intersection-observer	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 16, 2025 9:55am

[pkg-pr-new]

npm i https://pkg.pr.new/thebuilder/react-intersection-observer@716

commit: 1858e43

[philwolstenholme]

I gave this a try (installed via pkg.pr.new) using Vitest and got a lot of these errors:

 FAIL  src/components/AdobeTarget/ExperimentWrapperClient.test.tsx > sends GTM event when entering viewport in non-QA mode
TypeError: jest.isMockFunction is not a function
 ❯ isMocking node_modules/react-intersection-observer/test-utils/index.mjs:7:17
      5| var isMocking = () => {
      6|   if (typeof jest !== "undefined") {
      7|     return jest.isMockFunction(window.IntersectionObserver);
       |                 ^
      8|   }
      9|   if (typeof vi !== "undefined") {
 ❯ warnOnMissingSetup node_modules/react-intersection-observer/test-utils/index.mjs:32:7
 ❯ Module.mockIsIntersecting node_modules/react-intersection-observer/test-utils/index.mjs:137:3
 ❯ src/components/AdobeTarget/ExperimentWrapperClient.test.tsx:45:3

and then also:

TypeError: mockFn is not a function
❯ setupIntersectionMocking node_modules/react-intersection-observer/test-utils/index.mjs:50:33
    48| }
    49| function setupIntersectionMocking(mockFn) {
    50|   window.IntersectionObserver = mockFn((cb, options = {}) =>…
      |                                 ^
    51|     var _a, _b, _c;
    52|     const item = {
❯ node_modules/react-intersection-observer/test-utils/index.mjs:16:38

I imagine the typeof jest !== "undefined" block is being hit (despite us using Vitest) because of this workaround that we have to use to allow React Testing Library to work with Vitest:

// vitest.setup.ts
beforeAll(() => {
  vi.stubGlobal('jest', {
    // Workaround for an issue in @testing-library/react.
    // see https://github.com/testing-library/react-testing-library/issues/1197
    advanceTimersByTime: vi.advanceTimersByTime.bind(vi),
    // The fn property is needed for react-intersection-observer/test-utils to
    // work when globalThis.jest is overriden like this.
    fn: vi.fn.bind(vi)
  });
});

Removing that block makes all the react-intersection-observer related errors go away and those tests go back to green, but instead I have failing tests wherever I'm using fake timers because the RTL workaround has been removed.

[thebuilder]

// vitest.setup.ts
beforeAll(() => {
  vi.stubGlobal('jest', {
    // Workaround for an issue in @testing-library/react.
    // see https://github.com/testing-library/react-testing-library/issues/1197
    advanceTimersByTime: vi.advanceTimersByTime.bind(vi),
    // The fn property is needed for react-intersection-observer/test-utils to
    // work when globalThis.jest is overriden like this.
    fn: vi.fn.bind(vi)
  });
});

Removing that block makes all the react-intersection-observer related errors go away and those tests go back to green, but instead I have failing tests wherever I'm using fake timers because the RTL workaround has been removed.

All these Jest hacks - Headache. You could solve this by also forwarding the isMockFunction from vitest.