Создание первого теста на рендеринг компонента

Почему стартуем с рендеринга?

Привет, тестировщики! Сегодня мы будем учиться написать базовый тест на рендеринг с использованием React Testing Library. Мы создаём небольшое, но важное тестовое приложение, постепенно добавляя и тестируя компоненты. Начнём с основ и разберём, как проверить, что компонент React рендерится корректно и отображает ожидаемые элементы.

Для начала давайте ответим на вопрос: почему мы начинаем тестировать с рендеринга? Тестирование рендеринга — это основа, на которой держатся все наши тесты. Если компонент не рендерится правильно, то последующие проверки (на взаимодействия или состояние) теряют смысл. Плюс, тест рендеринга позволит вам убедиться, что базовая структура компонента работает, а код не содержит ошибок, из-за которых приложение может "упасть".

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

Примечание: мы уже установили Jest и React Testing Library на предыдущей лекции. Если вы случайно пропустили этот шаг, вернитесь и убедитесь, что у вас есть все необходимые зависимости.

К примеру, вы можете установить всё необходимое с помощью команды:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event

Также не забудьте проверить, что в вашем файле package.json scripts настроен для запуска тестов. Он может выглядеть так:

"scripts": {
  "test": "jest"
}

Теперь вы полностью готовы к работе.

Создаём компонент для тестирования

Чтобы начать, нам нужен простой React-компонент. Давайте создадим его в директории src/components. Назовём файл Greeting.tsx:

import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return (
    <div>
      <h1 data-testid="greeting-title">Привет, {name}!</h1>
    </div>
  );
};

export default Greeting;

Вот наш небольшой компонент Greeting, который принимает name через пропсы и выводит приветствие. Обратите внимание на использование data-testid у тега <h1>. Это поможет нам находить элемент в тесте.

Пишем наш первый тест

Теперь мы создадим тест для компонента Greeting. В директории src/components создайте файл Greeting.test.tsx:

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

describe('Greeting Component', () => {
  test('должен корректно отображать приветствие', () => {
    // Рендерим компонент с тестовыми данными
    render(<Greeting name="Frontend-разработчик" />);

    // Ищем элемент с текстом "Привет, Frontend-разработчик!"
    const titleElement = screen.getByTestId('greeting-title');

    // Проверяем, что он существует и содержит правильный текст
    expect(titleElement).toBeInTheDocument();
    expect(titleElement).toHaveTextContent('Привет, Frontend-разработчик!');
  });
});

Что здесь происходит?

1. Импортируем зависимости. Мы импортируем render и screen из React Testing Library для работы с рендерингом и проверки элементов. Также подключаем наш компонент Greeting.
2. Создаём тестовый набор. Мы используем describe для группировки тестов по компонентам. Это помогает организовать тесты и сделать их более читаемыми.
3. Пишем тест. Используем test() (или, как вариант, it()) для создания отдельного теста. Название теста должно быть понятным и описывать, что именно тестируется.
4. Рендерим компонент. Функция render() создаёт виртуальную DOM-структуру для тестирования.
5. Ищем элемент. Метод screen.getByTestId() находит элемент по атрибуту data-testid.
6. Проверяем результат. Убедимся, что элемент присутствует и отображает ожидаемый текст с помощью зависимостей jest-dom.

Запускаем тесты

Чтобы запустить тест, используйте команду:

npm test

Если всё настроено правильно, вы увидите результат:

PASS  src/components/Greeting.test.tsx
  Greeting Component
    ✓ должен корректно отображать приветствие (XX ms)

Поздравляю! Ваш первый тест успешно прошёл.

Проблемы, с которыми вы можете столкнуться

В тестировании, как и в программировании, ошибки — это нормально. Вот несколько типичных проблем:

1. Ошибка TypeError: Cannot read property 'getBoundingClientRect'. Если вы работаете с компонентами, которые используют DOM API, такие как getBoundingClientRect, добавьте библиотеку jest-environment-jsdom. Проверьте, что в вашем jest.config.js задано "testEnvironment": "jsdom".

2. Не удалось найти элемент. Если тест не может найти элемент, убедитесь, что он действительно существует в компоненте и что вы правильно указали атрибут data-testid.

3. Неверный текст. Возможно, вы забыли пробел или сделали ошибку в строке. Тщательно проверьте ожидаемое значение в expect().

Полезные методы для тестирования

Вот ещё несколько методов из React Testing Library, которые пригодятся вам в дальнейшем:

Эти методы позволяют гибко проверять содержимое DOM и взаимодействовать с ним.

Зачем это нужно в реальном мире?

Вы спросите: "Окей, я написал тест. Но зачем это нужно?" Например, представьте, что вы изменили структуру вашего компонента. Без теста вы можете забыть обновить связанные части кода, что приведёт к ошибкам в UI. Тесты помогут вам быстро выявить эти ошибки. Плюс, на собеседовании разработчика может спросить: "Вы умеете писать тесты на компоненты?" Теперь вы сможете уверенно ответить: "Да, и я знаю, как это делать с TypeScript!"

2

Задача

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

Недоступна

Проверка динамического содержимого

Проверка динамического содержимого

Открыть