Vue3单元测试（给element的button组件写一个单元测试）

由于最近公司没有什么新的项目，最近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,如果传入一个类名（不包含.）的时候，则返回一个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 源码

测试loading属性

loading为true，类名为“.el-icon-loading”的这个i元素会被渲染
loading为true，组件会具备“is-loading”这个类名

下面我们看一下怎样实现这个测试？

.classes() 拿到wrapper所包含的类名,返回一个Array,如果传入一个类名（不包含.）的时候，则返回一个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: ''
    }
    const wraper = mount({
        template: ''
    }, {
        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