Базовое тестирование React-компонента

Поиск

Для базового тестирования React-компонента с использованием Jest и React Testing Library (RTL) вам нужно:

Пример компонента:

import React, { useState } from "react";
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p data-testid="count">{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
 
export default Counter;

Пример теста:

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import Counter from "./Counter";
 
it("renders initial count and increments on button click", () => {
  // Рендерим компонент
  render(<Counter />);
 
  // Находим элементы
  const countElement = screen.getByTestId("count");
  const incrementButton = screen.getByText("Increment");
 
  // Проверяем начальное состояние
  expect(countElement).toHaveTextContent("0");
 
  // Имитируем клик по кнопке
  fireEvent.click(incrementButton);
 
  // Проверяем, что счетчик увеличился
  expect(countElement).toHaveTextContent("1");
 
  // Имитируем еще один клик
  fireEvent.click(incrementButton);
 
  // Проверяем, что счетчик увеличился еще раз
  expect(countElement).toHaveTextContent("2");
});

Пояснение:

Импорт необходимых модулей: Импортируйте render, screen, fireEvent и компонент Counter.
Рендеринг компонента: Используйте render для рендеринга компонента Counter
Поиск элементов: Используйте screen.getByTestId и screen.getByText для поиска элементов в DOM.
Проверка начального состояния: Используйте expect и методы Jest для проверки начального состояния компонента.
Имитация взаимодействия: Используйте fireEvent.click для имитации клика по кнопке.
Проверка результатов: Используйте expect для проверки, что компонент реагирует на взаимодействие правильно.