前端單元測試｜林鼎淵 Dean Lin

透過實際案例了解在 Vuetify（Vite & TypeScript）中如何運用 @vue/test-utils

林鼎淵 — Thu, 19 Jan 2023 13:58:02 +0800

上一篇文章中，我們成功在 Vuetify（Vite & TypeScript）中導入單元測試 Unit Testing。

今天這篇文章，筆者會用一個簡易的「登入頁面」，來介紹 @vue/test-utils 這款套件的常用功能：

用 get 找出元素（element）
用 getComponent 找出元件（component）
用 setValue 模擬使用者對元件（component）輸入值
透過 wrapper.vm 取得 data 資訊
取得元素（element）的 attributes 屬性
模擬使用者點擊輸入框（focus）輸入文字，然後離開（blur）的動作
當操作錯誤時，能捕捉預期的 error message
確認使用者操作系統時，元件的 attributes 如預期改變（ex： disabled、type）
當元素採用 v-show 策略時，用 isVisible 進行判斷
模擬使用者 trigger button 事件
使用 Vue Router 時，頁面是否如預期跳轉

大綱

ㄧ、從測試的角度來設計頁面規格
二、撰寫登入頁程式
三、從測試案例了解 @vue/test-utils 常用的功能
  ▶︎ 測試檔案初始設定
  ▶︎ 用 get 找出元素（element），並確認是有顯示在畫面上的（isVisible）
  ▶︎ 透過 getComponent 取出元件，並指定「input」來 setValue
  ▶︎ 在輸入框輸入後，用 wrapper.vm.xxx 確定 data 的有成功寫入
  ▶︎ 取得元素的 attributes，確認設定符合預期
  ▶︎ 模擬使用者點擊輸入框（focus）輸入文字，然後離開（blur）的動作
  ▶︎ 使用者操作系統時，元件的 attributes 如預期改變
  ▶︎ 模擬使用者 trigger button 事件，觀察頁面是否如預期跳轉（Vue Router）

讀者可以直接到筆者的 Github，將專案 Clone 下來跑跑看，會更好理解裏面的邏輯（順手按個 ⭐ 更好 🤩）。

ㄧ、從測試的角度來設計頁面規格

在第一篇文章有談到 TDD（Test-Driven Development），測試驅動開發。

假使我們要設計一個登入頁，可以訂製如下規格：

基礎元件功能

確認 email、password、LoginBtn 元素存在
確認 Email 輸入框可以填資料
確認 Password 輸入框可以填資料
Email、Password 輸入後，data 對應的 formData 有存入相應的值
預設 Password 輸入框的 type 為 password，不直接顯示

測試錯誤的 Email、Password 情境

當 Email 沒有填寫時，跳出 Required 的錯誤訊息
當 Email 格式錯誤時，跳出相關錯誤訊息
當 Password 沒有填寫時，跳出 Required 的錯誤訊息
當 Password 字數不滿 8 位時，跳出相關錯誤訊息

會讓元件屬性改變的行為

當 Email、Password 未填寫時，登入按鈕為 Disabled
當 Email、Password 格式錯誤時，登入按鈕為 Disabled
當 Email、Password 格式正確時，登入按鈕可點擊
點擊顯示 Password 的 icon 時，type 會轉換成 text

登入功能

輸入錯誤的帳號密碼，會彈出警視窗
確認 Router 可以順利導向

上面訂的規格，就是我們後續要測試的情境。

二、撰寫登入頁程式

在 views 資料夾下新增「Login.vue」來做登入頁，幾個重點說一下：

使用 dataset（ex：data-test=”xxx”）來做標記，因為 id 或 class 通常都是因為其他用途而存在的，要是 coding 中不小心動到 id 或是 class 會造成測試不通過
在 v-text-field 有設計「rules」來做校驗
「valid」影響輸入按鈕是否能按，「pwshow」是密碼是否顯示，「loginFail」決定登入失敗的錯誤訊息是否顯示

<template>
  <div class="d-flex align-center flex-column">
    <v-card width="400">
      <v-container>
        <v-form v-model="valid" lazy-validation>
          <v-alert
            v-show="loginFail"
            type="error"
            class="mb-4"
            data-test="loginAlert"
          >
            You are entering an incorrect email and/or password.
          v-alert>
          <v-text-field
            v-model="formData.email"
            :rules="emailRules"
            label="Email"
            required
            data-test="email"
          >v-text-field>
          <v-text-field
            v-model="formData.password"
            :append-icon="pwShow ? 'mdi-eye' : 'mdi-eye-off'"
            :rules="[rules.required, rules.min]"
            :type="pwShow ? 'text' : 'password'"
            name="input-10-1"
            label="Password"
            hint="At least 8 characters"
            counter
            @click:append="pwShow = !pwShow"
            data-test="password"
          >v-text-field>
          <v-spacer>v-spacer>
          <v-btn
            x-large
            block
            :disabled="!valid"
            color="success"
            @click="login"
            data-test="loginBtn"
          >
            Login
          v-btn>
        v-form>
      v-container>
    v-card>
  div>
