vitest-dev / vitest

Next generation testing framework powered by Vite.
https://vitest.dev
MIT License
13.13k stars 1.18k forks source link

Vitest Browser Mode 2.1.4 regression: Unable to mock `msw/browser` module #6941

Closed ezzatron closed 1 day ago

ezzatron commented 1 day ago

Describe the bug

Under Vitest 2.1.4, mocking the msw/browser module via vi.mock() no longer works. It works fine under Vitest 2.1.3.

Reproduction

Please see https://github.com/ezzatron/vitest-browser-mode-mock-msw-browser-repro

GitHub Actions workflow run showing the regression: https://github.com/ezzatron/vitest-browser-mode-mock-msw-browser-repro/actions/runs/11946013042

Screenshot 2024-11-21 at 13 30 41

Sample output under Vitest 2.1.3:

 RUN  v2.1.3 /path/to/project
      [chromium] Browser runner started by playwright at http://localhost:5173/

 ✓ |chromium| mock-msw-browser.test.ts (2)
   ✓ can mock pg
   ✓ can mock msw/browser

 Test Files  1 passed (1)
      Tests  2 passed (2)
   Start at  13:26:40
   Duration  701ms (transform 0ms, setup 0ms, collect 103ms, tests 1ms, environment 0ms, prepare 22ms)

Sample output under Vitest 2.1.4:

 RUN  v2.1.4 /path/to/project
      [chromium] Browser runner started by playwright at http://localhost:63315/

 ❯ |chromium| mock-msw-browser.test.ts (2)
   ✓ can mock pg
   × can mock msw/browser

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  |chromium| mock-msw-browser.test.ts > can mock msw/browser
TypeError: [Function setupWorker] is not a spy or a call to a spy!

Failure screenshot:
  - __screenshots__/mock-msw-browser.test.ts/can-mock-msw-browser-1.png

 ❯ mock-msw-browser.test.ts:19:43
     19| });
     20|
     21| it("can mock msw/browser", async () => {
       |                            ^
     22|   expect(setupWorker).not.toBeCalled();
     23| });

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  1 failed | 1 passed (2)
   Start at  13:27:43
   Duration  732ms (transform 0ms, setup 0ms, collect 98ms, tests 91ms, environment 0ms, prepare 228ms)

System Info

System:
    OS: macOS 14.7.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 2.55 GB / 32.00 GB
    Shell: 5.9 - /opt/homebrew/bin/zsh
  Binaries:
    Node: 22.11.0 - ~/.asdf/installs/nodejs/22.11.0/bin/node
    npm: 10.9.0 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 8.10.3 - ~/.asdf/installs/nodejs/22.11.0/bin/pnpm
    bun: 1.1.36 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 131.0.6778.71
    Edge: 131.0.2903.51
    Safari: 18.1.1
  npmPackages:
    @vitest/browser: ^2.1.4 => 2.1.4
    vitest: ^2.1.4 => 2.1.4

Used Package Manager

npm

Validations

sheremet-va commented 1 day ago

msw/browser cannot be mocked anymore because Vitest uses it for vi.mock. The only thing you can do is use aliases to redirect it to another file.

ezzatron commented 1 day ago

Thanks, I was able to fix my test suite with aliases. For anyone else running into the same issue, this was how I fixed it: https://github.com/ezzatron/isomorphic-msw/commit/b6d2d52346a410debd632539768244c1f0b52e79