單元測試 Unit test

先後於台中 Microprogram 微程式資訊 與 Newegg 台灣新蛋 擔任前端工程師，負責使用前端技術開發與維護 Web 與 React Native App 相關服務。

現任職於 Storipress 擔任前端工程師，除了前端功能的開發以外，在團隊中也負責前端專案 DevOps 優化的工作。

主要出沒地：

• 台中「Monospace 共同工作空間」
• 個人部落格 這可要好好管管 Sid.tw

什麼時候需要測試？

不論人工測試或自動化測試

• 新功能開發
• Bug 修復
• 每一次部署前

如此高頻率的測試
手動測試無法涵蓋所有情境

自動化測試當然也無法涵蓋所有情境

測試的目的在防止已知的問題再次出現

前端自動化測試的主要類型

• Unit test 單元測試
• End-to-end test 端對端測試

• 圖片來源 : Microservices Testing Strategies, Types & Tools: A Complete Guide

單元測試的優點:

• 提高對程式改動的信心
• 快速理解函數作用

例如這樣的一段程式：

function addDecimal(text?: string | number | null) {
  if (Number.isNaN(Number(text))) return '0.00'
  if (typeof text === 'number' || /\d+\.\d+/.test(String(text))) {
    text = Number(text).toFixed(2)
  }
  return Number(`${text ?? 0}`.replace(/\B(?=\d{2}$)/, '.'))
    .toFixed(2)
    .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

test('addDecimal', () => {
  expect(addDecimal()).toBe('0.00')
  expect(addDecimal(null)).toBe('0.00')
  expect(addDecimal('abc')).toBe('0.00')
  expect(addDecimal('0')).toBe('0.00')
  expect(addDecimal('1')).toBe('1.00')
  expect(addDecimal('12')).toBe('12.00')
  expect(addDecimal('12345')).toBe('123.45')
  expect(addDecimal('123451')).toBe('1,234.51')
  expect(addDecimal('123.45')).toBe('123.45')
  expect(addDecimal('123.451')).toBe('123.45')
  expect(addDecimal(12345)).toBe('12,345.00')
  expect(addDecimal(123456)).toBe('123,456.00')
  expect(addDecimal(123.45)).toBe('123.45')
  expect(addDecimal(123.451)).toBe('123.45')
  expect(addDecimal(0)).toBe('0.00')
})

測試就是一份強制你定時更新的文件

單元測試的缺點:

• 測試通過不代表功能正常
• 單元測試可能會經常變動，增加維護成本
• UI 的測試偵錯不夠直觀

E2E 測試的優點:

• 可以確保整個應用程序的功能能夠正常工作
• 可以幫助驗證應用程序的真實狀態，包括前端和後端的互動

E2E 測試的缺點:

• 測試需要花費較長時間
• E2E 測試的偵錯相對複雜
• 撰寫 E2E 測試需要對架構有更全面的了解

測試的選擇

• function
• 組件
• Hooks
• 頁面

分享我們團隊 (新創團隊) 的協作流程：

• Trunk Based Development
• Unit test + E2E test
• PR 同時進行 CI/CD
• code review 審查

Vitest / Jest

• Jest 是前端單元測試主流的測試框架之一，提供測試覆蓋率報告、快照測試等方便的功能

• Vitest 提供了與 Jest 兼容的 API

  • Vite 中使用 Vitest 效能比 Jest 更好
  • Vitest 的設置整合在 Vite config 中

測試檔案格式

從比較簡單的純 function 的測試開始

一個測試檔案可能會有像這樣的架構

Expect 與 Matcher

最常見的基本 Matcher

也有透過 Snapshot 來檢查的方式

基於成本（時程）考量

測試不一定要完整的寫完測試案例： toMatchSnapshot

Testing Library

以接近真實的使用方式來進行測試

不去關注組件內部的狀態，重點關注在呈現結果

Query

組件測試的第一步

可以用的選擇器

• ByText
• ByLabelText
• ByPlaceholderText
• ByDisplayValue
• ByAltText
• ByTitle
• ByTestId

Single Element

Multiple Elements

使用門檻較高的選擇器

• ByRole

需要對 HTML aria 有一定程度的理解
可參閱相關文件 HTML aria #docconformance

不得已的選擇

Query 的工具

Testing Playground

fireEvent

fireEvent 需注意 Code 中監聽的事件

更好的選擇

@testing-library/user-event
User Interactions

test('userEvent example', () => {
  const input = screen.getByRole('textbox')
  userEvent.type(input, 'Hello, World!')
  expect(input).toHaveValue('Hello, World!')
})

test('fireEvent example', () => {
  const input = screen.getByRole('textbox')
  fireEvent.change(input, { target: { value: 'Hello, World!' } })
  expect(input).toHaveValue('Hello, World!')
})

Matcher (jest-dom)

Demo

reactjs-vite-tailwindcss-boilerplate - React Tailwindcss Boilerplate build with Vite

This is a boilerplate build with Vite, React 18, TypeScript, Vitest, Testing Library, TailwindCSS 3, Eslint and Prettier.

Mock Service Worker

• 統一管理 Mock API 的回傳資料
• 不需要修改 Code

// mocks/restful/unsplash.js

import { rest } from 'msw'
import data from './unsplash.json'

export const handler = rest
  .get(
    'https://api.unsplash.com/photos',
    (req, res, ctx) => res(ctx.json(data))
  )

Demo

Testing Library Demo - CodeSandbox