template>
<script setup>
import { ref, reactive } from "vue";
import router from "@/router";
const valid = ref(true);
const pwShow = ref(false);
const loginFail = ref(false);
const formData = reactive({
  email: "",
  password: "",
});
const emailRules = [
  (v) => !!v || "Required",
  (v) => /.+@.+\..+/.test(v) || "E-mail must be valid",
];
const rules = {
  required: (value) => !!value || "Required",
  min: (v) => (v && v.length >= 8) || "Min 8 characters",
};
const login = () => {
  // 這邊只是為了方便理解，實際上應該要呼叫 api
  if (
    formData.email === "baoboa@mail.com" &&
    formData.password === "baobaocute"
  ) {
    router.push("/home");
  } else {
    loginFail.value = true;
  }
};
script>

完成後在終端機輸入 yarn dev，然後進入網址：http://localhost:3000

我這邊有調整「src/router/index.ts」，將 Login 的 path 設定為「/」，讀者可以參考 Github。

三、從測試案例了解 @vue/test-utils 常用的功能

這邊會取幾個測試案例來做解說，完成的範例請參考筆者的 Github（順手點個 Star 會讓筆者會開心一整天）。

測試檔案初始設定

我們在 views 資料夾下新增「test」資料夾，並新增「Login.spec.ts」的測試檔案：

透過 import 引入我們會使用到的方法
這邊透過 beforeEach 來初始化我們要測試 Login.vue

import { describe, it, expect, beforeEach, vi } from "vitest";
import { mount, VueWrapper } from "@vue/test-utils";
import Login from "../Login.vue";
import vuetify from "@/plugins/vuetify";
import router from "@/router";

let wrapper: VueWrapper<any>;
beforeEach(async () => {
  wrapper = mount(Login, {
    global: {
      plugins: [vuetify, router],
    },
  });
});

用 get 找出元素（element），並確認是有顯示在畫面上的（isVisible）

find 也可以達到一樣的效果，但沒找到時並不會回傳錯誤訊息。

it("確認 Email、Password、LoginBtn 元素存在", () => {
  expect(wrapper.get('[data-test="email"]').isVisible()).toBe(true);
  expect(wrapper.get('[data-test="password"]').isVisible()).toBe(true);
  expect(wrapper.get('[data-test="loginBtn"]').isVisible()).toBe(true);
});

透過 getComponent 取出元件，並指定「input」來 setValue

因為 Vuetify 的 v-text-field 是 div 層，所以需要再透過 get 往下找到 input 這個元素。

it("確認 Email 輸入框可以填資料", async () => {
  const emailInput = wrapper.getComponent('[data-test="email"]').get("input");
  await emailInput.setValue("test@mail.com");
  expect(emailInput.element.value).toBe("test@mail.com");
});

在輸入框輸入後，用 wrapper.vm.xxx 確定 data 的有成功寫入

it("Email、Password 輸入後，data 對應的 formData 有寫入相應的值", async () => {
  const formData = {
    email: "test@mail.com",
    password: "qazwsx1234",
  };
  const emailInput = wrapper.getComponent('[data-test="email"]').get("input");
  await emailInput.setValue(formData.email);
  const passwordInput = wrapper
    .getComponent('[data-test="password"]')
    .get("input");
  await passwordInput.setValue(formData.password);
  expect(wrapper.vm.formData).toEqual(formData);
});

取得元素的 attributes，確認設定符合預期

it("預設 Password 輸入框的 type 為 password，不直接顯示", async () => {
  const password = wrapper.getComponent('[data-test="password"]');
  expect(password.get("input").attributes().type).toBe("password");
});

模擬使用者點擊輸入框（focus）輸入文字，然後離開（blur）的動作；並確認操作錯誤時，能捕捉預期的 error message

it("當 Email 沒有填寫時，跳出 Required 的錯誤訊息", async () => {
  const email = wrapper.getComponent('[data-test="email"]');
  await email.trigger("focus");
  await email.get("input").setValue("123"); //先隨便塞值
  await email.get("input").setValue("");
  await email.trigger("blur");
  const emailErrorMsg = email.get(".v-messages__message");
  expect(emailErrorMsg.text()).toEqual("Required");
});

