web-dev-qa-db-ja.com

テストカバレッジでjestを使用してVue-cli 3のすべてのvueファイルを表示する方法

テストカバレッジを表示するために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を適切に構成するにはどうすればよいですか？

vue.jsvuejs2jestjsvue-cli-3nyc
7
devIT

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を実行すると、次のようなコンソール出力が生成されます。

console screenshot

GitHubデモ

また、Jestコンソールの出力には、実行可能なJavaScript（Vue SFCの場合はmethods）を含むファイルのみがリストされることに注意してください。デフォルトのVue CLI生成テンプレートを使用している場合、HelloWorld.vueにはmethodsが含まれていないため、リストに表示されません。上のスクリーンショットでは、未使用のメソッドをHelloWorld.vueに追加して、Jestのカバーされていない行レポートを示しています。

13
tony19

@ 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があります。

3
Jalayn

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を実行するだけでカバレッジレポートを生成できます。

カバレッジレポートは次のようになります。

（1）ターミナルenter image description here

（2）HTMLenter image description here

0
Yuci