Browser mode: TypeError: vi.mocked(...).mockReturnValue is not a function

[Olgagr]

I started to have a random number of tests failing when I ran the whole suite of tests. It's a random number; every time it's different.

e.g first run gives:

 Test Files  4 failed | 23 passed (27)
 Tests  57 failed | 260 passed (317)

and the next run gives:

 Test Files  2 failed | 25 passed (27)
      Tests  20 failed | 297 passed (317)

The error is:
TypeError: vi.mocked(...).mockReturnValue is not a function or more specifically for some mocked modules: mockUseFullPageLayout.mockReturnValue is not a function

The files that are failing, when run in isolation, pass.
The whole suite passes on Github CI/CD, but it fails when run locally on a MacBook Pro M4.

My setup is quite standard:

  test: {
    include: ['**/*.test.ts', '**/*.test.tsx'],
    globals: true,
    browser: {
      enabled: true,
      provider: 'playwright',
      instances: [{ browser: 'chromium' }],
      headless: true,
    },
    setupFiles: './src/test-utils/setup.ts',
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      all: true,
      exclude: [
        ...configDefaults.exclude,
        'e2e/**',
        '**/*.config.js',
        '**/*.config.ts',
        '**/.eslintrc.cjs',
        '**/*main.tsx',
        '**/*vite-env.d.ts',
        '**/*stories.tsx',
        '**/stories/**',
        '**/types/**',
        '**/constants/**',
        'src/components/ui/**',
      ],
    },
  },

I create my mocks like this:

vi.mock('../../../contexts/EntityContext');
vi.mock('../../../hooks/useAuth');

import { useEntityContext } from '../../../contexts/EntityContext';
import { useAuth0 } from '../../../hooks/useAuth';

describe('AccountSelection', () => {
  const mockUseEntityContext = vi.mocked(useEntityContext);
  const mockUseAuth0 = vi.mocked(useAuth0);

 const mockEntityContext = createMockEntityContext({
    currentEntity: createMockEntity({
      id: 'entity-123', // Keep predictable for URL matching in tests
    }),
    isSwitchingEntity: false,
    organizationId: 'org-123', // Keep predictable for tests
  });

beforeEach(() => {
    vi.clearAllMocks();

    // Setup entity context
    mockUseEntityContext.mockReturnValue(mockEntityContext);

    // Setup authentication
    mockUseAuth0.mockReturnValue({
      getAccessTokenSilently: vi.fn().mockResolvedValue('mock-jwt-token'),
      isAuthenticated: true,
      user: { sub: 'auth0|123', email: '[email protected]' },
      isLoading: false,
      error: null,
    } as unknown as ReturnType<typeof useAuth0>);
  });

I'm using MSW to mock my http requests (React Query). The setup is aligned with their documentation to vitest browser mode:

import { test as testBase } from 'vitest';
import type { SetupWorker } from 'msw/browser';
import { worker } from './browser';

export const test = testBase.extend<{
  worker: SetupWorker;
}>({
  worker: [
    // eslint-disable-next-line no-empty-pattern
    async ({}, use) => {
      // Start the worker before the test.
      await worker.start();

      // Expose the worker object on the test's context.
      await use(worker);

      // Remove any request handlers added in individual test cases.
      // This prevents them from affecting unrelated tests.
      worker.resetHandlers();
    },
    {
      auto: true,
    },
  ],
});

I don't think that mocking looks different in the browser mode, right? I haven't found anything about it, except spying on the imported modules.

Can anyone give me any hints as to what might be the issue?

My env info:

  System:
    OS: macOS 15.6.1
    CPU: (14) arm64 Apple M4 Max
    Memory: 5.23 GB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.17.0 - /usr/local/bin/node
    npm: 10.9.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 140.0.7339.133
    Safari: 18.6

[Olgagr]

I suspected a concurrency issue, so I set up quite aggressive settings, but it didn't resolve the issue. The only fix that works is to limit the number of tests, but this is not really a fix ;)

    browser: {
      enabled: true,
      provider: 'playwright',
      instances: [{ browser: 'chromium' }],
      headless: true,
      // Add slowMo for M4 MacBook Pro race condition fix
      slowMo: process.platform === 'darwin' ? 100 : 0,
    },
    setupFiles: './src/test-utils/setup.ts',
    // Increase timeouts for browser mode on fast machines
    testTimeout: 10000, // 10 seconds instead of default 5
    hookTimeout: 10000, // 10 seconds for setup/teardown hooks
    // // Disable file parallelization to prevent mock conflicts
    fileParallelism: false,
    // // Force single worker/thread execution to prevent mock contamination
    pool: 'forks',
    poolOptions: {
       forks: {
         singleFork: true,
         minWorkers: 1,
         maxWorkers: 1,
         isolate: true, // Force complete isolation between tests
       },
    },
    sequence: {
       concurrent: false,
       shuffle: false,
    },
    // // Additional isolation settings for browser mode
    isolate: true,
    // // Prevent test reuse and force fresh contexts
   cache: false,

[Georgegriff]

I've also hit this as have others

#8473
#8410

It only happens when using MSW when you rerun tests in browser mode

I made a repo with a minimal reproduction, raised with msw too because it's really not clear where the issues lies MSW or vitest
mswjs/msw#2589

And I've reproduced it by cloning vitest and adding MSW but I haven't really made any progress with getting to the bottom of the issue

[Georgegriff]

This issue seems to be specific to the playwright provider + msw i've been doing some debugging here

mswjs/msw#2589 (comment)

[Georgegriff]

i believe i've found the cause: mswjs/msw#2589 (comment)

[Olgagr]

@Georgegriff, Thank you for the investigation and for explaining what is going on 🙏. I really appreciate that!

[Georgegriff]

Vitest 4 is now released which contains a fix for this issue