使用者操作系統時，元件的 attributes 如預期改變（ex：Email、Password 填寫正確，登入按鈕 Disabled 移除）

it("當 Email、Password 格式正確時，登入按鈕可點擊", async () => {
  const loginBtn = wrapper.get('[data-test="loginBtn"]');
  expect(loginBtn.attributes().disabled).toBeDefined();

  const formData = {
    email: "baoboa@mail.com",
    password: "baobaocute",
  };
  const email = wrapper.getComponent('[data-test="email"]');
  await email.trigger("focus");
  await email.get("input").setValue(formData.email);
  await email.trigger("blur");
  const password = wrapper.getComponent('[data-test="password"]');
  await password.trigger("focus");
  await password.get("input").setValue(formData.password);
  await password.trigger("blur");

  expect(loginBtn.attributes().disabled).toBeUndefined();
});

模擬使用者 trigger button 事件，觀察頁面是否如預期跳轉（Vue Router）

it("確認 Router 可以順利導向", async () => {
  const formData = {
    email: "baoboa@mail.com",
    password: "baobaocute",
  };
  const email = wrapper.getComponent('[data-test="email"]');
  await email.trigger("focus");
  await email.get("input").setValue(formData.email);
  await email.trigger("blur");
  const password = wrapper.getComponent('[data-test="password"]');
  await password.trigger("focus");
  await password.get("input").setValue(formData.password);
  await password.trigger("blur");
  // 使用真實的 Router 測試時，若想要捕捉 Push 的行為，須透過 vi.spyOn 來模擬 router.push
  const spyPush = vi.spyOn(router, "push");
  await wrapper.get('[data-test="loginBtn"]').trigger("click");
  expect(spyPush).toHaveBeenCalledTimes(1);
  expect(spyPush).toHaveBeenCalledWith("/home");
});

在文章的最後，筆者也放一下所有測試的結果圖（可透過套件 or 指令 yarn test 執行）：

今天的文章就分享到這邊，我們下次再見～

前端單元測試替前端專案導入測試：學習地圖、Jest 基礎與進階，再到 Vuetify（Vite & TypeScript）中的 @vue/test-utils。林鼎淵 Dean Lin

在 Vuetify（Vite & TypeScript）中導入單元測試 Unit Testing

林鼎淵 — Thu, 19 Jan 2023 13:58:00 +0800

如果你完全沒有接觸過單元測試，建議可以先閱讀這兩篇文章：「認識 Jest 測試框架，開始動手寫單元測試、Jest 框架進階應用（describe、Setup and Teardown、Mock function）」。

這篇文章會先帶大家建立 Vuetify 的初始環境（Vue3 & Vite & TypeScript），並導入「Vue Test Utils」這款測試工具。

大綱

ㄧ、初始化專案、安裝必要套件
二、編寫測試的 config 檔
三、撰寫第一隻測試程式
四、運行測試程式確認結果符合預期
五、VSCode 的 Vitest 外掛
六、一些建議

讀者可以直接到筆者的 Github ，將專案 Clone 下來跑跑看，會更好理解裏面的邏輯（順手按個 ⭐ 更好 🤩）。

ㄧ、初始化專案、安裝必要套件

筆者 node.js 的版本為 18.13.0，建議選擇較新的版本，否則安裝套件的過程會遇到一些問題。

這邊我們參考 Vuetify 官方文件的指令 yarn create vuetify 來建立專案。

建立過程中會問你很多問題，筆者的選擇如下：

Project name：自行決定（ex：vuetify-vite-ts-test）
Which preset would you like to install：Essentials (Vuetify, VueRouter, Pinia)
Use TypeScript：Yes
Would you like to install dependencies with yarn, npm, or pnpm?：Yarn

不過問題時常調整，大家參考就好。

建立好 Vuetify 專案後，我們來安裝測試輔助套件如下：

yarn add --dev @vue/test-utils @vitejs/plugin-vue vitest jsdom

完成以上步驟後，在終端機輸入指令 yarn dev，看看是否能順利啟動。

如果網頁能順利跑出來就恭喜你完成第一步嚕！

二、編寫測試的 config 檔

在專案根目錄下，新增 vitest.config.ts，這是專門為了單元測試寫的相關設定檔，你仔細看會發現它跟「vite.config.ts」設定很像。

import { defineConfig } from 'vitest/config';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';

import { fileURLToPath, URL } from 'node:url';

