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

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

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

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

本文假设你已经了解 Jest 和 Vue Test Utils。

示例组件

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

下面是组件的源码。注意有三个依赖项：Vuex (

$store

$router

$auth

Item.vue

<template>
 <div>
 <h2>{{ item.title }}</h2>
 <button @click="addToCart">Add To Cart</button>
 <img :src="item.image"/>
 </div>
</template>
<script>
export default {
 name: "Item",
 props: [ "id" ],
 computed: {
 item () {
  return this.$store.state.find(
  item => item.id === this.id
  );
 }
 },
 methods: {
 addToCart () {
  if (this.$auth.check()) {
  this.$store.commit("ADD_TO_CART", this.id);
  } else {
  this.$router.push({ name: "login" });
  }
 }
 }
};
</script>

配置 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
});

确定业务逻辑

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