【架构师（第二十八篇）】 测试工具 Vue-Test-Utils 基础语法
Vue-Test-Utils 简介
提供特定的方法，在隔离的环境下，进行组件的挂载，以及一系列的测试
安装
这是一个基于 vue-cli 生成的项目，可以直接使用 vue add xxx 进行插件的安装。
vue add unit-jest插件运作的过程
- 安装的依赖
vue-test-utilsvue-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，findfindComponent，getComponentfindAll，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 的数组，如果没有，返回空数组。
举报
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号