export default defineConfig({
  // Resolver
  resolve: {
    // https://vitejs.dev/config/#resolve-alias
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  // plugins
  plugins: [
    // Vue3
    vue(),
    // Vuetify Loader
    // https://github.com/vuetifyjs/vuetify-loader
    vuetify({
      autoImport: true,
      styles: { configFile: './src/styles/variables.scss' },
    }),
  ],
  test: {
    // https://vitest.dev/guide/#configuring-vitest
    globals: true,
    environment: 'jsdom',
    deps: {
      inline: ['vuetify'],
    },
  },
});

三、撰寫第一隻測試程式

我們就以入口頁「HelloWorld.vue」為範例跟大家說明。

調整「src/components/HelloWorld.vue」的程式

這裡我們新增 defineProps 以接收傳進來的「msg」，並在頁面上顯示。

<template>
  <v-container class="fill-height">
    <v-responsive class="d-flex align-center text-center fill-height">
      <v-img
        contain
        height="200"
        src="@/assets/logo.svg"
      />
      <h1 class="green">{{ msg }}h1>
    </v-responsive>
  </v-container>
template>

<script setup lang="ts">
defineProps<{
  msg: string;
}>();
script>

新增「src/components/test/HelloWorld.spec.ts」作為測試程式

在 components 資料夾下建立「__test__」的資料夾放置測試程式，我們透過它來確認 HelloWorld 頁面是否有收到 props 的 msg，並如預期被渲染。

import { describe, it, expect } from "vitest";
import { mount } from "@vue/test-utils";
import HelloWorld from "../HelloWorld.vue";
import vuetify from '@/plugins/vuetify';
describe("HelloWorld", () => {
  it("renders properly", () => {
    const wrapper = mount(HelloWorld, {
      global: {
        plugins: [vuetify],
      },
      props: {
        msg: "Hello Vitest"
      }
    });
    expect(wrapper.text()).toContain("Hello Vitest");
  });
});

四、運行測試程式確認結果符合預期

在 package.json 新增一條測試用的 script：“test:unit”: “vitest –environment jsdom –root src/"

{
  "name": "vuetify-vite-ts-test",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix --ignore-path .gitignore",
    "test:unit": "vitest --environment jsdom --root src/"
  },
  "dependencies": {...},
  "devDependencies": {...}
}

新增後在終端機輸入指令 yarn test:unit 就會開始執行測試，如果看到下面的畫面，就恭喜你成功導入單元測試嚕！

五、VSCode 的 Vitest 外掛

跟 Jest 一樣，VSCode 也有 Vite 的外掛喔！他叫做 Vitest。

安裝完成後，點擊 VSCode 左側的「Testing」icon，就可以測試嚕！

六、一些建議

VSCode 改使用 Volar 這個外掛

今天這個是以 Vue3 設計的專案，如果你過去 VSCode 使用的版本是 Vue2，那可能有些程式下方會有警告，那可能是 VSCode 過去在 Vue2 時選用 Vetur 這個外掛，現在 Vue3 要改成使用 Volar。

如果遇到了「Type ‘Plugin’ is not assignable to type ‘PluginOption’」這類的錯誤

通常是因為安裝了多個 Vite 的版本所導致的，建議先將根目錄下的「node_modules」以及「.lock」全部移除，然後再重新安裝套件。

筆者是在 nvm 切換 node.js 版本時遇到這個問題的。

那今天的文章就分享到這裡，下一篇文章會以實際案例跟大家分享 Vue Test Utils 的應用！

前端單元測試替前端專案導入測試：學習地圖、Jest 基礎與進階，再到 Vuetify（Vite & TypeScript）中的 @vue/test-utils。林鼎淵 Dean Lin

Jest 框架進階應用（describe、Setup and Teardown、Mock function）

林鼎淵 — Thu, 19 Jan 2023 10:55:58 +0800

如果你對 Jest 這個測試框架還一無所知，建議先看上一篇文章喔！

一個功能底下可能有很多函式，如果測試程式沒有適當的區分，那在遇到錯誤時會難以管理，因此我們要對它進行分組（describe）；當我們想測試特定情境時，可以在測試前增加資料（Setup）並於測試後移除（Teardown）；為了讓單元測試更存粹，可以透過模擬函式（Mock function）減少相依性。

大綱

一、測試分組（describe）
二、在測試前、後要執行的任務（Setup and Teardown）
三、用 Mock Function 減少測試時的相依性
四、VSCode 的 Jest 外掛

讀者可以直接到筆者的 Github ，將專案 Clone 下來跑跑看，會更好理解裏面的邏輯（順手按個 ⭐ 更好 🤩）。

一、測試分組（describe）

比如今天我們設計一個計算機，裏面包含「加減乘除」等功能，如果要針對不同 function 做分組測試，我們可以這樣做：

calculator.ts：計算機基礎功能（加減乘除）。

