fix(coverage): v8 to ignore Vite's generated cjs import helpers

[mrginglymus]

Description

• fixes V8 Coverage + Browser mode + CJS imports branch coverage #8717

Adds conditions to ignore CJS imports in v8 branch coverage. These are generated of the form e.g.

const React = __vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react.default : __vite__cjsImport0_react;

and obviously only one branch will be covered.

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.
• Please check Allow edits by maintainers to make review process faster. Note that this option is not available for repositories that are owned by Github organizations.

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 vitest-dev ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	9442110
🔍 Latest deploy log	https://app.netlify.com/projects/vitest-dev/deploys/68ef391b5af3c00008fc323b
😎 Deploy Preview	https://deploy-preview-8718--vitest-dev.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 project configuration.

[AriPerkkio]

Looks good, thanks! I've also verified that the minimal repro works with these changes.

Ideally we would also add test case into test/coverage-test, but I wasn't able to trigger the condition without adding react as dependency. Tried using @vitest/cjs-lib but it just would not work.

[hi-ogawa]

Vite is injecting code through https://github.com/vitejs/vite/blob/84079a84ad94de4c1ef4f1bdb2ab448ff2c01196/packages/vite/src/node/plugins/importAnalysis.ts#L988. There might be other cases like import * ..., which introduces branch slightly differently. I guess these can be handled as we discover though.

[hi-ogawa]

So, probably this case:

import * as React from 'react';

export default function() {
  return React;
}

becomes

import __vite__cjsImport0_react from "/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react.js?v=fb913633";
const React = ( (m$2) => m$2?.__esModule ? m$2 : {
    ...typeof m$2 === "object" && !Array.isArray(m$2) || typeof m$2 === "function" ? m$2 : {},
    default: m$2
})(__vite__cjsImport0_react);

export default function () {
    return React;
}

with the coverage:

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |       50 |     100 |     100 |                   
 src.js   |     100 |       50 |     100 |     100 | 1                 
----------|---------|----------|---------|---------|-------------------

---

Direct named import seems fine:

import { version } from 'react';

becomes

import __vite__cjsImport0_react from "/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react.js?v=fb913633";
const version = __vite__cjsImport0_react["version"];

[AriPerkkio]

Ok the test case actually works when using file: protocol instead of link:. I guess Vite deps optimizer works only with that.

@hi-ogawa it would be great if Vite's transforms supported something like Babel's auxiliaryCommentBefore so that we could tell it to add ignore hint comments before all custom transforms when coverage is enabled. This is how Jest does with Babel.

[hi-ogawa]

it would be great if Vite's transforms supported something like Babel's auxiliaryCommentBefore so that we could tell it to add ignore hint comments before all custom transforms when coverage is enabled. This is how Jest does with Babel.

Sounds like a good idea. Can you create an issue on Vite?

[mrginglymus]

Adding

        if (type === 'branch'
          && node.type === 'ConditionalExpression'
          && node.test.type === 'ChainExpression'
          && node.test.expression.type === 'MemberExpression'
          && node.test.expression.property.type === 'Identifier'
          && node.test.expression.property.name === '__esModule'
        ) {
          return 'ignore-this-and-nested-nodes'
        }

will handle the * as Foo case, but I don't know if it's too loose a check.

[mrginglymus]

becomes

import __vite__cjsImport0_react from "/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react.js?v=fb913633";
const version = __vite__cjsImport0_react["version"];

@hi-ogawa what's an easy way to obtain this transformed form? I'm finding a lot of bugs in the V8 coverage which will be easiest to diagnose when I can see the transformed source.

[hi-ogawa]

what's an easy way to obtain this transformed form? I'm finding a lot of bugs in the V8 coverage which will be easiest to diagnose when I can see the transformed source.

I was directly checking network devtool to see the response of source code, like 1. run vitest with headed playwright, 2. open devtools, 3. rerun some test to see response.