Vue SFCs not included in coverage reports #217

egardner · 2020-02-11T16:18:26Z

Problem

I'm using vue-test-utils with Jest to run unit tests for single-file Vue components. I'm relying on vue-jest to transform the component files so that I don't have to rely on Webpack, etc.

I'm able to require Vue components in tests and run them without any problems, but for some reason I'm not able to get Jest to include these files in the coverage reports that it generates.

I'm using Jest at 25.1.0, vue-jest at 3.0.5, and vue at 2.6.11.

One other thing I should note: for this project, my Vue components are all written in ES5 (plus module.exports and require statements; I’m relying on a non-JS module tool to deliver this code in browser). I'm not running any webpack or babel transformations on JS code either at runtime or in testing, just the vue-jest transform for SFCs. Everything works fine until it comes to generating the coverage report.

Source code is visible here: https://github.com/egardner/mediawiki-extensions-VueTest

Configuration

All JS/Vue files live in a resources folder which is structured like this:

resources/
├── components
│   ├── ApiRequestModule.vue
│   ├── App.vue
│   ├── ChildComponent.vue
│   ├── ComputedPropertyModule.vue
│   ├── ParentChildCommunicationModule.vue
│   ├── TwoWayBindingModule.vue
│   └── index.js
├── init.js
└── plugins
    ├── api.js
    ├── i18n.js
    └── index.js

Here are the relevant parts of the Jest configuration being used:

module.exports = {
  clearMocks: true,
  collectCoverage: true,
  collectCoverageFrom: [
    "resources/**/*.(js|vue)"
  ],
  coverageDirectory: "coverage",
  coveragePathIgnorePatterns: [,
    "/node_modules/",
    "resources/components/index.js",
    "resources/plugins/index.js",
    "resources/init.js"
  ],
  globals: {
    "vue-jest": {
      babelConfig: false,
      hideStyleWarn: true,
      experimentalCSSCompile: true
    }
  },
  moduleFileExtensions: [
    "js",
    "json",
    "vue"
  ],
  setupFiles: [
    "./jest.setup.js"
  ],
  transform: {
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
  },
};

Output

When I run the tests using Jest, I get output like this:

 PASS  tests/jest/ChildComponent.test.js
 PASS  tests/jest/TwoWayBindingModule.test.js
 PASS  tests/jest/ComputedPropertyModule.test.js
 PASS  tests/jest/App.test.js
 PASS  tests/jest/ApiRequestModule.test.js
 PASS  tests/jest/ParentChildCommunictionModule.test.js
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |   92.86 |    66.67 |     100 |   92.86 |
 api.js   |     100 |      100 |     100 |     100 |
 i18n.js  |   88.89 |       50 |     100 |   88.89 | 52
----------|---------|----------|---------|---------|-------------------

Test Suites: 6 passed, 6 total
Tests:       13 passed, 13 total
Snapshots:   0 total
Time:        3.981s
Ran all test suites.

The tests (which require various Vue files) run and succeed, but the coverage report only includes the plain JS files.

Do Vue files need to be transformed with Webpack or Babel so that they can be assessed for coverage in Jest? I had assumed that the vue-jest transformations would allow for this.

sai-velamuri · 2020-02-11T22:41:00Z

Facing the same issue.

"collectCoverageFrom": [

    "src/**/*.{js,vue}",

    "!src/*.js",

    '!src/**/*.spec.js',

    "!**/node_modules/**",

  ],

And my directory structure is:

src /
****app/
********landingpage/
************comp1/comp.vue

Please let us know guys. Thought setting up complete unit-testing is not so difficult.

TerminalSpirit · 2020-02-11T23:52:44Z

Having the same issue, tests run fine for SFCs but no coverage. vue-cli seems to get it right though and it appears to use vue-jest

sai-velamuri · 2020-02-12T14:36:59Z

@TerminalSpirit Is there any other way you could suggest? We did not set up our project using vue-cli.

TerminalSpirit · 2020-02-13T21:27:15Z

sorry @sai-velamuri I'm still stuck myself. To prove it is possible to get the coverage I installed some of vue-cli's packages manually

...
"@vue/babel-preset-app": "latest",
"@vue/cli-plugin-babel": "^4.1.2",
"@vue/cli-plugin-unit-jest": "^4.1.2",
"@vue/cli-service": "^4.1.2"
...
"vue-jest": "^3.0.5",
...

I don't think that's a good approach though as at this point you might as well go ahead and use vue-cli properly. When I ran the tests it does include SFCs in the coverage. Scratching around those cli packages, it does look like there's work needed to get it to work (which they've done). Since they are also using vue-jest I can only think it's some kind of config issue.

That's as far as I got with my rookie knowledge :)

egardner · 2020-02-13T22:10:59Z

@TerminalSpirit this is useful, thank you for sharing. It seems like vue-cli-service knows some tricks that we don't! I don't understand what the relevant config differences are, but I was able to get coverage reports by doing the following:

Adding these packages to package.json (I didn't need the babel plugin)

"@vue/cli-plugin-unit-jest": "4.2.2",
"@vue/cli-service": "4.2.2",

And then running npx vue-cli-service test:unit

That gives me the following report:

-------------------------------------|----------|----------|----------|----------|-------------------|
File                                 |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-------------------------------------|----------|----------|----------|----------|-------------------|
All files                            |    96.97 |    66.67 |      100 |    96.97 |                   |
 components                          |      100 |      100 |      100 |      100 |                   |
  ApiRequestModule.vue               |      100 |      100 |      100 |      100 |                   |
  App.vue                            |      100 |      100 |      100 |      100 |                   |
  ChildComponent.vue                 |      100 |      100 |      100 |      100 |                   |
  ComputedPropertyModule.vue         |      100 |      100 |      100 |      100 |                   |
  ParentChildCommunicationModule.vue |      100 |      100 |      100 |      100 |                   |
  TwoWayBindingModule.vue            |      100 |      100 |      100 |      100 |                   |
 plugins                             |    92.86 |    66.67 |      100 |    92.86 |                   |
  api.js                             |      100 |      100 |      100 |      100 |                   |
  i18n.js                            |    88.89 |       50 |      100 |    88.89 |                52 |
-------------------------------------|----------|----------|----------|----------|-------------------|

This is a decent solution for now but I'd still love to understand what options are actually being provided to Jest here that suddenly allows everything to work properly...


          Enable coverage reports for vue components via vue-cli-service

See here for more info: vuejs/vue-jest#217 (comment) Running unit tests now outputs a coverage report that includes vue SFCs. Change-Id: I638810389ddc89351c4ec86638976f6d5c9f63c0

Fandyx · 2020-02-14T18:54:02Z

I was also facing this issue, your solution works perfect. Thanks!

TerminalSpirit · 2020-02-17T20:45:10Z

@egardner glad to hear it was of some help :)

ThePeach · 2020-02-26T15:15:58Z

And then running npx vue-cli-service test:unit

so that version of vue-cli-service seems to be using jest 24.9.0

I have exactly the same problem this post is talking about and I was running 25.1.0

Downgraded to 24.9.0 and coverage started working again. So major update of jest is breaking something with the vue-jest reporting.

nogic1008 · 2020-03-29T23:53:18Z

Probably fixed in facebook/jest#9724 and jest@25.2.4.

ZajdeR · 2020-03-30T07:49:34Z

Yes. It is fixed in 25.2.4

egardner · 2020-03-30T15:43:08Z

Great, I'll update my project to Jest 25 again (sans Vue-CLI tools) and confirm that the functionality is restored. Thanks to everyone who helped track down the problem here!

rodion-arr · 2020-03-30T15:46:07Z

From my side I can confirm that upgrading to Jest v25.2.4 restores ability to collect coverage reports from .vue files

TerminalSpirit · 2020-03-31T14:34:03Z

upgrading Jest works for me too! thanks all!

Fandyx mentioned this issue Feb 14, 2020

Coverage is only collected from javascript files facebook/jest#9490

Closed

This was referenced Feb 26, 2020

vue SFC template coverage #198

Open

Test coverage report not working. #187

Open

dated mentioned this issue Feb 26, 2020

broken coverage reporting with jest 25 ArkEcosystem/desktop-wallet#1720

Closed

nogic1008 mentioned this issue Mar 3, 2020

fix(test): cannot collect *.vue coverage nogic1008/nuxt-ts-template#48

Merged

sodatea mentioned this issue Mar 5, 2020

update jest to ^25 vuejs/vue-cli#5114

Open

nogic1008 mentioned this issue Jul 29, 2020

[BREAKING CHANGE] remove inline source-map on process() output #255

Merged

vuejs / vue-jest

Vue SFCs not included in coverage reports #217

Vue SFCs not included in coverage reports #217

egardner commented Feb 11, 2020

sai-velamuri commented Feb 11, 2020

TerminalSpirit commented Feb 11, 2020

sai-velamuri commented Feb 12, 2020

TerminalSpirit commented Feb 13, 2020 •

edited

egardner commented Feb 13, 2020

Fandyx commented Feb 14, 2020 •

edited

TerminalSpirit commented Feb 17, 2020

ThePeach commented Feb 26, 2020

nogic1008 commented Mar 29, 2020

ZajdeR commented Mar 30, 2020

egardner commented Mar 30, 2020

rodion-arr commented Mar 30, 2020

TerminalSpirit commented Mar 31, 2020

vuejs / vue-jest

Join GitHub today

Vue SFCs not included in coverage reports #217

Vue SFCs not included in coverage reports #217

Comments

egardner commented Feb 11, 2020

sai-velamuri commented Feb 11, 2020

TerminalSpirit commented Feb 11, 2020

sai-velamuri commented Feb 12, 2020

TerminalSpirit commented Feb 13, 2020 • edited

egardner commented Feb 13, 2020

Fandyx commented Feb 14, 2020 • edited

TerminalSpirit commented Feb 17, 2020

ThePeach commented Feb 26, 2020

nogic1008 commented Mar 29, 2020

ZajdeR commented Mar 30, 2020

egardner commented Mar 30, 2020

rodion-arr commented Mar 30, 2020

TerminalSpirit commented Mar 31, 2020

Essential cookies

Always active

Analytics cookies

TerminalSpirit commented Feb 13, 2020 •

edited

Fandyx commented Feb 14, 2020 •

edited