export function sum(a: number, b: number) {
  return a + b;
}
export function minus(a: number, b: number) {
  return a - b;
}
export function multiply(a: number, b: number) {
  return a * b;
}
export function divide(a: number, b: number) {
  return a / b;
}

calculator.test.ts：分組測試計算機基礎功能。

import { sum, minus, multiply, divide } from "./calculator";

describe("測試加法", () => {
  test("1 + 1 = 2", () => {
    expect(sum(1, 1)).toBe(2);
  });
  test("3 + 3 = 7", () => {
    expect(sum(3, 4)).toBe(7);
  });
});

describe("測試減法", () => {
  test("5 - 1 = 4", () => {
    expect(minus(5, 1)).toBe(4);
  });
  test("3 - 3 = 0", () => {
    expect(minus(3, 3)).toBe(0);
  });
});

describe("測試乘法", () => {
  test("1 * 5 = 5", () => {
    expect(multiply(1, 5)).toBe(5);
  });
  test("3 * 3 = 9", () => {
    expect(multiply(3, 3)).toBe(9);
  });
});

describe("測試除法", () => {
  test("6 / 2 = 3", () => {
    expect(divide(6, 2)).toBe(3);
  });
  test("3 / 2 = 1.5", () => {
    expect(divide(3, 2)).toBe(1.5);
  });
});

運行測試指令 npm run test，順利的話就會看到下圖測試分組的結果嚕！

二、在測試前、後要執行的任務（Setup and Teardown）

Jest 有提供 4 種函數：

beforeAll：在所有測試開始前執行。
afterAll：在所有測試完畢後執行。
beforeEach：在每個測試開始前執行。
afterEach：在每個測試結束後執行。

舉個例子，如果今天要設計「考核系統」，除了有考生外，還需要模擬出「合格」、「不合格」的情境，為了避免影響到資料庫，我們可以這樣做：

user.ts：我們先預設的 score 的基準為 60 分，可透過 addScore、minusScore 來加減分。

export default class user {
  name: string;
  score: number;
  constructor() {
    this.name = "";
    this.score = 60;
  }
  addScore() {
    this.score += 10;
  }
  minusScore() {
    this.score -= 10;
  }
}

exam.test.ts：利用「beforeAll」將考生的資料初始化，並透過「beforeEach」將分組測試的分數重新校正（若少了這個動作，第二個測試會沿用上一個測試的結果，會變成 70–10=60 分），測試完畢後用「afterAll」將考生資料清空。

import user from "./user";
const userDB: user[] = [];

const insertTestData = (name: string) => {
  const User = new user();
  User.name = name;
  userDB.push(User);
};

const clearTestData = () => {
  userDB.length = 0;
};

beforeAll(() => {
  insertTestData("baobao");
  insertTestData("mochi");
});

describe("baoboa 分數計算", () => {
  beforeEach(() => {
    userDB[0].score = 60;
  });
  test("60 + 10 為 70 分", () => {
    userDB[0].addScore();
    expect(userDB[0].score).toBe(70);
  });
  test("60 - 10 為 50 分", () => {
    userDB[0].minusScore();
    expect(userDB[0].score).toBe(50);
  });
});

describe("mochi 分數計算", () => {
  beforeEach(() => {
    userDB[1].score = 60;
  });
  test("60 + 10 為 70 分", () => {
    userDB[1].addScore();
    expect(userDB[1].score).toBe(70);
  });
  test("60 - 10 為 50 分", () => {
    userDB[1].minusScore();
    expect(userDB[1].score).toBe(50);
  });
});

afterAll(() => {
  clearTestData();
});

這邊補充說明一下，運行單個測試檔案的指令為： npm run test -t path/user.test.ts。

如果運行順利，就會看到下圖的測試結果嚕！

三、用 Mock Function 減少測試時的相依性

單元測試時，我們更關心「單一功能」的正確與否；如果一個單元測試涵蓋太多函式，那在發生錯誤時，我們很難判斷到底是哪一段發生錯誤。

fetch.js：我們透過「fetchData」呼叫外部 api，而「hideComplete」是設計用來隱藏已完成的 todos。

import axios from "axios";
export async function fetchData() {
  const response = await axios.get(`https://jsonplaceholder.typicode.com/todos`);
  return response;
}

export function hideComplete(data) {
  data = data.filter(function (value: { completed: boolean }) {
    return value.completed === false;
  });
  return data;
}

fetch.test.js：為了減少相依性，我們不希望直接呼叫真實的 api，所以透過 jest.mock 將 axios 給 mock 起來；並透過 3 種情境測試：「有成功換成模擬資料、資料格式符合預期、獨立測試 hideComplete 函式」。

