javascript - Instanbul JS、Vue JS、Vue CLI、Cypress e2e 测试和 Typescript 的覆盖率报告仅显示几个文件

Question

我正在运行一个用 Typescript 编写的 VueJS 应用程序，并使用 Cypress e2e 测试对其进行测试。我想设置覆盖率报告以查看测试覆盖了多少代码，因此我尝试集成 Istanbul JS。 Istanbul JS 和 Cypress 的文档使这看起来完全可行，但没有什么比看起来更容易。请注意下面的输出，尽管该应用程序有数百个文件和基本 Vue 文件，如 main.ts 和 router.ts，但仅报告了 3 个文件 甚至不包括在内。其余文件在哪里？如何获得我的 Vue 应用程序的完整覆盖率报告？

我根据 Cypress 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',
    })
}

Cypress 支持/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 |
------------------------------|----------|----------|----------|----------|-------------------|

Answer 1

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. 重启服务器