Why is my Jest code coverage report invalid?

Question

When I generate a Jest code coverage report for my Vue 2.7.X app, the lines shown as covered/uncovered in the report don't make any sense:

The red sections in this report should indicate code that's not covered (executed) by the test suite, but obviously it makes no sense to show comments (lines 290, 291) as uncovered, or to show (part of) line 298 as uncovered when the lines before and after are covered.

I guess what's happening is that the lines which Jest detects as uncovered are not being correctly mapped back to the source code, so there may be a problem with the Babel transpilation.

I generate the code coverage report with yarn jest --coverage and the application source code is written in JavaScript (rather than TypeScript).

some of the dependencies from package.json which may be relevant to the problem are shown below:

  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "@vue/test-utils": "1.3.3",
    "@vue/vue2-jest": "29.2.2",
    "@vitejs/plugin-vue2": "^2.2.0",
    "babel-jest": "^29.3.1",
    "http-proxy": "^1.18.1",
    "jest": "^29.3.1",
    "jest-environment-jsdom": "^29.3.1",
    "sass": "1.32.13",
    "sass-lint": "^1.13.1",
    "start-server-and-test": "^1.14.0",
    "unplugin-vue-components": "^0.22.12",
    "vite": "^4.0.1",
    "vite-plugin-rewrite-all": "^1.0.1",
    "vue-template-compiler": "^2.7.14"
  }

Minimum Reproducible Example

I've created a minimal Git repo that demonstrates the problem.

1. Clone the repo
2. Run yarn install && yarn test:unit:coverage to generate the coverage report (or use npm instead)
3. Open the file coverage/lcov-report/index.html to see the report

If you open the page for components/toaster-message.vue, it says 1/2 branches and 2/3 functions are covered, but none of the lines are marked in red (hideAppMessage should be red because it's not tested).

If you open the page for views/login.vue the lines that are marked in red (uncovered) don't make any sense. There are no tests for this component.

Whitehead

Have you enabled sourceMaps? It would nice to have demo project with problem – Dogbane

@Dogbane what config do you recommend to enable source maps? I thought they are enabled by default when tests are run – Whitehead

Shouldn't you be referencing vue-jest like @vue/vue2-jest@29 when you install? Also have you tried to use just @vue/vue2-jest when configuring the transform? Your setup seems slightly different than the readme. – Arawn

@Arawn I've tried specifying just @vue/vue2-jest in the transform, but it doesn't make any difference. I've looked at the readme and I can't see any significant difference between the setup it recommends and what I'm using, can you? – Whitehead

If you provide a MRE I'm sure it will get resolved. – Arawn

@Arawn done - see above – Whitehead

There is also one here. Are you able to use different versions of Jest? – Arawn

@Arawn yes, I can change the version of Jest, or any other dependency – Whitehead

Answer 1

What worked for me was adding coverageProvider: 'v8' to the jest.config.js. I'm not entirely sure why changing coverageProvider works, but seems like vue-jest is having general problems with collecting coverage correctly due to babel dependency changes.

Try adding this to your Jest configuration:

coverageProvider: 'v8'

Then npm run test:unit:coverage.

This worked on Node v16.16.0 and v18.12.1.

Arawn

It worked, thanks very much! Be sure not to spend all of the bonus on hookers and coke. – Whitehead

Glad it worked for you. I prefer Pepsi. – Arawn

Switching to v8 fixed my code coverage issues but now the all html in the <template> tag is being shown as covered as well as the css in the <style> tag. Is this expected behavior? I would think it won't be included since it doesn't contain javascript code. – Putup

Thank god this worked! I was using SWC. Transform: {'^.+\\.(t|j)s$': '@swc/jest'}. So no Vue or Babel. – Penzance

Answer 2

jest uses its own version of Babel to transpile your code, but the source map that generates it could be unnacurate or have a differrent version than the one you are using.

You can make sure that jest is using the same version of Babel that you're using in your app by adding the following configuration to your package.json file:

"jest": {
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
  }
}

Also, could it be that even though your package.json has that version you have something else in the package-lock.json?

Breathed

I think my current jest configuration is equivalent to your suggestion. I've updated my question to include the jest configuration – Whitehead

I've created a minimal example that demonstrates the problem - see the update to my post – Whitehead

Answer 3

Looks like solution with coverageProvider: 'v8' added by @morganney works.

For the problem of generating a coverage report.

Failed to write coverage reports:
  ERROR: Error: ENOENT: no such file or directory, open 'path\to\file\<<jsx-config-pragma.js>>.html'

Just remove the .ts("\\.(tsx|ts|jsx|js)$") files from configuration (package.json)

...
"transform": {
  "\\.(tsx|jsx|js)$": [
    "@swc-node/jest",
    {
      "dynamicImport": true
    }
  ]
},
...

Baumgardner