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

<template>
 <div>
 <h2>{{ item.title }}</h2>
 <button @click="addToCart">Add To Cart</button>
 <img :src="/UploadFiles/2021-04-02/item.image">

配置 Spec 文件
下面是测试用的 spec 文件。其中，我们将用 Vue Test Utils “浅挂载”示例组件，因此引入了相关模块以及我们要测试的 Item 组件。
同时还写了一个工厂函数用于生成可覆盖的配置对象，以免在每个测试中都需要指定 props 和 mock 三个依赖项。 item.spec.js


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

function createConfig (overrides) {
 const id = 1;
 const mocks = {
 // Vue Auth
 $auth: {
  check: () => false
 },
 // Vue Router
 $router: {
  push: () => {}
 },
 // Vuex
 $store: {
  state: [ { id } ],
  commit: () => {}
 }
 };
 const propsData = { id };
 return Object.assign({ mocks, propsData }, overrides);
}

describe("Item.vue", () => {
 // Tests go here
});


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

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

确定输入和输出
当你对组件做单元测试时，可将其视为一个黑盒。方法、计算属性等内部逻辑只影响输出。
因此，下一个重点是确定组件的输入和输出，因为这些也是测试的输入和输出。
Item.vue 的输入是：

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

输出是：

  
渲染后的 HTML
  
发送到 Vuex mutation 或者 Vue Router push 的数据

有些组件也会将表单和事件作为输入，触发事件作为输出。
测试 1: 访客点击按钮跳转路由
有一个业务逻辑是“如果用户是访客，点击 Add to Cart 按钮将重定向到登录页”。我们来写这个测试。
我们通过“shallow mount”组件来编写测试，然后找到并点击 Add to Cart 按钮。


test("router called when guest clicks button", () => {
 const config = createConfig();
 const wrapper = shallowMount(Item, config);
 wrapper
 .find("button")
 .trigger("click");
 // Assertion goes here
}


随后我们会加上 assertion。
不要超出输入和输出的界限
在这个测试中很容易采取的做法是在点击按钮后判断路由是否跳转到了登录页，比如：


import router from "router";

test("router called when guest clicks button", () => {
 ...
 // 错！
 const route = router.find(route => route.name === "login");
 expect(wrapper.vm.$route.path).toBe(route.path);
}


虽然这确实也能测试组件的输出，但是它依赖于路由功能，这不应该是组件所关心的。
直接测试组件的输出会更好，也就是调用了 $router.push 。至于路由是否最终完成了操作，这已经超出了本测试的范畴。
因此我们可以监听路由的 push 方法，并断言它是否被登录路由对象调用。


import router from "router";

test("router called when guest clicks button", () => {
 ...
 jest.spyOn(config.mocks.$router, "push");
 const route = router.find(route => route.name === "login");
 expect(spy).toHaveBeenCalledWith(route);
}


测试 2: 登录用户点击按钮后调用 vuex
接下来让我们测试业务逻辑“如果用户已登录，点击 Add to Cart 按钮将触发 Vuex mutation ADD_TO_CART ”。
同样，你不需要判断 Vuex 状态是否更改了。要验证这个需要另外单独测试 Vuex store。
组件的职责只是执行 commit，因此我们只要测试这个动作就行。
首先重写 $auth.check 假数据让它返回  true （模拟登录用户）。然后监听 store 的  commit 方法，并断言点击按钮后被调用。


test("vuex called when auth user clicks button", () => {
 const config = createConfig({
 mocks: {
  $auth: {
  check: () => true
  }
 }
 });
 const spy = jest.spyOn(config.mocks.$store, "commit");
 const wrapper = shallowMount(Item, config);
 wrapper
 .find("button")
 .trigger("click");
 expect(spy).toHaveBeenCalled();
}


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


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


这又是一个不必要的测试，因为它只是测试了 Vue 从 Vuex 中提取数据并插入到模板的能力。Vue 这个库已经对该机制进行了测试，所以你应该依赖于它。
测试 3: 正确地渲染
但是等等，如果有人不小心将 title 重命名为 name ，然后忘记更新插值表达式怎么办？这难道不需要测试吗"htmlcode">

test("renders correctly", () => {
 const wrapper = shallowMount(Item, createConfig());
 expect(wrapper).toMatchSnapshot();
});


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

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

诸如此类。
总结


我认为上面三个简单的测试对这个组件来说足够了。

组件单元测试的一个好理念是先假设测试是不必要的，除非被证明是必要的。


你可以问自己以下问题：

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

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