VS Code Extension｜林鼎淵 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

使用 Visual Studio Live Share 來即時共同開發 — Pair programming

林鼎淵 — Mon, 21 Jun 2021 17:52:13 +0800

在遠端工作後，我們使用 Teams、Skype、Google meet 來完成日常的會議，但如果使用上述工具來討論專案中的程式碼並不方便，因為所有使用者都聚焦在同一個畫面上；但看到問題時只能用口頭表達：「去app資料架下面找出xxxController，第30行的程式邏輯有問題。」這樣的表達方式欠缺效率且容易帶有情緒；所以今天向大家介紹一款共同開發超棒的工具。

圖片來源：Visual Studio官網

一、我們現在協作時遇到了哪些困境？
二、這個工具能給我們開發帶來什麼樣的幫助？
三、安裝套件＆登入使用者
四、使用方式

一、我們現在協作時遇到了哪些困境？

使用螢幕分享做 Debug 時，需要依靠大腦來做運算邏輯，想要看哪一支檔案與程式也要靠口述，非常不方便
有些程式（Teams），不只螢幕分享來能直接控制對方的電腦做操作，但同一時間只允許一人做操作
就算團隊使用 git 版控，你切到對方有 Bug 的 branch 時可能無法順利重現問題發生（很多套件版本及環境參數設定不同）
因為無法完全模擬對方程式運作環境導致 Debug 時困難重重

二、這個工具能給我們開發帶來什麼樣的幫助？

對方能夠很清楚理解自己現在講述的程式在哪個檔案的哪個位置，不再雞同鴨講
雙方能自由瀏覽專案下的資料夾與程式，無需依靠口述
可以模擬對方的環境進行程式編譯，更清楚問題發生點
雙方的游標顏色不同，方便討論時不會產生誤會

三、安裝套件＆登入使用者

下面的步驟及操作可能會隨著 VScode 改版而有所不同，僅供參考

SETP 1：在 VScode 的 EXTENSION 分頁搜尋「Live Share」，點擊「install」即可完成安裝

SETP 2：安裝完後會在左下角多出「LIVE SHARE」的icon

SETP 3：第一次按「Share」時，會要求你登入 GitHub 或是 Microsoft 的帳號

SETP 4：這裡我選擇登入Github，基本上就是一路按接受授權的過程

SETP 5：註冊成功後，你就會看到以下畫面

四、使用方式

完成安裝＆登入的步驟後，下面提供本機模擬的操作方式

自己跟自己的連線，模擬操作

SETP 1：在本機用 VScode 開啟一個資料夾或是專案

SETP 2：點擊「Share」做分享，此時你會得到一組邀請連結

SETP 3：此時開用「New Windows」開啟一個空的 VScode，點擊「Join」加入

SETP 4：加入後加入後便可以開始共同開發嚕

當 Join 的人對檔案操作時，Share 的人可以看到他的操作

按下右上角的「圖釘」，就是「Follow Participant」觀看對方現在操作的檔案

直接在對方的環境下執行程式了解問題

Join的人可以直接在終端機下指令，了解程式執行狀況

本篇文章只是很簡略地讓大家了解如何使用「Live Share」這款套件，更多的功能就讓大家直接去官網了解吧！