[专案上线第01天] - 新来的主管说要写 Vue Test Utils 单元测试

前言

该系列是为了让看过Vue官方文件或学过Vue但是却不知道怎麽下手去重构现在有的网站而去规画的系列文章，在这边整理了许多我自己使用Vue重构很多网站的经验分享给读者们。

什麽？单元测试？当你开始接触开发专案有一段时间後，你会开始渐渐听到这个专业术语，就让我来大家了解一下什麽是单元测试

影片搭配文章看学习效果会更好喔

什麽是单元测试？

简单来说程序码的最小单位进行测试，确保程序逻辑不会在团队维护的过程中出错，维护程序码的品质。所谓的最小单位，我用个例子来举例，假如你今天有一个主功能是由 A跟Ｂ两个功能所组成的，而这两个功能就是我们所说的最小单位，所以在撰写测试的时候我们重点在针对A跟Ｂ来进行测试，主功能的测试中不会包含 A跟Ｂ的测试，这样的测试就是我们所说的单元测试。

为什麽需要单元测试？

我先列出几个优缺点，我们来比较一下

优点：

1. 确保团队跌代的时候不会影响原本的功能
2. 确保品质，准确对程序码切割最小单位，降低耦合度
3. 程序的 return 变成可预期
4. 重构程序码可以按照测试的规格走

缺点 :

1. 初期可能撰写单元测试所消耗的时间可能会大於实际开发时间
2. 如果迭代性高，很常写好的测试要重写，久了会浪费很多时间
3. 测试相关的配置繁琐，为了配合许多开发上的细节要处理的设定很多

从优缺点可以知道说，撰写单元测试的初期对於开发的效益并不高，先撇开不熟悉测试来说，光就在公司常常会因为需求改变就要来来回回改写程序，我就要再花许多时间来重写测试，怎麽想都对於有时辰压力的专案来说不是那麽划算，所以往往会在这个时候放弃写测试，就像我如果在初期会遇到不断修改的需求的时候，我也不会先写测试（笑

那什麽情况下该写单元测试？其实产品开发的中期的时候，基本上中期的时候大多数的平台规格都确定了差不多，就可以考虑开始补单元测试，因为会开始遇到前面做好的功能因为新的功能造成预期外的错误，以及专案由其他同事接手的时候改坏某个功能但是同事不知道，这些我们都可以透过测试来了解，避免把测试没通过的案子给推上线。

开始写 Vue 的单元测试前

开始写测试前我们要先了解一下我们是透过何种技术来撰写测试的

Jest

Jest 是由 Facebook 开发维护的一款 JavaScript 测试框架，可以用简洁的语法来测试你的 function 。

Vue Test Utils

Vue Test Utils 是 Vue 官方推出的组件单元测试框架，简化组件的测试。它提供了一些方法来以区分挂载组件之间交互。

我们会透过以上两种测试用的框架来针对我们 vue 的 component 进行测试，Vue Test Utils 负责解析我们的 component，让我们可以不透过 build 就可以模拟 DOM 被渲染出来的结果，再透过 Jest 撰写 test case 来验证是否符合预期。

安装 jest 与 Vue Test Utils （ Vue-cli ）

如果你是新建立一个专案，请你选择 Unit Testing -> Jest，这样专案预设就会有安装 jest 跟 Vue Test Utils

如果你在建立专案的时候没有选择 Unit Testing 的话你可以输入以下指令

vue add unit-jest

现有的 CLI 专案，也可以加入 jest 跟 Vue Test Utils

基本语法介绍 describe & it & test

先来带大家来看一下基本的语法

describe("Test to do list", () => {
  it("Test to do 1", () => {
    expect(1 + 1).toBe(2);
  });
  test("Test to do 2", () => {
   expect(2 + 1).toBe(3);
  });
});

• describe ： 类似群组的概念，用来将一个或是多个相关的测试包再一起。
• it ＆test ： 为测试的项目单位，it 为 test 的别名两个是一样的东西。
• expect ：你要测试的项目内容。
• toBe ： 断言，主要是来检查 expect 回传的内容是否符合你的预期，有很多种形式的断言。

以上的这些语法属於 jest 的语法 API

接下来看看如何使用 Vue Test Utils 负责解析我们的 Component

<!-- HelloWorld.vue -->
<template>
  <h1>new message</h1>
</template>

import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";
describe("HelloWorld.vue", () => {
  it("renders msg text", () => {
    const wrapper = shallowMount(HelloWorld);
    expect(wrapper.text()).toBe("new message");
  });
});

我们可以直接使用 shallowMount 这个方法来渲染我们的 Component，再透过 .text( ) 这个方法去取得 Component 里面所有的文字内容来做比对，是不是觉得很简单呢～

最後

好啦！关於单元测试的部分就到这边先告一段落，如果你还想知道更多有关於单元测试的使用以及使用情境，欢迎购买我的新课程 Vue 单元测试 vue-test-utils｜入门

课程网址：https://thecodingpro.com/courses/vue-test-utils

原价新台币 2200 元，目前还是维持预购价新台币 1800元，现在输入折扣码「 PAJNBFUNO300」马上再折300元优惠。

订阅Mike的频道享受精彩的教学与分享

Mike 的 Youtube 频道
Mike的medium
MIke 的官方 line 帐号，好友搜寻 @mike_cheng