Я запускаю приложение VueJS, написанное на Typescript, и тестирую его с помощью тестов Cypress e2e. Я хотел бы настроить отчеты о покрытии, чтобы увидеть, сколько моего кода я покрыл тестами, поэтому я попытался интегрировать Istanbul JS. Документация от Istanbul JS и Cypress делает это полностью выполнимым, но ничто не так просто, как кажется. Обратите внимание на вывод ниже, о котором сообщается только о 3 файлах, несмотря на тот факт, что это приложение имеет сотни файлов, а базовые файлы Vue, такие как main.ts
и router.ts
, даже не включены. Где остальные файлы и как я могу получить полный отчет о покрытии моего приложения 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}',
],
}
пакет. 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 plugins / 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 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 |
------------------------------|----------|----------|----------|----------|-------------------|