vi.mock not working in browser mode with test files outside of root

[miguel-leon]

Describe the bug

I read it was implemented, but I can't get it to work. It works as expected when run in node though.

Is there a special configuration required that I haven't found in the docs?

Reproduction

https://stackblitz.com/edit/vitest-dev-vitest-pywprx8q?file=vite.config.ts

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @vitest/browser: latest => 3.0.7 
    @vitest/ui: latest => 3.0.7 
    playwright: latest => 1.50.1 
    vite: latest => 6.2.0 
    vitest: latest => 3.0.7 
    webdriverio: latest => 9.10.1

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

Did you try locally instead of stackblitz? Probably it won't work on stackblitz because of service worker or maybe for other reasons.

[miguel-leon]

Yes, of course. I tried so many things in my local. stackblitz is a minimal reproduction I just created.

[hi-ogawa]

I tried your repro locally and it's working for me, for example with playwright/chromium

export default defineConfig({
  test: {
    browser: {
      provider: 'playwright',
      // provider: 'webdriverio',
      enabled: true,
      instances: [
        { browser: 'chromium' },
        // { browser: 'chrome' },
      ],
    },
  },
});

$ pnpm test

> @vitest/example-test@ test /home/hiroshi/Downloads/vitest-dev-vitest-pywprx8q
> vitest


 DEV  v3.0.7 /home/hiroshi/Downloads/vitest-dev-vitest-pywprx8q

 ✓  chromium  test/basic.test.ts (1 test) 1ms
   ✓ basic mock

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  13:54:52
   Duration  1.49s (transform 0ms, setup 0ms, collect 137ms, tests 1ms, environment 0ms, prepare 214ms)

[miguel-leon]

mmm I see, welp if the config is correct and it is supposed to work locally, I'll try to create another minimal repro in my local from scratch, since it does not work in my project.
Perhaps it's a Windows thing.

[miguel-leon]

I found out when it's not working.

I had in my project's vite config values for root and test.include, I updated the repro, sorry.

export default defineConfig({
  root: './src',
  test: {
    include: ['../test/**/*.test.ts'],
    browser: {
      provider: 'playwright',
      // provider: 'webdriverio',
      enabled: true,
      instances: [
        { browser: 'chromium' },
        // { browser: 'chrome' },
      ],
    },
  },
});

Is that a bad configuration on my part? or is it still supposed to work like that?

I can't remember why I have it configured like that... maybe it needed root for something else, or perhaps it is a stale config from an old version.

[hi-ogawa]

I'm not sure if there's a reason mock cannot work with this setup. I'll treat it as a bug for now.

[bteng22]

👋 Running into the same issue here on our project. Our app is a monorepo using npm workspaces so we run tests against each of our teams packages. root gets set to the working directory of each package. Any files outside of the root aren't able to be mocked while anything under root can be. This isn't ideal since a lot of our shared dependencies live outside of the team packages

@hi-ogawa do you have any ideas for workaround here until this gets patched?

[hi-ogawa]

@bteng22 Can you provide a repro just in case? Potentially you also happen to hit #7708, which has some workaround.

[bteng22]

👋 @hi-ogawa Here's a really simplified repro https://github.com/bteng22/nx-vitest-monorepo I wasn't able to build it on stackblitz since the NX Daemon had issues on it.

When you run npm test you'll see that package-b tests are failing because it's not able to mock modules from package-a. If we set the Vitest config's root to the project directory then it resolves the mock issues but then causes a lot of our tests to only fail on CI with errors like TypeError: Failed to fetch dynamically imported module

Is there any workarounds you can suggest here? This one been a big blocker for a lot of work on our team! Thanks for your help.

[bteng22]

Tagging @sheremet-va as well to escalate this! Our project is in the middle of a migration from Jest to Vitest and we're completely blocked at the moment. Any guidance here would be really helpful. Thank you!