Jest和React Testing Library是React應(yīng)用測試的黃金標(biāo)準(zhǔn)，Jest提供測試運(yùn)行、斷言、_mock_和覆蓋率報告，React Testing Library則通過模擬用戶行為和可訪問性查詢來測試組件；若使用Create React App則已內(nèi)置二者，自定義配置需安裝jest、@testing-library/react等包並設(shè)置jest.config.js和Babel配置；單元測試用test()和expect()驗證函數(shù)邏輯，如formatPrice函數(shù)的格式化結(jié)果；組件測試通過render()渲染組件，screen查詢元素，fireEvent模擬事件，如點(diǎn)擊按鈕觸發(fā)onClick回調(diào)；最佳實(shí)踐包括測試用戶行為而非實(shí)現(xiàn)細(xì)節(jié)，優(yōu)先使用screen.getByRole等語義化查詢，避免使用data-testid，自動清理副作用，mock外部依賴，並用findBy或waitFor處理異步內(nèi)容；運(yùn)行npx jest執(zhí)行測試，加--watch啟用監(jiān)聽模式，加--coverage生成覆蓋率報告，最終確保代碼可靠、可維護(hù)。

Testing JavaScript applications — especially React components — is essential for building reliable, maintainable code. Two tools have become the gold standard in the modern React ecosystem: Jest for unit testing and React Testing Library (RTL) for component testing. Together, they provide a powerful, intuitive way to ensure your code works as expected.

Here's how to effectively use Jest and React Testing Library for unit and component testing in a React app.

What Jest and React Testing Library Do

Jest is a full-featured JavaScript testing framework developed by Facebook. It includes:

• A test runner
• Built-in assertion library
• Mocking and spying capabilities
• Code coverage reports
• Fast, parallel test execution

React Testing Library is a lightweight solution for testing React components. It encourages good testing practices by:

• Promoting testing user behavior over implementation details
• Encouraging queries via accessible elements (like screen.getByText , screen.getByRole )
• Being framework-agnostic (also works with Vue, Angular, etc.)

They work together seamlessly — Jest handles the test environment and assertions, while RTL renders components and simulates user interactions.

Setting Up Jest and React Testing Library

If you're using Create React App (CRA) , Jest and RTL are already included. You can start writing tests right away.

For custom setups (eg, with Vite, Webpack, or plain Node), install the required packages:

 npm install --save-dev jest @testing-library/react @testing-library/jest-dom @babel/preset-env @babel/preset-react

You'll also need a configuration file for Jest ( jest.config.js ) and Babel ( .babelrc ) if not using CRA.

Example jest.config.js :

 module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom'],
  transform: {
    '^. \\.(js|jsx)$': 'babel-jest',
  },
  moduleFileExtensions: ['js', 'jsx'],
};

The @testing-library/jest-dom adds custom matchers like .toBeInTheDocument() for more readable assertions.

Writing Unit Tests with Jest

Unit tests focus on individual functions or modules, not components.

Example: Testing a utility function

 // utils.js
export const formatPrice = (cents) => {
  return `$${(cents / 100).toFixed(2)}`;
};

 // utils.test.js
import { formatPrice } from './utils';

test('formats cents to USD', () => {
  expect(formatPrice(1000)).toBe('$10.00');
  expect(formatPrice(599)).toBe('$5.99');
});

Jest provides test() , expect() , and matchers like .toBe , .toEqual , .toContain , etc. You can also use describe() to group related tests.

Testing React Components with React Testing Library

RTL helps test components the way users interact with them — by querying the rendered output and simulating events.

Example: Testing a simple button

 // Button.jsx
import React from 'react';

export const Button = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

 // Button.test.jsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from './Button';

test('calls onClick when button is clicked', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click Me</Button>);

  fireEvent.click(screen.getByText(&#39;Click Me&#39;));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

Key RTL patterns:

• render() — mounts your component in a test DOM
• screen — provides access to query methods ( getByText , getByRole , etc.)
• fireEvent — simulates DOM events like clicks or input changes
• Always prefer screen.getByRole when possible for better accessibility and resilience

Best Practices for Reliable Tests

1. Test behavior, not implementation

   • Avoid testing internal state or private methods
   • Focus on what the user sees and does

2. Use semantic queries

    // Preferred
   screen.getByRole('button', { name: /submit/i });
   screen.getByLabelText(/email/i);
   
   // Less preferred
   screen.getByTestId('submit-btn'); // Only when no accessible alternative

3. Clean up side effects

   • Use afterEach(cleanup) if not using RTL v9 (cleanup is automatic now)
   • Clear mocks with jest.clearAllMocks() if needed

4. Mock external dependencies

    jest.mock('./api');

5. Wait for async content Use waitFor or findBy queries for asynchronous updates:

    const element = await screen.findByText(/loaded/i);

Running Tests and Checking Coverage

Run tests with:

 npx jest

Or with watch mode:

 npx jest --watch

Generate coverage report:

 npx jest --coverage

This creates a coverage/ folder with detailed HTML reports showing which lines are tested.

Basically, Jest and React Testing Library make testing React apps straightforward and user-focused. Write tests that reflect real usage, avoid brittle selectors, and leverage Jest's powerful mocking and assertion tools. With consistent practice, your app will be more resilient and easier to refactor.

以上是用開玩笑和React測試庫進(jìn)行單位測試JavaScript的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！