Compatibility with Vitest browser mode

[chapmanio]

I've been using monocart coverage for a while but I can't get it working with Vitest in browser mode.

https://vitest.dev/guide/browser/ using Typescript/React/Playwright/Chromium as the options via:

npm install -D vitest @vitest/browser playwright

The tests run and pass/fail as expected, but after they complete I get this error:

⎯⎯⎯⎯⎯Unhandled Rejection⎯⎯⎯⎯⎯
TypeError: Cannot read properties of undefined (reading 'entries')
 ❯ normalizeTransformResults node_modules/vitest-monocart-coverage/lib/index.js:202:50
 ❯ MonocartProvider.onAfterSuiteRun node_modules/vitest-monocart-coverage/lib/index.js:135:34
 ❯ Proxy.onAfterSuiteRun node_modules/@vitest/browser/dist/index.js:2163:33
 ❯ WebSocket.onMessage node_modules/@vitest/browser/dist/index.js:2068:29
 ❯ WebSocket.emit node:events:520:28
 ❯ Receiver.receiverOnMessage node_modules/@vitest/browser/node_modules/ws/lib/websocket.js:1220:20
 ❯ Receiver.emit node:events:520:28
 ❯ Receiver.dataMessage node_modules/@vitest/browser/node_modules/ws/lib/receiver.js:596:14
 ❯ Receiver.getData node_modules/@vitest/browser/node_modules/ws/lib/receiver.js:496:10
 ❯ Receiver.startLoop node_modules/@vitest/browser/node_modules/ws/lib/receiver.js:167:16

Is there anything I can do to support this?

I have monocart coverage working with Playwright end to end tests (and component tests) from your other excellent examples. As I have Vitest browser mode set up with Playwright I was wondering if I could use the same approach to track coverage, but as Vitest browser isn't using the playwright fixtures I wasn't sure how.

I've also been looking at https://github.com/cenfun/monocart-coverage-reports?tab=readme-ov-file#collecting-v8-coverage-data but again I'm not sure how to get this working with this package.

[cenfun]

Technically speaking, it requires that Vitest browser can support the collection of coverage, for example, by using the coverage API in playwright test fixtures.

I currently don't know how to support it and will look into it.

Could you please provide a example repo for the Vitest browser mode test?

[chapmanio]

Thanks for the quick response. I have tried to get it working using the Playwright config within Vitests config (via providerOptions) with no luck so far.

https://github.com/chapmanio/monocart-vitest-browser-coverage is a quick example repo to try against - it's got a (rubbish) example of a Playwright end to end tests (with coverage), Vitest unit test (with coverage) and Vitest browser test (with failing coverage)

Let me know if there is anything else I can do to help.

[chapmanio]

I've just seen Vitest 3 in now out (https://vitest.dev/blog/vitest-3) which includes some changes and better docs for using Playwright in browser-mode (https://vitest.dev/guide/browser/playwright.html).

I'm not sure if this will help or not, the launch settings are possibly relevant.

[cenfun]

Could you please try vitest-monocart-coverage@3.0.0

• vitest@3
• @vitest/browser@3

export default defineConfig({
    test: {
        include: ['test/*.test.js'],
        coverage: {
            enabled: true,
            include: ['src/**'],
            
            provider: 'custom',
            customProviderModule: 'vitest-monocart-coverage/browser'

        },

        browser: {
            enabled: true,
            headless: true,
            instances: [{
                browser: 'chromium'
            }],
            provider: 'playwright'
        }
    }
});

[chapmanio]

I'm just waiting on vitest-dev/vitest#7308 to be resolved so I can test this.

However, I'm not sure this will work if you have both unit tests (normal vitest) and browser tests in the same project as coverage is defined for the whole workspace https://vitest.dev/guide/workspace.

I haven't found a way (yet) to define different coverage per workspace.

[cenfun]

I create a issue for it
vitest-dev/vitest#7316