Головна » Розробка » Налаштування Jest та React Testing Library: покроковий посібник для React та Next.js проектів

Налаштування Jest та React Testing Library: покроковий посібник для React та Next.js проектів

Тестування — це важлива частина життєвого циклу будь-якого застосунку. У світі React і Next.js найпопулярнішими інструментами для цього є Jest і React Testing Library. Цей гайд допоможе вам налаштувати тестове середовище швидко, правильно і з урахуванням кращих практик.

Чому саме Jest і React Testing Library?

  • Jest — це фреймворк для тестування, який ідеально підходить для проектів на JavaScript/TypeScript. Має вбудований тест-раннер, мокінг, покриття та підтримку таймерів.
  • React Testing Library (RTL) — зосереджена на тестуванні поведінки користувача, а не реалізації компонентів. Це підхід, близький до реального використання.

Підготовка проекту

Для Create React App (CRA)

CRA має Jest і RTL з коробки. Але якщо у вас Next.js, потрібно налаштовувати вручну.

Для Next.js проекту

  1. Встановлюємо залежності:
npm install --save-dev jest @testing-library/react @testing-library/jest-dom babel-jest identity-obj-proxy @testing-library/user-event
  1. Додаємо конфігураційний файл jest.config.js:
const nextJest = require('next/jest');
const createJestConfig = nextJest({ dir: './' });

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  testEnvironment: 'jsdom',
};

module.exports = createJestConfig(customJestConfig);
  1. Створюємо файл jest.setup.js:
import '@testing-library/jest-dom';
  1. (Необов’язково) Якщо використовуєте TypeScript, додайте типи у tsconfig.json:
{
  "compilerOptions": {
    "types": ["jest", "@testing-library/jest-dom"]
  }
}

Написання першого тесту

Компонент (наприклад Button.jsx):

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

Тест (Button.test.jsx):

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

test('натискає кнопку', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Натисни мене</Button>);

  const button = screen.getByText('Натисни мене');
  fireEvent.click(button);

  expect(handleClick).toHaveBeenCalledTimes(1);
});

Корисні поради

  • Використовуйте userEvent замість fireEvent для ближчої симуляції поведінки користувача.
  • Ізолюйте кожен тест, очищаючи рендер через afterEach(cleanup) (автоматично робиться RTL).
  • Пишіть тести як користувач — через getByRole, getByText, getByLabelText.

Висновок

Jest та React Testing Library — це потужна пара для побудови надійних UI-тестів. Вони дозволяють не тільки перевіряти, чи працює компонент, а й гарантувати, що користувацький досвід відповідає очікуванням. Якщо ви використовуєте Next.js — трошки більше налаштування, але результат того вартий. Тестуйте не реалізацію, а поведінку — і ваші додатки будуть стабільними.