vite + vue3.0使用jest测试初体验（一）
2021-10-22 本文已影响0人
木槿流年_木笔
使用vite + vue 3.0 进行单元测试 安装环境
使用的是 vue官方推荐插件@vue/test-utils进行测试, 考虑到某一些库还是es6的代码未编译，所以也将babel添加入配置，以防万一（如果不需要可以删除，暂时只是加入方便以后查阅）。
安装插件
1\. 安装jest, 这里我使用的是全局安装,可局部安装
```npm i jest -g```
2\. 安装test
** 如果是vue3.0\. 此处一定要加next **
``` npm i -D jest-serializer-vue vue-jest@next @vue/test-utils```
3\. 安装所需要的babel插件
```npm i babel-jest babel-core@^7.0.0-bridge.0 @babel/plugin-transform-runtime @babel/env -D ```
4\. 可视化报告
``` npm i -D jest-html-report```
在项目中添加jest.config.json
```
{
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
],
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1",
},
"transformIgnorePatterns": [
"node_modules/(?!(yourModuleName))"
],
"reporters": [
"default",
["./node_modules/jest-html-reporter", {
"pageTitle": "Test Report"
}]
]
}
```
配置说明：
moduleFileExtensions： 需要配置文件名后缀
transform： 如何转换
snapshotSerializers： 将保存的快照测试结果序列化，使得其美观
moduleNameMapper： 处理别名 @ 代表 src
transformIgnorePatterns： 不进行匹配的目录
testMatch: 匹配那些文件进行测试
reporters: 报告配置
在项目中添加 babel.config.js
```
module.exports = {
env: {
test: {
presets: [[
'@babel/env',
{
modules: 'auto', // 现在不能通过webpack来解析s6 module，需要使用babel来解析，所以要开启
targets: {
node: 'current' // 指定环境为当前node版本，减少解析不识别语法的范围
}
}
]],
plugins: [[
'@babel/plugin-transform-runtime', {
corejs: 2,
useESModules: false // 不允许使用es modules，babel需要通过@babel/plugin-transform-modules-commonjs将es module转换为commonjs模块解析
}
]]
}
}
}
```
小小测试
这是一个很简单的单元测试，测试一个message组件,新增一个message.spec.js的文件
- 代码块：
import {mount} from '@vue/test-utils';
const MessageComponent = {
template: '<p>{{msg}}</p>',
props: ['msg']
}
test('display message', () => {
const wrapper = mount(MessageComponent, {
props: {
msg: 'Hello world'
}
})
expect(wrapper.text()).toContain('Hello world')
})
-
运行方式
1. 终端输入 jest 直接运行
2. 在 package.json 配置命令
{ "script": { "test": "jest" } }
jest 常用语法留存(方便查阅，具体得看官方文档)
1\. mount() render component
2\. dom用法：
1\. get/find, 查找一个函数，跟document.queryselector 类似
2\. trigger： 触发一个事件
3\. setValue: set一个值 在使用此函数请使用async函数
4\. findAll: 找到所有的 类似 document.queryselectorAll
5\. exists() 检查 v-if
6\. isVisible 检查 v-show
7\. setProps 在挂载之后设置props的值 在使用此函数请使用async函数
8\. attributes() 所有的属性
9\. getComponent() 得到子组件
10\. forceUpdate() 更新
3\. assert 断言
11\. toHaveLenth: 得到lenth
12\. toContain: 渲染出的内容
13\. toHaveProperty 判断是否有这个用法
14\. toEqual 等于
15\. toBe
16\. not() 非
17\. flushPromises() dom updates
4\. emitted 得到所有的emit触发事件
遇到的问题（会持续更新）
1\. svg
解决答案：使用插件 jest-svg-transformer, 并在jest.config.js添加
2\. toBe 与 toEqual 的区别
解决答案： toBe 常用于非引用类型（基础类型）的值对比， toEqual 可以用于引用类型的深度对比 ，正则属于引用类型同使用 toEqual
3\. get 与 find 的区别 （findComponent与getComponent的区别同下）
解决答案：get 可以抛出错误，find不会抛出错误 具体可查看官方文档 https://next.vue-test-utils.vuejs.org/api/#get
4\. 如何重新设置 reactive 里面的值
解决答案： 如果使用的是data的方式渲染可使用setData的方式来更改， 如果是使用ref 或者 reactive的方式来写，可使用 wrapper.vm.yoursParams 的方式来设置
总结
单元测试可以弥补无法测试wx支付的功能，以及检查重塑代码，检查代码可见bug，例如弹窗不展示等等。下一节我会具体列举出一个比较复杂的微信测试的demo
