Конфигурация для TypeScript проектов

Установка зависимостей

Для работы с React Testing Library в проектах на TypeScript требуется несколько пакетов. Базовый набор включает:

npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event jest ts-jest @types/jest
  • @testing-library/react — основной пакет для рендеринга компонентов и взаимодействия с ними.
  • @testing-library/jest-dom — набор расширений для expect, позволяющий писать более читаемые утверждения (toBeInTheDocument, toHaveTextContent).
  • @testing-library/user-event — имитация действий пользователя (клики, ввод текста, фокус и т.д.).
  • jest и ts-jest — тестовый раннер и трансформер TypeScript-кода.
  • @types/jest — определения типов для Jest.

Конфигурация Jest с TypeScript

Файл jest.config.js или jest.config.ts должен включать трансформацию TypeScript и поддержку JSX. Пример конфигурации:

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },
  testPathIgnorePatterns: ['/node_modules/', '/dist/'],
};
  • preset: 'ts-jest' — позволяет Jest обрабатывать файлы .ts и .tsx.
  • testEnvironment: 'jsdom' — имитация браузерного окружения для рендеринга React-компонентов.
  • setupFilesAfterEnv — путь к файлу, где настраиваются глобальные расширения, например, подключение @testing-library/jest-dom.

Настройка jest.setup.ts

Файл jest.setup.ts обеспечивает интеграцию расширений и дополнительных утилит:

import '@testing-library/jest-dom/extend-expect';

Это добавляет к глобальному объекту expect методы вроде:

  • toBeInTheDocument() — проверка наличия элемента в DOM
  • toHaveTextContent() — проверка текста
  • toHaveAttribute() — проверка атрибутов

Если проект использует асинхронные тесты с fetch или axios, здесь можно подключить моки:

global.fetch = jest.fn();

Конфигурация TypeScript

TypeScript требует правильного файла tsconfig.json для корректного тестирования:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "types": ["jest", "node"]
  },
  "include": ["src", "tests"]
}

Особенности:

  • "jsx": "react-jsx" — поддержка нового JSX-трансформера React 17+.
  • "types": ["jest", "node"] — подключение типов для тестов и Node.js.
  • "skipLibCheck": true ускоряет компиляцию, игнорируя проверку типов сторонних библиотек.

Структура тестов

Рекомендуется разделять тесты по функциональным блокам. Общая структура:

src/
  components/
    Button.tsx
    __tests__/
      Button.test.tsx
  utils/
    helpers.ts
    __tests__/
      helpers.test.ts

Каждый тестовый файл обычно импортирует render и screen из @testing-library/react:

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

test('кнопка отображается с текстом', () => {
  render(<Button label="Нажми меня" />);
  const button = screen.getByRole('button', { name: /Нажми меня/i });
  expect(button).toBeInTheDocument();
});
  • render() — рендерит компонент в виртуальный DOM.
  • screen — глобальный объект для поиска элементов.
  • userEvent — симулирует реальные пользовательские действия.

Рекомендации по типизации тестов

  1. Пропсы компонентов всегда типизировать через интерфейсы:
interface ButtonProps {
  label: string;
  onClick?: () => void;
}
  1. Асинхронные действия типизировать через Promise:
test('асинхронная загрузка данных', async () => {
  render(<DataLoader />);
  const item = await screen.findByText(/Загружено/i);
  expect(item).toBeInTheDocument();
});
  1. Моки функций и событий типизировать с Jest:
const onClickM ock = jest.fn<void, []>();
render(<Button label="Click" onCl ick={onClickMock} />);

Дополнительные настройки

  • Для поддержки import.meta.env в Vite-проектах нужно добавить vite-tsconfig-paths и соответствующие моки.
  • Для Storybook с TypeScript можно использовать @storybook/testing-react для интеграционных тестов компонентов.
  • ESLint и Prettier помогают поддерживать единый стиль тестов. Рекомендуется включить правила для @typescript-eslint и jest-dom.

Настройка React Testing Library с TypeScript обеспечивает строгость типов и безопасность во время тестирования, минимизируя ошибки при работе с JSX-компонентами и асинхронными операциями. Это фундаментальная база для построения масштабируемых и поддерживаемых React-проектов.

Оглавление