import { fetchData, hideComplete } from "./fetch";
import axios from "axios";
jest.mock("axios");
const mockedAxios = axios as jest.Mocked<typeof axios>;
// 模擬我們期望收到的資料結構
const data = [
  {
    userId: 1,
    id: 1,
    title: "task 1",
    completed: false,
  },
  {
    userId: 2,
    id: 2,
    title: "task 2",
    completed: true,
  },
];

test("確認結果被替換成模擬資料", async () => {
  mockedAxios.get.mockResolvedValue(data);
  const result = await fetchData();
  expect(result).toEqual(data);
});

test("驗證資料格式", async () => {
  mockedAxios.get.mockResolvedValue(data);
  const result = await fetchData();
  expect(typeof result[0].userId).toBe("number");
  expect(typeof result[0].id).toBe("number");
  expect(typeof result[0].title).toBe("string");
  expect(typeof result[0].completed).toBe("boolean");
});

test("測試 hideComplete 函式運作", async () => {
  mockedAxios.get.mockResolvedValue(data);
  let result = await fetchData();
  result = hideComplete(result);
  expect(result[0].completed).toBe(false);
});

輸入npm run test -t path/user.test.ts後，如果順利就會看到下圖的測試結果嚕！

四、VSCode 的 Jest 外掛

每新增一個測試就要跑一次 npm run test 是不是很煩？如果想獨立測試某個檔案還要先確認文件路徑真的讓人心累 😨

但好在 VSCode 有「Jest」這個 Extensions 讓我們事半功倍。

安裝完成後，VSCode 的左側會多出一個「Testing」的 icon，只要你在專案下有設定 jest.config.js 就會出現（如果還未設定可以參考上一篇文章）。

在 test 文檔左側即可看到測試成功的「v」與失敗的「x」。

失敗的測試會在 expect 下方出現紅色底線，滑鼠移過去就會顯示預期值（Expected）與接收值（Received）的差異。

備註：身邊有朋友在安裝外掛後遇到了一些奇怪的 Error 無法正常使用，重開 VSCode、看官方文檔怎麼調整都無用，最後用大絕「重新開機」就正常了

常用的 Jest 應用就介紹到這邊，真的要自己動手實驗過才會理解裏面的原理喔！

前端單元測試替前端專案導入測試：學習地圖、Jest 基礎與進階，再到 Vuetify（Vite & TypeScript）中的 @vue/test-utils。林鼎淵 Dean Lin

認識 Jest 測試框架，開始動手寫單元測試（TypeScript）

林鼎淵 — Thu, 19 Jan 2023 10:55:37 +0800

如果你還在猶豫是否學習測試框架，不妨先看看筆者在上一篇文章的分享喔！

這篇文章會從建立專案開始，依序帶你了解需要設定的環境、單元測試的結構，接著帶你完成第一個單元測試。

在對單元測試有基礎的概念後，會透過實際的範例讓你了解不同匹配器（Matchers）的使用時機，話不多說，我們直接開始吧！

大綱

一、初始化專案、設定測試環境
二、了解單元測試的結構，撰寫程式
三、了解 Jest 常用的匹配器（Matchers）

讀者可以直接到筆者的 Github ，將專案 Clone 下來跑跑看，會更好理解裏面的邏輯（順手按個 ⭐ 更好 🤩）。

一、初始化專案、設定測試環境

SETP 1：初始化專案＆安裝 Jest。

mkdir jest-practice
cd jest-practice

npm init -f
npm install jest babel-jest ts-jest @types/jest

SETP 2：進入「package.json」增加測試用 scripts。

{
  ...
  "scripts": {
    "test": "jest"
  },
  ...
}

SETP 3：在根目錄下新增「jest.config.ts」。

module.exports = {
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  moduleFileExtensions: ['ts'],
};

SETP 4：在根目錄下新增「tsconfig.json」。

{
  "compilerOptions": {
    "esModuleInterop": true,
  },
}

二、了解單元測試的結構，撰寫程式

我們就用最簡單的「加法」來做說明：a + b = c

如果把加法寫成單元測試，可以拆解成下面的結構：

測試的目標：我們要證明 a + b = c。
要測試的 function：要測試 sum 這個 function。
測試期待的結果：確認 sum 執行 a + b 的結果等於 c。

SETP 1：在專案下新增兩個檔案

# 放測試的 function
touch public.ts
# 測試的腳本
touch public.test.ts

SETP 2：在 public.ts 撰寫 sum 這個 function，並於 public.test.ts 用測試程式來驗證他。

// public.ts
export function sum (a: number ,b: number) {
    return a + b;
}
// public.test.ts
const { sum } = require('./public');
test('測試 8 + 9 等於 17', () => {
    expect(sum(8, 9)).toBe(17);
});

