テストカバレッジを表示するためにJestでVue CLI 3を設定しようとしています。それを機能させるために可能な限りすべてを実行しましたが、まだカバレッジが表示されていません。
Ran all test suites.
----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files | 0 | 0 | 0 | 0 | |
----------|----------|----------|----------|----------|-------------------|
=============================== Coverage summary ===============================
Statements : Unknown% ( 0/0 )
Branches : Unknown% ( 0/0 )
Functions : Unknown% ( 0/0 )
Lines : Unknown% ( 0/0 )
以下は私の設定の抜粋です:
jest.config.js:
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest'
},
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
transformIgnorePatterns: ['<rootDir>/node_modules/'],
testURL: 'http://localhost/'
}
package.json:
....
"scripts": {
"test:unit": "nyc vue-cli-service test:unit"
},
"nyc": {
"check-coverage": true,
"per-file": true,
"lines": 90,
"statements": 90,
"functions": 90,
"branches": 90,
"include": [
"src/**/*.{js,vue}"
],
"exclude": [
"src/*.js"
],
"reporter": [
"lcov",
"text",
"text-summary"
],
"extension": [
".js",
".vue"
],
"verbose": true,
"cache": true,
"all": true
}
テストカバレッジを表示するには、Vue CLI 3およびJestを適切に構成するにはどうすればよいですか?
Jestには独自のカバレッジ機能があるため、package.json:からnyc
を削除します
"scripts": {
// "test:unit": "nyc vue-cli-service test:unit" // DELETE
"test:unit": "vue-cli-service test:unit"
},
// "nyc": {...} // DELETE
Jestのカバレッジを有効にするには、 collectCoverage
および collectCoverageFrom
をjest.config.jsvue-test-utils
docs ):
collectCoverage: true,
collectCoverageFrom: [
'src/**/*.{js,vue}',
'!src/main.js', // No need to cover bootstrap file
],
yarn test:unit
を実行すると、次のようなコンソール出力が生成されます。
また、Jestコンソールの出力には、実行可能なJavaScript(Vue SFCの場合はmethods
)を含むファイルのみがリストされることに注意してください。デフォルトのVue CLI生成テンプレートを使用している場合、HelloWorld.vue
にはmethods
が含まれていないため、リストに表示されません。上のスクリーンショットでは、未使用のメソッドをHelloWorld.vue
に追加して、Jestのカバーされていない行レポートを示しています。
@ tony19の答えは完全に有効ですが、カスタムjest構成に何かを追加する必要は必ずしもありません。 Vue CLIサービスでビルドされたプロジェクトの場合、次のスクリプトをpackage.json
は正常に機能し、カバレッジはVueコンポーネントの場合:
"test:coverage": "vue-cli-service test:unit --coverage",
レポーターの変更、このスクリプト専用の明確なJest構成など、追加できるオプションがあります。オプションの完全なリストを取得するには、ターミナルで次のコマンドを実行できます。
npx vue-cli-service test:unit help
また、これらのオプションの中には、カスタム構成ファイルを保持するのではなく、スクリプト内のすべてを保持するのに役立つcollectCoverage
およびcollectCoverageFrom
があります。
Vue CLIプラグイン@vue/cli-plugin-unit-jest
を使用しない場合でも、Vueコンポーネントのテストカバレッジレポートを生成できます。Jestを同様に構成できます。次の方法に:
jest.config.js
module.exports = {
moduleFileExtensions: ['js', 'json', 'vue'],
transform: {
'^.+\\.js$': 'babel-jest',
'^.+\\.vue$': 'vue-jest'
},
collectCoverage: true,
collectCoverageFrom: ['src/**/*.{js,vue}', '!src/main.js']
}
次に、npx jest
を実行するだけでカバレッジレポートを生成できます。
カバレッジレポートは次のようになります。