浅谈Vue组件单元测试究竟测试什么

2023-08-02 03:10:06 147

关于Vue组件单元测试最常见的问题就是“我究竟应该测试什么？”

虽然测试过多或过少都是可能的，但我的观察是，开发人员通常会测试过头。毕竟，没有人愿意自己的组件未经测试从而导致应用程序在生产中崩溃。

在本文中，我将分享一些用于组件单元测试的指导原则，这些指导原则可以确保在编写测试上不会花费大量时间，但是可以提供足够的覆盖率来避免错误。

本文假设你已经了解Jest和VueTestUtils。

示例组件

在学习这些指导原则之前，我们先来熟悉下要测试的示例组件。组件名为Item.vue，是eCommerceApp里的一个产品条目。

下面是组件的源码。注意有三个依赖项：Vuex($store)，VueRouter($router)和VueAuth($auth)。

Item.vue

配置Spec文件

下面是测试用的spec文件。其中，我们将用VueTestUtils“浅挂载”示例组件，因此引入了相关模块以及我们要测试的Item组件。

同时还写了一个工厂函数用于生成可覆盖的配置对象，以免在每个测试中都需要指定props和mock三个依赖项。item.spec.js

import{shallowMount}from"@vue/test-utils";
importItemfrom"@/components/Item";

functioncreateConfig(overrides){
constid=1;
constmocks={
//VueAuth
$auth:{
check:()=>false
},
//VueRouter
$router:{
push:()=>{}
},
//Vuex
$store:{
state:[{id}],
commit:()=>{}
}
};
constpropsData={id};
returnObject.assign({mocks,propsData},overrides);
}

describe("Item.vue",()=>{
//Testsgohere
});

确定业务逻辑

对于要测试的组件，要问的第一个也是最重要的问题是“业务逻辑是什么”，即组件是做什么的？

对于这个Item.vue，业务逻辑是：

根据接收的id属性展示条目信息
如果用户是访客，点击AddtoCart按钮将重定向到登录页
如果用户已登录，点击AddtoCart按钮会触发VuexmutationADD_TO_CART。

确定输入和输出

当你对组件做单元测试时，可将其视为一个黑盒。方法、计算属性等内部逻辑只影响输出。

因此，下一个重点是确定组件的输入和输出，因为这些也是测试的输入和输出。

Item.vue的输入是：

id属性
来自Vuex和VueAuth的数据状态
用户点击按钮

输出是：

渲染后的HTML
发送到Vuexmutation或者VueRouterpush的数据

有些组件也会将表单和事件作为输入，触发事件作为输出。

测试1:访客点击按钮跳转路由

有一个业务逻辑是“如果用户是访客，点击AddtoCart按钮将重定向到登录页”。我们来写这个测试。

我们通过“shallowmount”组件来编写测试，然后找到并点击AddtoCart按钮。

test("routercalledwhenguestclicksbutton",()=>{
constconfig=createConfig();
constwrapper=shallowMount(Item,config);
wrapper
.find("button")
.trigger("click");
//Assertiongoeshere
}

随后我们会加上assertion。

不要超出输入和输出的界限

在这个测试中很容易采取的做法是在点击按钮后判断路由是否跳转到了登录页，比如：

importrouterfrom"router";

test("routercalledwhenguestclicksbutton",()=>{
...
//错！
constroute=router.find(route=>route.name==="login");
expect(wrapper.vm.$route.path).toBe(route.path);
}

虽然这确实也能测试组件的输出，但是它依赖于路由功能，这不应该是组件所关心的。

直接测试组件的输出会更好，也就是调用了$router.push。至于路由是否最终完成了操作，这已经超出了本测试的范畴。

因此我们可以监听路由的push方法，并断言它是否被登录路由对象调用。

importrouterfrom"router";

test("routercalledwhenguestclicksbutton",()=>{
...
jest.spyOn(config.mocks.$router,"push");
constroute=router.find(route=>route.name==="login");
expect(spy).toHaveBeenCalledWith(route);
}

测试2:登录用户点击按钮后调用vuex

接下来让我们测试业务逻辑“如果用户已登录，点击AddtoCart按钮将触发VuexmutationADD_TO_CART”。

同样，你不需要判断Vuex状态是否更改了。要验证这个需要另外单独测试Vuexstore。

组件的职责只是执行commit，因此我们只要测试这个动作就行。

首先重写$auth.check假数据让它返回 true（模拟登录用户）。然后监听store的 commit方法，并断言点击按钮后被调用。

test("vuexcalledwhenauthuserclicksbutton",()=>{
constconfig=createConfig({
mocks:{
$auth:{
check:()=>true
}
}
});
constspy=jest.spyOn(config.mocks.$store,"commit");
constwrapper=shallowMount(Item,config);
wrapper
.find("button")
.trigger("click");
expect(spy).toHaveBeenCalled();
}

不要测试其他库的功能

Item组件展示条目数据，特别是标题和图片。或许我们应该写一个测试来专门检查这些？比如：

test("renderscorrectly",()=>{
constwrapper=shallowMount(Item,createConfig());
//Wrong
expect(wrapper.find("h2").text()).toBe(item.title);
}

这又是一个不必要的测试，因为它只是测试了Vue从Vuex中提取数据并插入到模板的能力。Vue这个库已经对该机制进行了测试，所以你应该依赖于它。

测试3:正确地渲染

但是等等，如果有人不小心将title重命名为name，然后忘记更新插值表达式怎么办？这难道不需要测试吗?

没错，但是如果你像这样来测试模板的方方面面，何时才是个头？

测试HTML最好的办法是使用快照，用来检查整体渲染后的结果。这不仅覆盖了标题插值，还包括图片、按钮文本、任何class等。

test("renderscorrectly",()=>{
constwrapper=shallowMount(Item,createConfig());
expect(wrapper).toMatchSnapshot();
});

其他不需要测试的点还有这些：

src属性是否绑定到img元素
添加到Vuexstore中的数据是否跟插入的数据一致
计算属性是否返回了正确的数据
执行routerpush是否重定向到正确的页面

诸如此类。

总结

我认为上面三个简单的测试对这个组件来说足够了。
组件单元测试的一个好理念是先假设测试是不必要的，除非被证明是必要的。

你可以问自己以下问题：

这是业务逻辑的一部分吗？
这是直接测试组件的输入和输出吗？
这是测试自己的代码，还是第三方代码？

让我们愉快地单元测试吧！希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

浅谈Vue组件单元测试究竟测试什么

{{item.title}}

随机推荐

浅谈Vue组件单元测试究竟测试什么

{{item.title}}

热门推荐

随机推荐