Does not recognise Vitest 2 inside beforeAll hook

[RobinTail]

Describe the bug A clear and concise description of what the bug is.

When trying to upgrade Vitest from 1.6 to 2.0 I'm getting these warnings:

React Intersection Observer was not configured to handle mocking.
Outside Jest and Vitest, you might need to manually configure it by calling setupIntersectionMocking() and resetIntersectionMocking() in your test setup file.

// test-setup.js
import { resetIntersectionMocking, setupIntersectionMocking } from 'react-intersection-observer/test-utils';

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

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

To Reproduce Try and recreate the issue in a Codesandbox:

none yet

Expected behavior A clear and concise description of what you expected to
happen.

Should detect Vitest 2 similar to Vitest 1.6

Additional context Add any other context about the problem here.

Running latest version, 9.10.3

[RobinTail]

Workaround

// vitest.setup.ts
import { setupIntersectionMocking } from "react-intersection-observer/test-utils";
setupIntersectionMocking(vi.fn);

// vitest.config.ts
export default defineConfig({
  test: {
    setupFiles: ["vitest.setup.ts"],
  }
});

[thebuilder]

Interesting. I'll have a look.
Also what to see how it works with the new browser mode in Vitest.

[thebuilder]

@RobinTail are you sure it's running with global: true in Vitest config?

I've tried upgrading the library itself to Vitest 2, and it doesn't break anything.

[RobinTail]

@RobinTail are you sure it's running with global: true in Vitest config?

absolutely! I'm surprised myself: I checked your code and found out that it should just check the presence of vi in the global scope, but for some reason it stopped working in my case.

export default defineConfig({
  test: {
    globals: true,
    environment: "happy-dom",

I also tried --globals CLI argument in addition to that.

[RobinTail]

Maybe it's because of this settings. I will try another pool.

    pool: "vmThreads",
    poolOptions: {
      vmThreads: { useAtomics: true, memoryLimit: 0.5 },
    },

[RobinTail]

No, pool: "forks" does not fix this.

[thebuilder]

#690 The tests using the test-utils in the library are all running fine after upgrading.

[RobinTail]

I'll try to prepare a sandbox to reproduce it

[RobinTail]

Dear @thebuilder , here is the VM that reproduces the issue:

https://codesandbox.io/p/devbox/crimson-night-w64sxn

In terminal try to execute yarn test.

(you may probably need to be logged in for that)

[RobinTail]

Perhaps it may be related to the some changes of the hooks execution order in Vitest 2.
Because I'm calling the method inside beforeAll hook.
I'm not sure what exactly they mean by "reverse order"

UPD: no, tried sequence: { hooks: "parallel" }, for the previous behavior — that didn't fix the issue.

[thebuilder]

Thanks a lot - I think the problem (in the example) is that you trigger mockAllIsIntersecting in a beforeAll. It's running before the beforeAll in test-utils is triggered.

If I change it so mockAllIsIntersecting is triggered inside the test it works:

import { mockAllIsIntersecting } from "react-intersection-observer/test-utils";

describe("Test", () => {
  test("test", () => {
    mockAllIsIntersecting(true);
    expect(true).toBeTruthy();
  });
});

Looking at the code in test-utils, I think it should be fairly straightforward to make it also instantiate when the mocking functions are triggered.

[RobinTail]

Yes, @thebuilder , BUT :)
If I downgrade Vitest to 1.6.0, it works inside beforeAll without warnings.

[RobinTail]

It's running before the beforeAll in test-utils is triggered.

I see it's actually beforeEach in test-utils, @thebuilder

react-intersection-observer/src/test-utils.ts

Line 24 in 7feb5b6

beforeEach(() => {

So maybe in Vitest 2 beforeEach runs after beforeAll.
They mentioned that they changed the order of hooks.
Perhaps it should be addressed somehow.

[RobinTail]

The thing is that beforeAll is the recommended place to establish mocking

[thebuilder]

It runs in beforeEach to reset the mock between tests.

Regardless, I'm not sure why you are triggering the mockAllIsIntersecting before the test is running. 🤔 The intention is you trigger it after creating the Intersection Observers. It only affects active observers, so if you haven't created any, then it won't do anything.

[RobinTail]

Ok

[RobinTail]

It runs in beforeEach to reset the mock between tests.

Reset mocking you do in afterEach, @thebuilder :

react-intersection-observer/src/test-utils.ts

Lines 33 to 35 in 7feb5b6

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

In beforeEach you do mocking setup, which I believe, must be in beforeAll instead.

react-intersection-observer/src/test-utils.ts

Lines 24 to 29 in 7feb5b6

	beforeEach(() => {
	// Use the exposed mock function. Currently, only supports Jest (`jest.fn`) and Vitest with globals (`vi.fn`).
	if (typeof jest !== "undefined") setupIntersectionMocking(jest.fn);
	else if (typeof vi !== "undefined") {
	// Cast the `vi.fn` to `jest.fn` - The returned `Mock` type has a different signature than `jest.fn`
	setupIntersectionMocking(vi.fn as unknown as typeof jest.fn);

[thebuilder]

f72e455 (#690)