之前领导让我做一个前端的单元测试，之前自己也没玩过这个东西，然后就开始了自己的踩坑之旅，前期踩坑的部分就不提了直接说我自己最成功的一个方法，自己先用脚手架建一个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)，我们将立即处理
