Jest and React Testing Library are the gold standard for React application testing. Jest provides test runs, assertions, _mock_ and coverage reports. React Testing Library tests components by mocking user behavior and accessibility queries; if using Create React The App has built-in two. Custom configurations require the installation of jest, @testing-library/react and other packages and set jest.config.js and Babel configurations; unit tests use test() and expect() to verify function logic, such as formatPrice function formatting results; component tests render(), screen query elements, and fireEvent simulate events, such as clicking a button to trigger onClick callback; best practices include testing user behavior rather than implementation details, giving priority to semantic queries such as screen.getByRole, avoiding data-testid, automatically cleaning up side effects, mock external dependencies, and using findBy or waitFor to process asynchronous content; running npx jest to execute tests, adding --watch to enable listening mode, adding --coverage to generate coverage reports, and ultimately ensuring that the code is reliable and maintainable.

Testing JavaScript applications — especially React components — is essential for building reliable, maintained 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 settings (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 reactor.

The above is the detailed content of Unit Testing JavaScript with Jest and React Testing Library. For more information, please follow other related articles on the PHP Chinese website!