关于现有项目添加单元测试的问题

梁通
159 阅读2分钟

之前领导让我做一个前端的单元测试，之前自己也没玩过这个东西，然后就开始了自己的踩坑之旅，前期踩坑的部分就不提了直接说我自己最成功的一个方法，自己先用脚手架建一个demoTestUnit（包含单元测试的项目，这个大家可以去百度，应该会有很多），然后将demoTestUnit>package.json文件中的相关配置复制到你原有的项目中，此外还有他生成的tests/unit文件夹，

image.png example.spec.js文件中会有一个单元测试的用例

image.png

运行测试之前还要在重新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",
avatar
文章
阅读
粉丝