使用 Vitest 和測試庫進行高效率的前端測試

Vite原生測試環境帶來的開發速度提升

Jest 多年來一直是前端測試的主流，但其設定複雜性和開銷是問題。透過組合共享 Vite 設定的“Vitest”和“React 測試庫”，您可以獲得極快的測試環境。

我們總結了建造高度可維護且難以破壞的測試套件的實用原則。

原則：測試“使用者行為”而不是“實作細節”

直接測試組件的內部狀態會導致脆弱的測試，每次重構都會破壞測試。基本思想是驗證螢幕向使用者顯示的行為。

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LoginForm } from './LoginForm';

test('入力からログイン完了までのフローを検証', async () => {
  const user = userEvent.setup();
  render(<LoginForm />);

  await user.type(screen.getByLabelText('メールアドレス'), 'test@example.com');
  await user.click(screen.getByRole('button', { name: 'ログイン' }));

  expect(await screen.findByText('ようこそ')).toBeInTheDocument();
});

非同步更新的陷阱：正確使用查詢函數

getBy**：同步驗證元素「現在存在」。如果不存在則立即錯誤。
findBy**：等待API取得等「非同步延遲顯示」的元素（傳回Promise）。
queryBy**：用於斷言該元素「螢幕上不存在」（傳回 null）。

並行化點減少 CI 執行時間

Vitest預設使用執行緒並行執行。對於涉及 DOM 操作的測試，請在「afterEach」中正確重置模擬，以保持每個測試案例的獨立性，最大化並行測試的數量，並降低 CI 成本。