你寫的前端程式碼有做過單元測試嗎？使用什麼工具？怎麼測試的？

王铁柱6發表於2024-12-01
前端

通常，前端單元測試會涵蓋以下幾個方面：

  • 元件渲染: 測試元件是否正確渲染，包括 props 的傳遞、狀態的變化以及 UI 的更新。
  • 事件處理: 測試元件對使用者互動的響應，例如點選、輸入等事件是否觸發了正確的函式，併產生了預期的效果。
  • 非同步操作: 測試元件中非同步操作的邏輯，例如 API 呼叫、定時器等是否按預期執行。
  • 業務邏輯: 測試元件內部的業務邏輯是否正確，例如資料處理、計算等。
  • 快照測試: 測試元件渲染的輸出是否與預期一致，可以快速發現 UI 上的意外更改。

常用的前端單元測試工具和庫包括：

  • Jest: Facebook 開發的 JavaScript 測試框架，功能強大且易於使用，被廣泛應用於 React 專案。它提供了斷言庫、模擬函式、快照測試等功能。
  • React Testing Library: 專門為測試 React 元件而設計的庫，鼓勵以使用者視角進行測試，關注元件的行為和功能，而不是具體的實現細節。
  • Enzyme: Airbnb 開發的 React 測試工具庫，提供了淺渲染和深渲染兩種方式，可以更靈活地控制元件的渲染和測試。 (需要注意的是，Enzyme 對 React 17 及更高版本的支援有限，官方推薦使用 React Testing Library)
  • Cypress: 端到端測試框架，也可以用於元件測試，尤其適合測試複雜的互動場景。
  • Vitest: 一個速度極快的單元測試框架，與 Vite 相容性很好，配置簡單。
  • Mocha/Chai: 經典的 JavaScript 測試框架和斷言庫組合，靈活且可擴充套件。

一個簡單的 React 元件單元測試示例 (使用 Jest 和 React Testing Library):

import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders MyComponent with correct props', () => {
  render(<MyComponent name="John" />);
  expect(screen.getByText('Hello, John!')).toBeInTheDocument();
});

test('button click updates state', () => {
  render(<MyComponent />);
  fireEvent.click(screen.getByRole('button'));
  expect(screen.getByText('Clicked!')).toBeInTheDocument();
});

測試流程一般包括：

  1. 安裝測試工具和庫: 例如 npm install --save-dev jest @testing-library/react
  2. 編寫測試用例: 根據元件的功能和需求編寫測試用例，覆蓋各種場景。
  3. 執行測試: 使用測試執行器執行測試用例，例如 npm test。
  4. 檢視測試結果: 檢查測試報告，找出未透過的測試用例並修復程式碼。

記住，編寫有效的單元測試可以提高程式碼質量，減少 bug，並方便程式碼重構。

相關文章