選擇Jest和React Testing Library是因為它們能模擬用戶行為、減少對實現(xiàn)細(xì)節(jié)的依賴且開箱即用；1. 測試渲染時使用render和screen.getByText驗證內(nèi)容；2. 測試交互時通過fireEvent模擬事件并斷言結(jié)果；3. 測試異步操作時使用waitFor或findBy等待元素更新；4. 測試帶prop或context的組件時通過wrapper包裹或直接傳入props；應(yīng)優(yōu)先使用可訪問性查詢、避免過度使用data-testid、測試行為而非實現(xiàn)、mock外部依賴，并覆蓋loading、error、success等狀態(tài)，最終確保測試貼近用戶真實操作且完整可靠。

單元測試 React 組件是保證前端代碼質(zhì)量和穩(wěn)定性的關(guān)鍵實踐。使用 Jest 和 React Testing Library（RTL）是目前最流行的組合，它們配合良好，能幫助你編寫可維護、貼近用戶行為的測試。

為什么選擇 Jest React Testing Library？

Jest 是一個功能強大的 JavaScript 測試框架，自帶斷言、mock 和覆蓋率工具。React Testing Library 強調(diào)“以用戶行為為中心”的測試方式，鼓勵你從用戶視角驗證組件行為，而不是關(guān)注內(nèi)部實現(xiàn)細(xì)節(jié)。

這種組合的優(yōu)勢在于：

• 貼近真實使用場景：通過查詢 DOM 元素并模擬用戶交互來測試。
• 減少對實現(xiàn)細(xì)節(jié)的依賴：即使重構(gòu)組件內(nèi)部邏輯，只要行為不變，測試仍能通過。
• 開箱即用：Create React App 已集成 Jest 和 RTL，無需額外配置。

如何測試常見組件場景

1. 測試組件是否正確渲染

最基礎(chǔ)的測試是檢查組件是否渲染了預(yù)期內(nèi)容。

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

test('renders hello message', () => {
  render(<Greeting name="Alice" />);
  const headingElement = screen.getByText(/hello, alice/i);
  expect(headingElement).toBeInTheDocument();
});

關(guān)鍵點：

• 使用 render 掛載組件。
• 使用 screen.getByText 查找文本內(nèi)容（推薦使用正則忽略大小寫）。
• 使用 toBeInTheDocument() 斷言元素存在（來自 @testing-library/jest-dom）。

提示：安裝 @testing-library/jest-dom 可以使用更多實用的 DOM 斷言，如 toBeVisible、toHaveClass 等。

2. 測試用戶交互（如按鈕點擊）

當(dāng)組件包含交互邏輯時，模擬用戶點擊并驗證結(jié)果。

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

test('increments counter on button click', () => {
  render(<Counter />);

  const button = screen.getByRole('button', { name: /increment/i });
  const countElement = screen.getByText(/count: 0/i);

  expect(countElement).toBeInTheDocument();

  fireEvent.click(button);

  expect(screen.getByText(/count: 1/i)).toBeInTheDocument();
});

注意：

• 使用 getByRole 是推薦方式，符合可訪問性標(biāo)準(zhǔn)。
• fireEvent.click() 模擬點擊事件。
• 每次交互后重新查詢 DOM，確保狀態(tài)已更新。

3. 測試異步操作（如數(shù)據(jù)加載）

對于使用 useEffect 或 async/await 加載數(shù)據(jù)的組件，使用 waitFor 或 findBy 方法。

import { render, screen, waitFor } from '@testing-library/react';
import UserProfile from './UserProfile';
import * as api from './api';

// Mock API 模塊
jest.mock('./api');

test('displays user name after fetching', async () => {
  api.fetchUser.mockResolvedValue({ name: 'John Doe' });

  render(<UserProfile userId="123" />);

  expect(screen.getByText(/loading/i)).toBeInTheDocument();

  await waitFor(() => {
    expect(screen.getByText(/john doe/i)).toBeInTheDocument();
  });
});

或使用 findBy（自帶等待）：

const nameElement = await screen.findByText(/john doe/i);
expect(nameElement).toBeInTheDocument();

findBy 等于 getBy 異步等待，超時默認(rèn)為 1000ms。

4. 測試帶 prop 或 context 的組件

• 傳入 prop：直接在 render 時傳遞即可，適合測試不同輸入。
• 使用 Context：用 wrapper 選項包裹組件。

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

test('renders with dark theme', () => {
  const wrapper = ({ children }) => (
    <ThemeProvider initialTheme="dark">{children}</ThemeProvider>
  );

  render(<ThemedButton />, { wrapper });

  expect(screen.getByRole('button')).toHaveClass('dark-button');
});

最佳實踐建議

• ? 優(yōu)先使用 screen.getByRole、getByText、getByLabelText 等可訪問性查詢方式。
• ? 避免使用 data-testid，除非沒有其他選擇（如純樣式組件）。
• ? 測試行為而非實現(xiàn)：不要測試 state 變量，而是測試 UI 是否響應(yīng)正確。
• ? mock 外部依賴：如 API 調(diào)用、第三方庫。
• ? 不要過度測試：避免對每個小變化都寫測試，聚焦核心功能和邊界情況。

小技巧：測試覆蓋率

運行 npm test -- --coverage 可查看測試覆蓋率。重點關(guān)注未覆蓋的分支和條件渲染邏輯。

{isLoading && <div>Loading...</div>}
{error && <div>Error: {error}</div>}
{data && <div>{data.name}</div>}

這類條件渲染建議分別測試 loading、error、success 三種狀態(tài)。

基本上就這些。Jest 和 React Testing Library 的組合讓測試變得直觀且可靠。關(guān)鍵是寫得像用戶在操作，而不是像開發(fā)者在檢查 state。這樣你的測試才能真正保護應(yīng)用不受意外變更影響。

以上是單位測試與開玩笑和反應(yīng)測試庫的反應(yīng)組件的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！