浅谈vue单元测试最佳实践（上）
一、为什么要进行单元测试·单元测试可以作为描述组件行为的文档
· 降低人工测试的时间
· 减少迭代或者优化产生的bug
· 改进设计&促进重构
二、如何使用Vue Test Utils对Vue组件进行单元测试
Vue官方推荐使用Vue Test Utils对单文件组件单元测试。
Vue Test Utils 会将单文件组件隔离挂载，然后模拟必要的输入 (prop、注入和用户事件) 和对输出 (渲染结果、触发的自定义事件) 的断言来测试 Vue 组件。
被挂载的组件会返回到一个包裹器内，而包裹器会暴露很多封装、遍历和查询其内部的 Vue 组件实例的便捷的方法。
单文件组件单元测试流程图如下：
http://www.51testing.com/attachments/2023/06/15326880_2023060914503514cfv.jpg
下面将介绍如何使用官方推荐方案搭建单元测试的环境
1 、选择测试运行器
测试运行器是执行测试集的程序。主流的JavaScript测试运行器比较多，且Vue Test Utils都支持。Vue Test Utils是与测试运行器无关的。
那我们该如何从众多测试运行器选择呢？需要关注以下几点：
· 测试运行器给我们提供的功能集合是否足够强大
· 性能
· 对单文件组价预编译的支持
Vue Test Utils推荐以下两个测试运行器
Jest是功能最全的测试运行器。它需要的配置是最少的，默认安装了JSDOM，内置断言命令行的用户体验非常好。 不过需要一个将Vue单文件组件预处理器，这样Jest才可以处理。Vue Test Utils为我们提供了vue-jest预处理器来处理最常见的单文件组件特性，注意不是100%的vue-loader。
mocha-webpack是一个webpack + Mocha的包裹器。同时包含了更顺畅的接口和侦听模式。这些设置的好处是我们可以通过webpack+vue-loader得到完整的单文件组件支持，但是需要很多配置。
2、浏览器环境支持
Vue Test Utils依赖浏览器环境。技术上讲你可以将其运行在一个真实的浏览器环境，但不推荐，因为在不同的平台都启动真实的浏览器是很复杂的。
推荐是用JSDOM在Node虚拟浏览器环境运行测试。
Jest测试运行器内置了JSDOM。对于其他的测试运行器，你可以在你测试的入口使用jsdom-global手动设置JSDOM。
<b> npm install --save-dev jsdom jsdom-global</b>
// 在测试的入口中设置
require('jsdom-global')()
3、单文件组件单元测试环境配置
Vue的单文件组件在他们运行于Node或者浏览器之前需要预编译。有两种方式来做预编译，通过vue-jest预编译器或者通过webpack
vue-jest预处理器支持基本的单文件组件功能，但是目前不支持处理样式块和自定义块，这些都需要vue-loader+webpack支持。
Jest&@vue/test-utils
对Vue2项目推荐以下版本，可以直接运行起来
npm i -D @vue/test-utils@1.3.0 jest@24.9.0
配置文件
{
"scripts": {
"test": "jest"
}
}
·vue-jest
vue-jest是用来处理单文件组件的
npm i -D vue-jest@4.0.1
配置文件
{
// ...
"jest": {
"moduleFileExtensions": [
"js",
"json",
// 告诉 Jest 处理 `*.vue` 文件
"vue"
],
"transform": {
// 用 `vue-jest` 处理 `*.vue` 文件
".*\\.(vue)$": "vue-jest"
}
}
}
如果你的Babel版本高于7还需安装 babel-bridge
npm install --save-dev babel-core@^7.0.0-bridge.0
对于比较老的项目
npm install --save-devbabel-core@^7.0.0-bridge.0@babel/plugin-transform-runtime
.babelrc配置如下：
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": false,
}],
],
"plugins": ["@babel/plugin-transform-runtime"]
}
·处理 webpack 别名
如果你在 webpack 中配置了别名解析，比如把 @ 设置为 /src 的别名，那么你也需要用 moduleNameMapper 选项为 Jest 增加一个匹配配置：
{
// ...
"jest": {
// ...
// 支持源代码中相同的 `@` -> `src` 别名
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
}
}
}
·为 Jest 配置 Babel
尽管最新版本的 Node 已经支持绝大多数的 ES2015 特性，你可能仍然想要在你的测试中使用 ES modules 语法和 stage-x 的特性。为此我们需要安装 babel-jest：
npm i -D babel-jest@24.9.0
配置如下：
{
transform: {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
}
}
最后完整的jest.conf.js的配置如下：
// ./test/unit/jest.conf.js
const path = require('path');
module.exports = {
rootDir: path.resolve(__dirname, '../../'), // 类似 webpack.context
"collectCoverage": true,
moduleFileExtensions: [ // 类似 webpack.resolve.extensions
'js',
'json',
'vue',
],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1', // 类似 webpack.resolve.alias
},
transform: { // 类似 webpack.module.rules
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
// '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
".*\\.(vue)$": '<rootDir>/node_modules/vue-jest',
},
setupFiles: ['<rootDir>/test/unit/setup'], // 类似 webpack.entry
coverageDirectory: '<rootDir>/test/unit/coverage', // 类似 webpack.output
collectCoverageFrom: [ // 类似 webpack 的 rule.include
'src/components/__test__/*.{js}',
'!src/main.js',
'!src/router/index.js',
'!**/node_modules/**',
],
transformIgnorePatterns: ['/node_modules/']
};
目录结构如下：
http://www.51testing.com/attachments/2023/06/15326880_202306091450381MFcU.jpg
·setup.js入口文件
import Vue from 'vue'
Vue.config.productionTip = false;
这样单元测试的配置文件就完成了~
页:
[1]
