vi.mock in Browser mode with Nx (monorepo) hangs over

[dhythm]

Problem

Hang out the test that has vi.mock due to fail to register Service Workder.

I use Nx (monorepo), so all tests runs under each libraries.
The error is shown when test with vi.mock runs.
(vi.mock works when I use vitest browser mode without Nx.)

This repo reproduces the issue.
https://github.com/dhythm/vitest-browser-mode-with-nx-example

vite.config.ts in a library of Nx has root: __dirname.
And root: __dirname would be related to this issue because vi.mock is called when I commented out it.
(However, the test fails the other issue.)

Does anyone face a similar issue and have a solution to this?

[hi-ogawa]

I checked your reproduction and it looks like there's something wrong with server.fs.allow. Adding this helps getting __vitest_msw__ work:

// vite.config.ts
  server: {
    fs: {
      allow: [path.join(__dirname, "../..")]
    }
  },

Another issue (partly on your code) is that you have to use vi.hoisted to use variables inside vi.mock

// [not ok]
// const mockedIsOk = vi.fn().mockReturnValue(true);
// [ok]
const mockedIsOk = vi.hoisted(() => vi.fn().mockReturnValue(true))

vi.mock('./isOk', async (importActual) => {
  // ...
  return {
    isOk: mockedIsOk,
  };
});

Without browser mode, the wrong code shows ReferenceError: Cannot access 'mockedIsOk' before initialization, but it looks like browser mode will get this stuck forever, which could be considered a bug on Vitest side.

[hi-ogawa]

On Vitest 2.1.1, It looks like the second issue doesn't exist and it shows a following error without getting stuck:

TypeError: Failed to fetch dynamically imported module: http://localhost:5173/src/lib/isOk.ts

[dhythm]

Thanks for your reply.
server.fs.allow solves the problem in my local environment 🙏

And I changed from vi.mock to vi.hoist too.