之前领导让我做一个前端的单元测试,之前自己也没玩过这个东西,然后就开始了自己的踩坑之旅,前期踩坑的部分就不提了直接说我自己最成功的一个方法,自己先用脚手架建一个demoTestUnit(包含单元测试的项目,这个大家可以去百度,应该会有很多),然后将demoTestUnit>package.json文件中的相关配置复制到你原有的项目中,此外还有他生成的tests/unit文件夹。
example.spec.js文件中会有一个单元测试的用例。
运行测试之前还要在重新npm install一下,安装mocha等相关测试需要的包,不出意外这个时候测试就可以运行了。
接下来我就说一下我遇到的最大的坑,我们项目之前的那个前端做了一些环境配置,他在.env.test文件中,将生产环境配置为production
# 测试环境配置
NODE_ENV = production
导致我每次运行test:unit的时候都会报错启动,我一直以为是样式的问题,解决不掉,中途还放弃了一段时间
RUNTIME EXCEPTION Exception occurred while loading your tests
D:\代码\单元测试\m12mocha-vue\dist\css\main.835c1f09.css:1
h3[data-v-43c0d97a]{margin:40px 0 0}ul[data-v-43c0d97a]{list-style-type:none;padding:0}li[data-v-43c0d97a]{display:inline-block;margin:0 10px}a[data-v-43c0d97a]{color:#42b983}.asd[data-v-0f839b79],h1[data-v-0f839b79]{color:#000}
解决这个问题的方式将production改为test就可以了
# 测试环境配置
NODE_ENV = test
有兴趣的朋友可以看一下cli.vuejs.org/zh/guide/mo…
Vue CLI的官网
后续还有单元测试更新...
继续更新,接下来就是测试覆盖率的问题
首先在项目安装mochawesome
npm install --save-dev mochawesome
使用nyc扫描测试覆盖率,安装依赖
npm i --save-dev babel-plugin-istanbul istanbul-instrumenter-loader nyc
接着在项目根目录下新建 nyc.config.js 文件,其内容如下:
module.exports = {
'check-coverage': true,
'per-file': true,
'lines': 0,
'statements': 0,
'functions': 0,
'branches': 0,
'include': [
'src/**/*.js',
'src/**/*.vue'
],
'exclude': [
'src/abandon-ui/**',
'src/*.js',
'**/*.spec.js'
],
'reporter': [
'lcov',
'text',
'text-summary'
],
'extension': [
'.js',
'.vue'
],
'cache': true,
'all': true
}
完成后,在项目根目录新建 vue.config.js, 其内容如下:
const path = require('path')
const testMode = process.env.NODE_ENV === 'test'
module.exports = {
lintOnSave: false,
productionSourceMap: false,
chainWebpack: config => {
if (testMode) {
config.merge({
devtool: 'eval'
})
config.module
.rule('istanbul')
.test(/\.(js|vue)$/)
.include
.add(path.resolve(__dirname, '/src'))
.end()
.use('istanbul-instrumenter-loader')
.loader('istanbul-instrumenter-loader')
.options({ esModules: true })
.before('babel-loader')
}
}
}
完成后,打开项目根目录下的 babel.config.js 文件,修改如下:
const testMode = process.env.NODE_ENV === 'test'
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: testMode ? ['babel-plugin-istanbul'] : []
}
打开 package.json 文件,修改 test:unit 命令:
"test:unit": "nyc vue-cli-service test:unit --reporter=mochawesome"
本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理