vue单元测试入门

Posted 2021-04-16 web 开发学习

由于公司业务需求，需要对项目写单元测试。虽然之前没做过，也不能对领导说我不会，怎么办，迎男而上呗，作为一个有追求的程序员，理念是搞定一切需求。好在一点，项目我来了之后重新重构了一下，目录结构清晰多了。一个好的项目,测试一定是容易的。

 本篇简短记录一下整个测试过程中踩到坑，，目前讲单元测试的文章比较少，做个总结，同时也给后来人指个路，各位大神写的不对的地方，欢迎后台留言赐教。

先简单介绍一下项目，项目是用vue + element-ui 构建的中后台管理系统。脚手架用的vue-cli2.* ,之前建的项目，也不想折腾升级。测试框架在对比了 jest 和 mocha 后选择了jest。jest 是基于jasmine的框架，集成度高，功能全面，配置简单。为什么是这两大框架，因为它们是主流框架，vue 脚手架内置了这两个单元测试框架，在新建项目时根据自己需求选择。两大框架对比图如下：

在使用vue脚手架创建项目时选择unit -> jest ,最终会在项目目录下生成test测试文件夹，并且带了一些基本的单元测试配置. 默认 test/unit 文件下所有以 .spec.js结尾的文件都是测试用例。test/unit 文件下有两个重要的配置文件：jest.conf.js 和 setup.js 文件 , jest.conf.js 是 jest 的配置文件，setup.js文件是测试的入口文件,下面介绍下这两个文件。

1：jest.conf.js 主要配置 ：

先上代码再释义

const path = require('path')

module.exports = {
  rootDir: path.resolve(__dirname, '../../'),
  moduleFileExtensions: [
    'js',
    'json',
    'vue',
    'jsx'
  ],
  moduleNameMapper: {
    '^vue$': 'vue/dist/vue.common.js',
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  transform: {
    '^.+\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\.(vue)$': '<rootDir>/node_modules/vue-jest'
  },
  transformIgnorePatterns: [
    '<rootDir>/node_modules/(?!(countup.js/dist/|echarts/src/|zrender/src/))'
  ],
  testPathIgnorePatterns: [
    '<rootDir>/test/e2e',
    '<rootDir>/node_modules/'
  ],
  setupFilesAfterEnv: ['mock-local-storage'],
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
  setupFiles: ['<rootDir>/test/unit/setup'],
  // mapCoverage: true,
  coverageDirectory: '<rootDir>/test/unit/coverage',
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**'
  ]
}

moduleFileExtensions：模块文件扩展名，需要注意的是如果项目用了jsx文件，记得要把扩展名加上。

moduleNameMapper: 模块别名，在webapck中定义的别名要在这定义一遍。

transform：定义需要转换的文件正则及对应工具。

transformIgnorePatterns: 定义忽略转换的正则，这个要注意，默认node_modules文件夹下的依赖不会转换，后边正则括号里的 ?! 很重要，意思是除了括号里的要转换，其他的都不转换，如果依赖里有没有编译的es6模块需要将目录加进去，否则测试的时候会因为不识别es6模块报错。

说到这有必要给大家看下babel配置，

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 9"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime", "@babel/plugin-syntax-dynamic-import"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

其中 env -> test -> plugins -> transform-es2015-modules-commonjs是必须的。是将es6模块转换为commonjs模块。还有一点需要注意，在修改了babel 或 jest.conf.js配置后，一定要在测试命令后面加上 --no-cache 清除缓存，默认是缓存的，笔者修改了配置后怎么都不生效，都快调哭了，直到有一天发现，昨天修改的项目第二天跑不起来了，才想到是缓存原因。，项目单元测试跑顺了，再启用缓存，提高测试速度。

testPathIgnorePatterns： 配置忽略的测试路径，如果有些文件不想测试，可以放到这个里面

setupFilesAfterEnv： 这个是配置单元测试前的环境，mock-local-storage 插件是为了解决项目localStorage及 sessionStorage问题的，测试用例跑在node环境，需要模拟一些浏览器环境的API，这是解决方案之一。

snapshotSerializers： 快照测试，具体看vue官方文档单元测试

setupFiles: 指定jest安装文件,即入口文件，这里需要说明的是 在项目中用的UI依赖要在这里引入一下，不然测试的时候会报没有注册相关的组件。

参考配置如下：

import Vue from 'vue'
import ElementUI from 'element-ui'
import BaseIcon from '@/components/base/base_icon.vue'

Vue.use(ElementUI)

Vue.config.productionTip = false
Vue.component('base-icon', {BaseIcon})

coverageDirectory： 输出测试覆盖率报告目录，jest 集成了 Isstanbul 覆盖率工具，跑完测试用例后自动生成覆盖率报告，这个是很不错的。

collectCoverageFrom： 收集覆盖率的目录

这些都是基本的配置，及踩坑指南，测试用例的编写这里就不再赘述了，参照文档相信大家都能做到，由于项目的不同，在写单元测试时会遇到不一样的问题，最终找到解决的思路才是最重要的。

最后放上文档链接：

jest文档：https://jestjs.io/zh-Hans/ 

vue官方文档：https://cn.vuejs.org/v2/guide/unit-testing.html

有问题的也欢迎大家扫下面二维码加入群聊交流。