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