Instanbul JS,Vue JS,Vue CLI,赛普拉斯e2e测试和Typescript的覆盖率报告仅显示了几个文件

我正在运行一个用Typescript编写的VueJS应用,并正在使用Cypress e2e测试对其进行测试。我想获取覆盖率报告设置,以查看测试覆盖了我的代码量,因此我尝试集成Istanbul JS。 Istanbul JS和Cypress的文档使这看起来完全可行,但是似乎从未如此简单。请注意,输出在下面仅报告了3个文件,尽管该应用程序包含数百个文件,并且甚至不包括基本Vue文件,例如main.tsrouter.ts。其余文件在哪里,如何获得Vue应用程序的完整覆盖率报告?

我根据赛普拉斯code coverage documentation的项目设置如下:

babel.config.js

module.exports = {
    presets: [
        [
            '@vue/app',{
                useBuiltIns: 'entry',},],plugins: [ 'istanbul' ],}

nyc.config.js

module.exports = {
    extends: '@istanbuljs/nyc-config-typescript',all: true,extension: [
        '.vue','.ts',include: [
        'src/**/*.{vue,ts}',}

package.json

"scripts": {
    "e2e": "NODE_ENV=production vue-cli-service test:e2e --mode 'e2e'","coverage": "npm run e2e -- --headless --spec tests/e2e/specs/example.test.js && npx nyc report --reporter=text"
},"devDependencies": {
    "@cypress/code-coverage": "1.10.1","@istanbuljs/nyc-config-typescript": "0.1.3","@types/chai": "4.2.4","@types/chart.js": "2.8.10","@types/gtag.js": "0.0.3","@types/mocha": "5.2.7","@types/parse": "2.2.15","@types/ramda": "0.26.33","@types/stripe-v3": "3.1.9","@vue/cli-plugin-babel": "4.0.5","@vue/cli-plugin-e2e-cypress": "4.0.5","@vue/cli-plugin-eslint": "4.0.5","@vue/cli-plugin-typescript": "4.0.5","@vue/cli-plugin-unit-mocha": "4.0.5","@vue/cli-service": "4.0.5","@vue/eslint-config-typescript": "4.0.0","@vue/test-utils": "1.0.0-beta.29","babel-eslint": "10.0.3","babel-plugin-istanbul": "5.2.0","chai": "4.2.0","cypress": "3.6.0","eslint": "6.6.0","eslint-plugin-vue": "5.2.3","node-sass": "4.13.0","nyc": "14.1.1","sass-loader": "8.0.0","source-map-support": "0.5.16","stylelint": "11.1.1","stylelint-config-standard": "19.0.0","ts-node": "8.4.1","typescript": "3.6.4","vue-template-compiler": "2.6.10","webpack-bundle-analyzer": "3.6.0"
}

Cypress插件/index.js

module.exports = (on,config) => {
    on('task',require('@cypress/code-coverage/task'))

    return Object.assign({},config,{
        integrationFolder: 'tests/e2e/specs',screenshotsFolder: 'tests/e2e/screenshots',videosFolder: 'tests/e2e/videos',supportFile: 'tests/e2e/support/index.js',})
}

赛普拉斯support / index.js

import '@cypress/code-coverage/support'
import './commands'

Cypress.Screenshot.defaults({
    screenshotOnRunFailure: false,})
------------------------------|----------|----------|----------|----------|-------------------|
File                          |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
------------------------------|----------|----------|----------|----------|-------------------|
All files                     |    20.24 |        0 |     4.44 |    19.87 |                   |
 Charts                       |    54.55 |        0 |        0 |       50 |                   |
  ScoreSummaryChart.vue       |    54.55 |        0 |        0 |       50 |    40,48,54,62,79 |
 Quizzes                      |    15.93 |        0 |        0 |    16.19 |                   |
  QuizView.vue                |    15.93 |        0 |        0 |    16.19 |... 13,416,417,418 |
 Tiles                        |    22.73 |        0 |    15.38 |    21.95 |                   |
  QuizOverviewTile.vue        |    22.73 |        0 |    15.38 |    21.95 |... 71,175,185,188 |
------------------------------|----------|----------|----------|----------|-------------------|
byl8781143 回答:Instanbul JS,Vue JS,Vue CLI,赛普拉斯e2e测试和Typescript的覆盖率报告仅显示了几个文件

  1. @istanbuljs/nyc-config-typescript 添加到您的 devDependencies

  2. babel.config.js

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],plugins: [
    ['babel-plugin-istanbul',{
      extends: '@istanbuljs/nyc-config-typescript',extension: ['.ts','.tsx','.js','.vue']
    }]
  ]
}
  1. 删除 nyc.config.js 文件

  2. 删除node_modules/.cache

  3. 重启你的服务器

本文链接:https://www.f2er.com/3150606.html

大家都在问