由于最近公司没有什么新的项目，最近vue3发布了Beta版，https://v3.vuejs.org/guide/introduction.html自己也是打算学习一下。不说冲大厂吧，学习新东西还是挺有趣的。
文末有彩蛋
闲话少说，进入我们今天主题vue的单元测试！
说到vue的单元测试，我们在用vue-cli创建项目的时候，可以选择test选项，而test就是vue-cli询问我们需要单元测试吗，如此贴心，爱了爱了！
首先说一下，我们使用jest测试的几个命令小技巧
npm run test:unit button.spec.ts //命令后面跟文件名，表示单独执行这个测试文件
常用的方法
- .classes() 拿到wrapper所包含的类名,返回一个Array<string>,如果传入一个类名（不包含.）的时候，则返回一个boolearn。
- .find()传入一个类名，返回一个DOMWrapper
- .exists()如果在空的wrapper或wrapperArray上调用，则返回false，反之则返回true。
- .toBe()比如传入的是true，那么调用toBe()wrapper必须返回true，否则会报错
- .toContain() 是否包含
- .findComponent() 传入组件的name，得到一个VueWrapper
- .text()返回wrapper的内容
- emitted() //测试自定义事件的api，具体用法看下图
- toBeFalsy() //当您不关心一个值是什么，只希望确保一个值在布尔上下文中为假时使用。在JavaScript中，有6个假值:false、0、"、null、undefined和NaN。其他一切都是真实的。
- toBeTruthy()当您不关心一个值是什么，只希望确保一个值在布尔上下文中为真时使用。在JavaScript中，有6个假值:false、0、"、null、undefined和NaN。其他一切都是真实的。
- isVisible()判断元素是否可见当你有 display: none, visibility: hidden, opacity :0 或者是具有hidden属性的元素都会返回false
话不多说，进入正题
我们测试的是element源码中的一个Button组件，这个组件是我从github上element源码上拷贝过来的，作为我们此次单元测试的组件
element Button.vue 源码
<template>
<button
class="el-button"
@click="handleClick"
:disabled="buttonDisabled || loading"
:autofocus="autofocus"
:type="nativeType"
:class="[
type ? 'el-button--' + type : '',
buttonSize ? 'el-button--' + buttonSize : '',
{
'is-disabled': buttonDisabled,
'is-loading': loading,
'is-plain': plain,
'is-round': round,
'is-circle': circle,
},
]"
>
<i class="el-icon-loading" v-if="loading"></i>
<i :class="icon" v-if="icon && !loading"></i>
<span v-if="$slots.default"><slot></slot></span>
</button>
</template>
<script>
export default {
name: 'ElButton',
inject: {
elForm: {
default: '',
},
elFormItem: {
default: '',
},
},
props: {
type: {
type: String,
default: 'default',
},
size: String,
icon: {
type: String,
default: '',
},
nativeType: {
type: String,
default: 'button',
},
loading: Boolean,
disabled: Boolean,
plain: Boolean,
autofocus: Boolean,
round: Boolean,
circle: Boolean,
},
computed: {
_elFormItemSize() {
return (this.elFormItem || {}).elFormItemSize;
},
buttonSize() {
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
},
buttonDisabled() {
return this.disabled || (this.elForm || {}).disabled;
},
},
methods: {
handleClick(evt) {
this.$emit('click', evt);
},
},
};
</script>
测试loading属性
loading为true，类名为“.el-icon-loading”的这个i元素会被渲染
loading为true，组件会具备“is-loading”这个类名
下面我们看一下怎样实现这个测试？
- .classes() 拿到wrapper所包含的类名,返回一个Array<string>,如果传入一个类名（不包含.）的时候，则返回一个boolearn。
- .find()传入一个类名，返回一个DOMWrapper
- .exists()如果在空的wrapper或wrapperArray上调用，则返回false，反之则返回true。
- .toBe()比如传入的是true，那么调用toBe()wrapper必须返回true，否则会报错
import Button from "@/components/element/button.vue";
import { mount } from "@vue/test-utils";
it("loading", () => {
const wrapper = mount(Button, {
props: {
loading:true
}
})
expect(wrapper.classes("is-loading")).toBe(true);//检查wrapper是否包含这个属性“is-loading”
expect(wrapper.find('.el-icon-loading').exists()).toBe(true);//检查类名为“.el-icon-loading”的元素是否为渲染成功
})
测试slot
当我们调用这个组件，并且设置slot内容的时候，wrapper的text()是否包含我们设置的slot内容
下面我们看一下怎样实现这个测试？
- .toContain() 是否包含
- .findComponent() 传入组件的name，得到一个VueWrapper
- .text()返回wrapper的内容
it('content', () => {
const camp = {
template: '<div><Button>默认按钮</Button></div>'
}
const wraper = mount({
template: '<div><Button>默认按钮</Button></div>'
}, {
global: {
components: { Button }
}
});
expect(wraper.findComponent({ name: 'ElButton' }).text()).toContain('默认按钮');//检查文本里面是否包含“默认按钮”这四个字。
})
测试emit事件
- emitted() //测试自定义事件的api，具体用法看下图
- toBeFalsy() //当您不关心一个值是什么，只希望确保一个值在布尔上下文中为假时使用。在JavaScript中，有6个假值:false、0、"、null、undefined和NaN。其他一切都是真实的。
- toBeTruthy()当您不关心一个值是什么，只希望确保一个值在布尔上下文中为真时使用。在JavaScript中，有6个假值:false、0、"、null、undefined和NaN。其他一切都是真实的。
it("设置loading为true的时候，要阻止事件发射", () => {
const wrapper = mount(Button, {
props:
{
loading:true
}
});
wrapper.trigger("click");
expect(wrapper.emitted().click).toBeFalsy();
})
// 设置elForm.disabled为true的时候阻止事件发射
it("设置elForm.disabled为true的时候也要阻止事件发射", () => {
const wrapper = mount(Button, {
global: {
provide: {
elForm: {
disabled:true
}
}
}
})
wrapper.trigger("click")
expect(wrapper.emitted().click).toBeFalsy()
})
// 正常点击的时候可以触发事件
it("初始点击按钮的时候，可以触发emit事件", () => {
const wrapper = mount(Button)
wrapper.trigger("click")
expect(wrapper.emitted().click).toBeTruthy()
})
测试size属性
上面我们测试了loading、slot、emit,这三个都是由代表性的，剩下就是普通的size、round这种影响组件样式的props,我们来随便写几个，全部的代码我会放在码云上面，大家有兴趣的话，可以自己拉下来看一下。
// 设置size，控制按钮的大小
it('设置size属性之后，按钮是具有对应的类名', () => {
const wrapper = mount(Button, {
props: {
size:"large"
}
})
expect(wrapper.classes("el-button--large")).toBe(true);
})
文末彩蛋：
看完了单元测试，是不是特别期待vue3的新功能呢，在下一篇文章，会给大家把这个button.vue使用vue3的手法重构，是不是特别期待呢，重构的时候，我也是遇到了好多坑，很多报错，到时候会把每个错误都详细记录一遍，我的文采和文字排版内容这俩方面不是特别擅长，但是我会尽力去给大家描述，大家就先凑活的看看，如果有描述不清楚的，私信我，我看到了都会回复的，谢谢大家！
克隆地址
https://gitee.com/DayLoveNight/vue3-test.git
下一篇文章，会使用vue3的语法重构button组件，和单元测试紧密相连，这里附上文章地址：https://www.jianshu.com/p/428c1257d8f8
