Установка и настройка Jest и React Testing Library

Что такое Jest и React Testing Library?

Jest — это популярный инструмент для тестирования JavaScript/TypeScript, который предоставляет мощные возможности для написания тестов: моков, фикстур, измерения покрытия кода и тестирования асинхронных операций. Если вам нравятся "всё в одном месте" решения, то Jest — ваш лучший друг.

React Testing Library (или RTL) — это библиотека, созданная для тестирования React-компонентов. Её философия проста: тестируй так, как будет взаимодействовать пользователь. RTL помогает сосредоточиться на поведении компонентов, а не на их внутренней реализации.

Ну что ж, пора в бой!

Установка Jest и React Testing Library

Для начала убедимся, что ваш проект уже создан. Если вы по какой-то причине пропустили шаги настройки React-проекта с TypeScript (недля тех, кто опоздал на лекцию 3), создайте его командой:

npx create-react-app my-awesome-app --template typescript

Теперь перейдём к установке библиотек. Используем npm или yarn, в зависимости от ваших предпочтений:

# Установка Jest
npm install --save-dev jest @types/jest ts-jest

# Установка React Testing Library
npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event

Если вы используете yarn:

# Установка Jest
yarn add jest @types/jest ts-jest --dev

# Установка React Testing Library
yarn add @testing-library/react @testing-library/jest-dom @testing-library/user-event --dev

Почему так много пакетов? Давайте разберёмся:

• jest — основная библиотека для тестирования.
• @types/jest — типы Jest для TypeScript.
• ts-jest — предустановщик для работы Jest с TypeScript.
• @testing-library/react — основная библиотека React Testing Library.
• @testing-library/jest-dom — расширяет Jest для работы с DOM-элементами (например, проверки на наличие текста).
• @testing-library/user-event — позволяет "симулировать" действия пользователя, такие как клики, ввод текста и т.д.

Настройка проекта для использования Jest

Теперь, когда библиотеки установлены, нам нужно немного настроить Jest. Добавьте в package.json следующую команду для запуска тестов:

"scripts": {
  "test": "react-scripts test"
}

Вы также можете создать файл конфигурации Jest. Для этого создайте файл jest.config.js в корне вашего проекта:

module.exports = {
  preset: "ts-jest", // Используем ts-jest для работы с TypeScript
  testEnvironment: "jsdom", // Симулируем браузерное окружение для тестов
  moduleNameMapper: {
    '\\.(css|scss)$': 'identity-obj-proxy', // Мокаем CSS-модули
  },
  setupFilesAfterEnv: [
    "<rootDir>/src/setupTests.ts" // Настраиваем тестовую среду
  ],
};

О, и не забудьте создать файл setupTests.ts в папке src. В этом файле мы подключим дополнительные утилиты для тестирования:

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

Проверка установки

Чтобы убедиться, что всё работает корректно, давайте запустим команду:

npm test

По умолчанию это откроет Jest в режиме наблюдения (watch mode), где вы сможете запускать тесты каждый раз при изменении кода. Но ведь пустое окно терминала — это грустно, так что давайте напишем наш первый тест.

Написание первого теста

Перед написанием теста создадим простой компонент. В файле src/components/HelloWorld.tsx напишем следующее:

import React from 'react';

interface HelloWorldProps {
  name?: string; // Имя пользователя (опционально)
}

export const HelloWorld: React.FC<HelloWorldProps> = ({ name = "Мир" }) => {
  return <h1>Привет, {name}!</h1>;
};

Теперь создадим папку __tests__ в src/components и добавим тест для этого компонента:

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

test('рендерит компонент с текстом по умолчанию', () => {
  render(<HelloWorld />);
  const element = screen.getByText(/Привет, Мир/i); // Ищем текст
  expect(element).toBeInTheDocument(); // Проверяем, что элемент присутствует
});

test('рендерит компонент с заданным именем', () => {
  render(<HelloWorld name="Студент" />);
  const element = screen.getByText(/Привет, Студент/i);
  expect(element).toBeInTheDocument();
});

Что происходит в этом тесте?

1. render() — рендерит компонент в виртуальном DOM.
2. screen.getByText() — ищет элемент с текстом "Привет, Мир" (или "Привет, Студент").
3. expect().toBeInTheDocument() — проверяет, присутствует ли элемент в DOM.

После создания теста запустите npm test, и вы увидите зелёные маркеры успеха (если всё прошло хорошо)!

Немного о методах поиска элементов

React Testing Library включает множество методов для работы с элементами. Вот краткий список самых полезных:

Пользуйтесь ими для написания простых и понятных тестов. Но помните: проверяйте то, что увидит пользователь. Не тестируйте внутренние классы или детали реализации.

Теперь у вас есть всё необходимое для использования Jest и React Testing Library. В следующей лекции вы начнёте писать более сложные тесты и работать с состояниями компонентов. Так что держите тесты зелёными и наслаждайтесь процессом тестирования!

2

Задача

Модуль 3: React, 17 уровень, 1 лекция

Недоступна

Настройка проекта для тестирования

Настройка проекта для тестирования

Открыть