Тестирование React-компонентов: Jest + Testing Library

1npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

1module.exports = {
2  testEnvironment: 'jsdom',
3  setupFilesAfterSetup: ['@testing-library/jest-dom'],
4  moduleNameMapper: {
5    '^@/(.*)$': '<rootDir>/src/$1',
6  },
7};

1import { render, screen } from '@testing-library/react';
2import { Button } from './Button';
3
4test('renders button with text', () => {
5  render(<Button>Нажми меня</Button>);
6  const button = screen.getByRole('button', { name: /нажми меня/i });
7  expect(button).toBeInTheDocument();
8});

1test('calls onClick when clicked', () => {
2  const handleClick = jest.fn();
3  render(<Button onClick={handleClick}>Кликни</Button>);
4  fireEvent.click(screen.getByRole('button'));
5  expect(handleClick).toHaveBeenCalledTimes(1);
6});

1screen.getByRole('button');
2screen.getByRole('textbox');
3screen.getByRole('heading', { name: /заголовок/i });

1screen.getByText('Привет мир');
2screen.getByText(/hello/i); // regex

1expect(screen.queryByRole('alert')).not.toBeInTheDocument();

1import { render, screen, waitFor } from '@testing-library/react';
2import { UserProfile } from './UserProfile';
3
4test('loads and displays user name', async () => {
5  render(<UserProfile userId={1} />);
6  expect(screen.getByText('Загрузка...')).toBeInTheDocument();
7  await waitFor(() => {
8    expect(screen.getByText('John Doe')).toBeInTheDocument();
9  });
10});

1test('loads user', async () => {
2  render(<UserProfile userId={1} />);
3  const name = await screen.findByText('John Doe');
4  expect(name).toBeInTheDocument();
5});

1beforeEach(() => {
2  global.fetch = jest.fn(() =>
3    Promise.resolve({
4      json: () => Promise.resolve({ name: 'John' }),
5    })
6  );
7});
8
9afterEach(() => {
10  jest.restoreAllMocks();
11});
12
13test('fetches user data', async () => {
14  render(<UserProfile userId={1} />);
15  expect(global.fetch).toHaveBeenCalledWith('/api/users/1');
16});

1jest.mock('./api', () => ({
2  fetchUser: jest.fn(() => Promise.resolve({ name: 'John' })),
3}));

1jest.mock('react-router-dom', () => ({
2  ...jest.requireActual('react-router-dom'),
3  useNavigate: () => jest.fn(),
4}));

1import { renderHook, act } from '@testing-library/react';
2import { useCounter } from './useCounter';
3
4test('increments count', () => {
5  const { result } = renderHook(() => useCounter(0));
6  act(() => result.current.increment());
7  expect(result.current.count).toBe(1);
8});

1test('submits form with user input', async () => {
2  const onSubmit = jest.fn();
3  render(<LoginForm onSubmit={onSubmit} />);
4
5  fireEvent.change(screen.getByLabelText(/email/i), {
6    target: { value: 'test@example.com' },
7  });
8  fireEvent.change(screen.getByLabelText(/пароль/i), {
9    target: { value: 'password123' },
10  });
11  fireEvent.click(screen.getByRole('button', { name: /войти/i }));
12
13  expect(onSubmit).toHaveBeenCalledWith({
14    email: 'test@example.com',
15    password: 'password123',
16  });
17});

1test('matches snapshot', () => {
2  const { container } = render(<Button>Тест</Button>);
3  expect(container).toMatchSnapshot();
4});

1import userEvent from '@testing-library/user-event';
2
3test('type and submit', async () => {
4  const user = userEvent.setup();
5  render(<Form />);
6  await user.type(screen.getByRole('textbox'), 'Hello');
7  await user.click(screen.getByRole('button'));
8});