Vue-Test-Utils + Jest 单元测试入门与实践
创建Vue项目
在终端用vue-cli创建一个项目
$vue create vue-test
选择Manually select features进行手动选择功能配置：
vue-test 1.png
勾选 Babel、TypeScript、Router、Unit Testing：
vue-test 2.png
选择Jest:
vue-test 3.png
选择In dedicated config files将各配置信息配置在对应的 config文件里：
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json
输入n，不保存预设：
? Save this as a preset for future projects? (y/N) n
创建成功
vue-test 4.png
查看部分配置文件
jest.config.js
默认如下:
module.exports = {
preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
};
我们可以按实际需求添加其它配置项：
module.exports = {
preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
testMatch: ["**/tests/unit/**/*.spec.[jt]s?(x)"],
transformIgnorePatterns: ["<rootDir>/node_modules/"],
moduleFileExtensions: [
'js',
'vue'
],
transform: {
'^.+\\.vue$': '<rootDir>/node_modules/vue-jest',
'^.+\\.js$': '<rootDir>/node_modules/babel-jest'
},
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
]
};
-
testMatch匹配哪些文件进行测试 -
transformIgnorePatterns不进行匹配的目录 -
moduleFileExtensions告诉Jest需要匹配的文件后缀 -
transform匹配到.vue文件的时候用vue-jest处理， 匹配到.js文件的时候用 babel-jest 处理 -
moduleNameMapper处理webpack的别名，比如：将@表示/src目录 -
snapshotSerializers将保存的快照测试结果进行序列化，使得其更美观
测试用例
vs code打开项目你会发现根目录下有一目录test/unit，里面就有一个已经生成的测试用例。
vue-test 5.png
新建终端：运行单元测试。这里会根据jest.config.js的testMatch配置的条件进行运行。当前匹配的是所有tests/unit下的测试文件
$yarn test:unit
vue test 6.png
指定运行某个测试文件
新建一个couter.vue文件简单的界面，点击按钮数目加1。在tests/unit目录下新建一个测试文件couter.spec.ts
//couter.vue
<template>
<div>
<span class="count">{{ count }}</span>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
</script>
//couter.spec.ts
import { mount } from "@vue/test-utils";
import Couter from "@/views/Couter.vue";
describe("Couter.vue", () => {
const wrapper = mount(Couter);
it("测试累加", () => {
wrapper.setData({ count: 13 });
const button = wrapper.find("button");
button.trigger("click");
expect((wrapper.vm as any).count).toBe(14);
});
});
所有目前tests/unit目录下有两个测试文件，如果还用yarn test:unit命令的话就会跑所有测试文件。那么我们怎么指定运行一个文件呢，看下面命令：
$yarn jest -- **/tests/unit/**/couter.spec.ts
vue test 7.png
测试用例一些API介绍
- shallowMount 将会创建一个包含被挂载和渲染的 Vue 组件的 Wrapper，只存根当前组件，不包含子组件。
- describe(name, fn) 这边是定义一个测试套件，test ToDoList 是测试套件的名字，fn 是具体的可执行的函数
- it(name, fn) 是一个测试用例，输入框初始值为空字符串 是测试用例的名字，fn 是具体的可执行函数；一个测试套件里可以保护多个测试用例。
- expect 是 Jest 内置的断言风格，业界还存在别的断言风格比如 Should、Assert 等。
- toBe 是 Jest 提供的断言方法， 更多的可以到Jest Expect 查看具体用法。
- setValue 可以设置一个文本控件的值并更新 v-model 绑定的数据。
- .to-do-text 是一个 CSS 选择器；Vue-Test-Utils 提供了 find 方法来通过查找选择器，来返回一个 Wrapper；选择器可以是 CSS 选择器、可以是 Vue 组件也可以是一个对象，这个对象包含了组件的 name 或 ref 属性，比如可以这样用：wrapper.find({ name: 'my-button' })
- wrapper.vm 是一个 Vue 实例，只有 Vue 组件的包裹器才有 vm 这个属性；通过 wrapper.vm 可以访问所有 Vue 实例的属性和方法。比如：wrapper.vm.
nextTick()。
- trigger 方法可以用来触发一个 DOM 事件，这里触发的事件都是同步的，所以不必将断言放到 $nextTick() 里去执行；同时支持传入一个对象，当捕获到事件的时候，可以获取到传入对象的属性。可以这样写：wrapper.trigger('click', {name: "bubuzou.com"})
