fix(browser): support coverage.reportsDirectory with multiple directories

[AriPerkkio]

Description

• Fixes Coverage Report Path in Browser Mode Does Not Consider "reportsDirectory" #5013

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
• Ideally, include a test that fails without this PR but passes with it.
• Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Tests

• Run the tests with pnpm test:ci.

Documentation

• If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

• Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

[netlify]

✅ Deploy Preview for fastidious-cascaron-4ded94 ready!

Name	Link
🔨 Latest commit	9f29f05
🔍 Latest deploy log	https://app.netlify.com/sites/fastidious-cascaron-4ded94/deploys/65bd08bb4af8250009b0b999
😎 Deploy Preview	https://deploy-preview-5056--fastidious-cascaron-4ded94.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[userquin]

@AriPerkkio both client and server should be in sync: https://github.com/vitest-dev/vitest/blob/main/packages/ui/node/index.ts

Check #3917

[AriPerkkio]

Are they currently in sync? Before this fix I see following with coverage.reportsDirectory: './one/two/three/':

• packages/ui/node/index.ts: coverageFolder: [ '/Users/xyz/vitest/test/repro/one/two/three', '/three/' ]
• packages/ui/client/composables/navigation.ts: coverageUrl: '/three/index.html'

In browser mode this '/three/index.html' is not served.

Would the correct fix be to add this logic into packages/browser/src/node/index.ts as @hi-ogawa suggested in #5013 - I think:

vitest/packages/ui/node/index.ts

Line 20 in d53b858

coverageFolder && server.middlewares.use(coveragePath!, sirv(coverageFolder[0], {

[AriPerkkio]

Are there any existing test cases for browser's watch mode? I guess only UI has those e2e-tests?

[sheremet-va]

We have a browser test in test/watch/file-watching.test.ts. For the UI part, we don't have any tests.

[AriPerkkio]

There are no existing test cases where this could be added easily. I've tried to build a new one into test/ui but for some reason Playwright sees only a blank page there.

And now I'm again running into the case where browser mode picks non-existing test cases and fails:

I'll try to verify these changes manually with multiple different configuration options once the error above stops showing up. But I'm not sure if adding a regression test is doable for now.

[userquin]

The logic seems to be the same included in the vitest:ui plugin

[AriPerkkio]

I've now tested multiple different variations of reportsDirectory and it seems to work OK.

About the error mentioned in #5056 (comment). This is something I've seen many times ever since browser mode was implemented. We've also seen this on CI.

Browser mode seems to attempt to run test cases that do not belong to the current project that is being run. It includes test cases from previous browser mode runs. I'm starting to think there is some kind of 24h caching that causes this. When I ran into this bug this time, I tried removing all node_modules, installing fresh dependencies and building project. I even rebooted my laptop and it still came up. I searched node_modules and pnpm store path location for matches of the erroneous test case but there were none. I was hoping some .vite or .vitest cache would be the root cause. The error came up with all browser.provider options - even the none one. The error disappeared now that I ran tests again today - I had not done any changes in between. 🤷