javascript - 使用 Instanbul JS、Vue JS、Vue CLI、Cypress e2e 測試和 Typescript 的覆蓋率報告僅顯示少數幾個文件

我正在運行一個用 Typescript 撰寫的 VueJS 應用程式，並用 Cypress 進行端到端測試。我希望設置覆蓋率報告，以查看我的測試覆蓋了多少程式碼，因此我嘗試整合 Istanbul JS。Istanbul JS 和 Cypress 的文件看起來完全可以做到這一點，但事情通常沒有看起來那麼簡單。請注意下面的輸出，儘管這個應用程式有數百個文件，而且像 main.ts 和 router.ts 這樣的基本 Vue 文件甚至都未被包含，但報告中僅顯示了 3 個文件。其他文件在哪裡，我該如何獲得 Vue 應用程式的完整覆蓋率報告？

我已按照 Cypress 代碼覆蓋文檔設置我的專案，包含以下檔案：

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

答案＃1

將 @istanbuljs/nyc-config-typescript 添加到你的 devDependencies
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']
    }]
  ]
}

刪除 nyc.config.js 檔案
刪除 node_modules/.cache
重新啟動你的伺服器