SETP 3：運行測試指令 npm run test ，如果順利就會看到下圖的結果：

最後我們再來回顧一下先前提到的結構：

測試的目標：test(測試 8 + 9 等於 17, () => {});
要測試的 function：sum(8, 9)
測試期待的結果：expect(sum(8, 9)).toBe(17);

三、了解 Jest 常用的匹配器（Matchers）

匹配器（Matchers）是讓我們驗證執行結果是否符合預期的工具，下面筆者放上幾個常用的範例。

toBe：最常用的匹配器。

test('toBe 匹配器其實能取代許多 Matcher', () => {
    expect(1 + 2).toBe(3);
    expect(null).toBe(null);
    expect(null).toBeNull();
    expect(undefined).toBe(undefined);
    expect(undefined).toBeUndefined();
});

toEqual：如果要物件（object）間的比對可以使用它。

test('toEqual 主要是比對物件', () => {
    const data = { one: 1 };
    data['two'] = 2;
    expect(data).toEqual({ one: 1, two: 2 });
});

toBeCloseTo：應用在小數點的計算。

test('小數點相加', () => {
    const value = 0.1 + 0.2;
    // 有小數點的請使用 toBeCloseTo，否則會有 rounding error
    // expect(value).toBe(0.3);
    expect(value).toBeCloseTo(0.3); // This works.
});

toMatch：字串比對。

test('透過 toMatch 確認「stop」是否存在於字串', () => {
    expect('Christoph').toMatch(/stop/);
});

toContain：確認「值」是否存在於陣列。

test('toContain 會透過迭代來確認陣列是否存在某值', () => {
    const shoppingList = [
        'diapers',
        'kleenex',
        'trash bags',
        'paper towels',
        'milk',
    ];
    expect(shoppingList).toContain('milk');
});

toThrow：確認吐出的錯誤訊息是否符合期待。

test('toThrow 可以用來檢核錯誤訊息', () => {
    expect(() => doSomething()).toThrow();
    expect(() => doSomething()).toThrow(Error);
    expect(() => doSomething()).toThrow('Something wrong');
    expect(() => doSomething()).toThrow(/wrong/);
    expect(() => doSomething()).toThrow(/^Something wrong!$/);// 若要求完全相同
});

以上是 Jest 測試框架的入門應用，如果想更深入的了解，可以參考筆者的文章： Jest 框架進階應用（describe、Setup and Teardown、Mock function）

前端單元測試替前端專案導入測試：學習地圖、Jest 基礎與進階，再到 Vuetify（Vite & TypeScript）中的 @vue/test-utils。林鼎淵 Dean Lin

想幫前端專案導入測試框架？也許我的想法與學習地圖能給你一點方向

林鼎淵 — Thu, 19 Jan 2023 10:06:38 +0800

大綱

一、前端為什麼需要寫測試？
二、寫測試對開發人員有哪些幫助？
三、筆者的學習地圖

一、前端為什麼需要寫測試？

筆者自首，過去我只撰寫後端測試，總是忽略前端測試的重要性。

當初會這樣，是因為經手的專案規格變動頻繁，感覺測試寫完沒多久就要棄用；但近期與業界的朋友聊天時，他們跟我強調了 TDD（Test-Driven Development），也就是「測試驅動開發」的概念。

這名詞也不是第一次聽到，但是否對專案有幫助我也是心存懷疑。

針對這個疑問，朋友很認真的回應我，這邊整理概要如下：

規格之所以會頻繁變更，大多數的原因是前期規劃不良所導致。

有些 PM 甚至沒有技術背景只能當傳聲筒，在這種前提下訂出的規格往往非常模糊。

而工程師面對這種模糊的規格，他有兩條路，一條路是不管那麼多，先開發再說，如果選擇這條路，那日後頻繁的遇到規格變更實屬正常。

而另一條路則是「確定規格後」再開發，我們常常把沒寫測試歸咎於專案時程太緊；但其實在專案完成後做 Review 時，發現很多時候都是在白忙一場。

所以如果能先把模糊的地方定義清楚，並將其納入測試程式，有時反而是在節省時間，要是日後規格有異動時，也方便確認哪一塊需要調整。

每個人學習新技術的理由不盡相同，但我就是在這次聊天後開始學習的。

其實有時候也不是沒時間，只是因為自己不熟悉測試程式，而用其他藉口逃避。

二、寫測試對開發人員有哪些幫助？

系統會越來越複雜，公司的同事會來來去去，不管是為了自己還是同事，有測試程式對我們最直接的幫助有：

