Jest and React Testing Library are selected because they can simulate user behavior, reduce dependence on implementation details, and use out of the box; 1. Use render and screen.getByText to verify content when testing rendering; 2. Use fireEvent to simulate events and assert the results when testing interactions; 3. Use waitFor or findBy to wait for elements to be updated when testing asynchronous operations; 4. Use wrappers or pass props directly in when testing components with prop or context; priority should be given to accessibility queries, avoid excessive use of data-testid, test behavior rather than implementation, mock external dependencies, and overwrite loading, error, success and other states, ultimately ensuring that the test is close to the user's real operation and is complete and reliable.

Unit testing React components is a key practice to ensure the quality and stability of front-end code. Using Jest and React Testing Library (RTL) is the most popular combination that works well to help you write tests that are maintainable and close to user behavior.

Why choose Jest React Testing Library?

Jest is a powerful JavaScript testing framework with its own assertions, mocks and coverage tools. React Testing Library emphasizes a “user behavior-centric” test approach, encouraging you to verify component behavior from a user’s perspective rather than focusing on internal implementation details.

The advantages of this combination are:

• Close to real usage scenarios : Test by querying DOM elements and simulating user interaction.
• Reduce dependence on implementation details : Even if the internal logic of the component is refactored, the test will still pass as long as the behavior remains unchanged.
• Out of the box : Create React App has Jest and RTL integrated, no additional configuration is required.

How to test common component scenarios

1. Test whether the component is rendered correctly

The most basic test is to check whether the component renders the expected content.

 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();
});

Key points:

• Use render to mount components.
• Use screen.getByText to find text content (recommended to ignore case)
• Use toBeInTheDocument() to assert that the element exists (from @testing-library/jest-dom ).

Tip: Installing @testing-library/jest-dom can use more practical DOM assertions, such as toBeVisible , toHaveClass , etc.

2. Test user interaction (such as button click)

When the component contains interactive logic, simulate user clicks and verify the result.

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

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

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

  expect(countElement).toBeInTheDocument();

  fireEvent.click(button);

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

Notice:

• Using getByRole is the recommended way to meet accessibility standards.
• fireEvent.click() simulates click event.
• Re-query the DOM after each interaction to ensure that the status has been updated.

3. Test asynchronous operations (such as data loading)

For components that use useEffect or async/await to load data, use waitFor or findBy methods.

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

// Mock API module 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();
  });
});

Or use findBy (with your own waiting):

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

findBy is equal to getBy asynchronous waiting, and the default timeout is 1000ms.

4. Test components with prop or context

• Pass in prop : Just pass it directly when render , suitable for testing different inputs.
• Use Context : wrap the component with wrapper option.

 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(&#39;button&#39;)).toHaveClass(&#39;dark-button&#39;);
});

Best Practice Recommendations

• ?Preferential accessibility query methods such as screen.getByRole , getByText , getByLabelText , etc.
• ? Avoid data-testid unless there are no other options (such as pure style components).
• ?Test behavior rather than implementation : Don't test the state variable, but test whether the UI responds correctly.
• ? mock external dependencies : such as API calls, third-party libraries.
• ?Don't overtest : Avoid writing tests for every small change, focusing on core functions and boundary situations.

Tips: Test coverage

Run npm test -- --coverage to view test coverage. Focus on uncovered branching and conditional rendering logic.

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

This type of conditional rendering is recommended to test the three states: loading , error , and success .

Basically that's it. The combination of Jest and React Testing Library makes testing intuitive and reliable. The key is to write it like the user is operating, not like the developer is checking the state. This way your tests can truly protect the application from unexpected changes.

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