Vite、Vue2、Cypress组件测试代码覆盖率

用户7405463994309
74 阅读1分钟

项目环境

  • node.js 18
  • vue 2.6.14
  • cypress 13.12.0
  • vite 5.1.6

具体的配置信息如下

package.json

{
	"dependencies": {   
	    "vue": "2.6.14",
    },
    "devDependencies": {  
	    "@cypress/code-coverage": "^3.12.44",  
	    "cypress": "^13.12.0",  
	    "nyc": "^15.1.0",  
	    "vite": "^5.1.6",  
	    "vite-plugin-istanbul": "^5.0.0",  
	},
	"nyc": {     // 配置nyc，也可以配置在.nycrc
	    "reporter": ["json-summary"],
	    // 以json-summary格式输入到当前路径下的coverage,下面的链接查看有哪些报告可以选择
	    // https://istanbul.js.org/docs/advanced/alternative-reporters/
	    "extension": [  
	        ".js",  
	        ".jsx",  
	        ".vue"  
	    ]  
	}
}

vite.config.js

import istanbul from 'vite-plugin-istanbul';  
  
// https://vitejs.dev/config/  
export default defineConfig(({ command, mode }) => {  
    const env = loadEnv(mode, process.cwd(), '');  
    return {  
        plugins: [  
            createVuePlugin(),  
            istanbul({       // 添加自动instrument插件
                include: 'src/*',   // 可根据自己源代码的位置进行调整
                exclude: ['node_modules', 'cypress']  
            })  
        ],  
    };  
});

cypress.config.js

import { defineConfig } from 'cypress';  
import task from '@cypress/code-coverage/task.js'  
  
export default defineConfig({  
    component: {  
        devServer: {  
            framework: 'vue',  
            bundler: 'vite'  
        },  
        setupNodeEvents(on, config) {  
            task(on, config)    // 添加code-coverage插件
  
            return config  
        }  
    },  
  
    e2e: {  
  
    }  
  
});

cypress/suppport/component.js 如果是e2e测试的话，需要放在e2e.js

import './commands'  
import { mount } from 'cypress/vue2'  
import '@cypress/code-coverage/support'  // 添加这行
Cypress.Commands.add('mount', mount)

结果

当运行完Cypress run或者Cypress open等测试命令后，在项目路径下会自动多两个文件夹.nyc_output和coverage，前者是nyc生成代码测试覆盖率报告的依据数据，后者放置最后的报告。

参考文档

avatar
文章
阅读
粉丝