減少人工測試：如果每次 release 新的版本就要全部手動測試一次，你絕對會崩潰。
減少測試上的遺漏：如果是人工測試，那就可能有「啊！這功能之前都沒問題，這次就不用測了」的想法，然後上線後就爆了；不過交給機器跑就不會有這個問題。
避免調整程式後，一堆功能壞掉而不自知：無論是重構程式/新增功能/解決 Bug，你勢必都會動到程式邏輯，很有可能你完成了新功能，但上線後才發現其他相依的功能壞掉了（程式也是有蝴蝶效應的）。
未來的同事（自己）會感謝你：專案可能上線後一兩年都沒事，但當需要新增/調整功能時，如果維護的人發現前人沒有測試程式，那改程式就跟走鋼索一樣（那個人很可能是自己）。

三、筆者的學習地圖

把知識集中在一篇文章會讀得太辛苦，這邊筆者將其規劃成以下主題供大家閱讀。

認識 Jest 測試框架，開始動手寫測試程式：link

初始化專案、設定測試環境
了解單元測試的結構，撰寫程式
了解 Jest 常用的匹配器（Matchers）

Jest 框架進階應用（describe、Setup and Teardown、Mock function）：link

測試分組（describe）
在測試前、後要執行的任務（Setup and Teardown）
用 Mock Function 減少測試時的相依性
VSCode 的 Jest 外掛

在 Vuetify（Vite & TypeScript）中導入單元測試 Unit Testing：link

初始化專案、安裝必要套件
調整專案各項設定檔，讓單元測試可以運行
撰寫第一隻測試程式
運行測試程式確認結果符合預期

透過實際案例了解在 Vuetify（Vite & TypeScript）中如何運用 @vue/test-utils：link

從測試的角度來設計頁面規格（以登入頁為範例）
撰寫登入頁程式
從測試案例了解 @vue/test-utils 常用的功能（ex：getComponent、setValue、wrapper.vm、trigger button、Vue Router）

前端單元測試｜林鼎淵 Dean Lin

透過實際案例了解在 Vuetify（Vite & TypeScript）中如何運用 @vue/test-utils

ㄧ、從測試的角度來設計頁面規格

基礎元件功能

測試錯誤的 Email、Password 情境

會讓元件屬性改變的行為

登入功能

二、撰寫登入頁程式

三、從測試案例了解 @vue/test-utils 常用的功能

測試檔案初始設定

用 get 找出元素（element），並確認是有顯示在畫面上的（isVisible）

透過 getComponent 取出元件，並指定「input」來 setValue

在輸入框輸入後，用 wrapper.vm.xxx 確定 data 的有成功寫入

取得元素的 attributes，確認設定符合預期

模擬使用者點擊輸入框（focus）輸入文字，然後離開（blur）的動作；並確認操作錯誤時，能捕捉預期的 error message

使用者操作系統時，元件的 attributes 如預期改變（ex：Email、Password 填寫正確，登入按鈕 Disabled 移除）

模擬使用者 trigger button 事件，觀察頁面是否如預期跳轉（Vue Router）

在 Vuetify（Vite & TypeScript）中導入單元測試 Unit Testing

ㄧ、初始化專案、安裝必要套件

二、編寫測試的 config 檔

三、撰寫第一隻測試程式

調整「src/components/HelloWorld.vue」的程式

新增「src/components/__test__/HelloWorld.spec.ts」作為測試程式

四、運行測試程式確認結果符合預期

五、VSCode 的 Vitest 外掛

六、一些建議

VSCode 改使用 Volar 這個外掛

如果遇到了「Type ‘Plugin’ is not assignable to type ‘PluginOption’」這類的錯誤

Jest 框架進階應用（describe、Setup and Teardown、Mock function）

一、測試分組（describe）

二、在測試前、後要執行的任務（Setup and Teardown）

三、用 Mock Function 減少測試時的相依性

四、VSCode 的 Jest 外掛

認識 Jest 測試框架，開始動手寫單元測試（TypeScript）

一、初始化專案、設定測試環境

二、了解單元測試的結構，撰寫程式

三、了解 Jest 常用的匹配器（Matchers）

想幫前端專案導入測試框架？也許我的想法與學習地圖能給你一點方向

一、前端為什麼需要寫測試？

二、寫測試對開發人員有哪些幫助？

三、筆者的學習地圖

認識 Jest 測試框架，開始動手寫測試程式：link

Jest 框架進階應用（describe、Setup and Teardown、Mock function）：link

在 Vuetify（Vite & TypeScript）中導入單元測試 Unit Testing：link

透過實際案例了解在 Vuetify（Vite & TypeScript）中如何運用 @vue/test-utils：link

新增「src/components/test/HelloWorld.spec.ts」作為測試程式