Description
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.