Vue-Test-Utils 简介
提供特定的方法，在隔离的环境下，进行组件的挂载，以及一系列的测试
安装
这是一个基于 vue-cli 生成的项目，可以直接使用 vue add xxx 进行插件的安装。
vue add unit-jest插件运作的过程
- 安装的依赖
-
vue-test-utils -
vue-jest - 注入了新的命令
- vue-cli-service test:unit
-
tests/unit 目录下以.spec.(js|jsx|ts|tsx) 结尾的文件 -
__test__ 目录下的文件
- vue-jest 转换
- 将
vue SFC 格式的文件转化为对应的 Ts 文件 - 将
Ts 文件通过 presets/typescript-babel 转换成对应的 Js 文件
基础语法
开始测试
执行命令
npm run test:unit -- --watchAll控制台实时显示测试结果
语法内容
- 渲染组件
-
mount 和shallowMount - 传递属性
- 元素是否成功的显示
- 查找元素的不同写法
-
get，find -
findComponent，getComponent -
findAll，findAllComponents
测试所需组件
父组件
<template>
<div>
<h1>{{ msg }}</h1>
<button class="add-count"
@click="addCount">{{ count }}</button>
<hello-com msg="1234"></hello-com>
</div>
</template>
<script setup lang="ts">
import { defineProps, ref } from 'vue'
import HelloCom from './hello.vue'
defineProps({
msg: String
})
const count = ref(0)
const addCount = () => {
count.value++
}
</script>子组件
<template>
<h1>{{ msg }}</h1>
</template>
<script setup lang="ts">
import { defineProps } from 'vue'
const props = defineProps({
msg: String
})
</script>mount 和 shallowMount
使用 mount
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message';
const wrapper = mount(HelloWorld, {
props: { msg },
});
// 打印 html 结构
console.log(wrapper.html());
});
});
使用 shallowMount
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message';
const wrapper = shallowMount(HelloWorld, {
props: { msg },
});
// 打印 html 结构
console.log(wrapper.html());
});
});
可以看到 mount 和 shallowMount 的区别就是 mount 会打印出完整的 html 结构，而 shallowMount
将子组件以标签的形式打印。
得到的结论是
-
mount 一股脑全部渲染 -
shallowMount 只渲染组件本身，子组件不渲染 -
shallowMount 将其他组件隔离，更适合单元测试
find 和 get
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message';
const wrapper = shallowMount(HelloWorld, {
props: { msg },
});
// 使用 get
console.log(wrapper.get('h1').text());
// 使用 find
console.log(wrapper.find('h1').text());
});
});当元素存在的时候，find 和 get 是一样的。
当元素不存在的时候，get 会报错，并导致单元测试失败。
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message';
const wrapper = shallowMount(HelloWorld, {
props: { msg },
});
// 使用 get
console.log(wrapper.get('h2'));
});
});
当元素不存在的时候，find 不会报错，并不会导致单元测试失败。
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message';
const wrapper = shallowMount(HelloWorld, {
props: { msg },
});
// 使用 find
console.log(wrapper.find('h2'));
});
});
得到的结论是
- 找不到元素的时候，
find 会返回 null 不会报错，case 通过，get 会报错，case 失败。 - 总是使用
get ，除非想要判断一些元素不存在的时候，使用 find 。
findComponent 和 getComponent
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message';
const wrapper = shallowMount(HelloWorld, {
props: { msg },
});
// 使用 findComponent
console.log(wrapper.findComponent(HelloCom));
// 使用 getComponent
console.log(wrapper.getComponent(HelloCom));
});
});当组件存在时，findComponent 和 getComponent 的结果是一样的。
当组件不存在时，findComponent 不会报错。
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message';
const wrapper = shallowMount(HelloWorld, {
props: { msg },
});
console.log(wrapper.findComponent({ name: 'foo' }));
});
});
当组件不存在时，getComponent 会报错。
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message';
const wrapper = shallowMount(HelloWorld, {
props: { msg },
});
console.log(wrapper.getComponent({ name: 'foo' }));
});
});
得到的结论是
- 找不到组件的时候，
findComponent 会返回null 不会报错，case 通过，getComponent 会报错，case 失败。 - 总是使用
getComponent ，除非想要判断一些元素不存在的时候，使用findComponent 。 - 只需要判断是否渲染了子组件，传递了正确的属性，不必测试子组件中的内容，这就是单元测试的意义，独立，互不影响。
findAll 和 findAllComponents
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message';
const wrapper = shallowMount(HelloWorld, {
props: { msg },
});
console.log(wrapper.findAll('h1'));
});
});findAll 返回元素的 DOMWrapper 数组，如果没有，返回空数组。
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message';
const wrapper = shallowMount(HelloWorld, {
props: { msg },
});
console.log(wrapper.findAllComponents(HelloCom));
});
});findAllComponents 返回组件 vueWrapper 的数组，如果没有，返回空数组。
