Как использовать React Testing Library?

Question

React Testing Library — это инструмент для тестирования React-компонентов, который позволяет проверять, как компоненты рендерятся и взаимодействуют с пользователем. С помощью этой библиотеки можно рендерить компоненты в тестах и использовать различные методы для поиска и взаимодействия с элементами, имитируя действия пользователя. Основные методы включают render, screen, getByText и fireEvent. Это помогает создавать более надежные и понятные тесты.

YeaHub · Accepted Answer

React Testing Library — это популярный инструмент для тестирования React-компонентов, который помогает разработчикам уверенно проверять функциональность своих приложений. Эта библиотека фокусируется на том, как пользователь взаимодействует с компонентами, а не на их внутренней реализации, что делает тесты более надежными и устойчивыми к изменениям.Установка и настройка: Для начала нужно установить библиотеку, если вы еще этого не сделали:npm install --save-dev @testing-library/reactОсновные методы:render: Метод, который рендерит компонент в виртуальном DOM. Например:import { render } from '@testing-library/react'; import MyComponent from './MyComponent'; test('компонент рендерится правильно', () => { const { getByText } = render(); expect(getByText('Привет, мир!')).toBeInTheDocument(); });screen: Предоставляет доступ к методам для поиска элементов в рендере. Вместо деструктуризации из render, вы можете использовать screen для более читаемых тестов:import { render, screen } from '@testing-library/react'; render(); expect(screen.getByText('Привет, мир!')).toBeInTheDocument();getByText: Позволяет находить элементы по тексту. Есть и другие методы, такие как getByRole, getByLabelText, которые помогают находить элементы по различным критериям.fireEvent: Позволяет имитировать взаимодействие с элементами, например, клики:import { fireEvent } from '@testing-library/react'; fireEvent.click(screen.getByText('Кнопка')); expect(screen.getByText('Текст после клика')).toBeInTheDocument();Тесты: Тесты, написанные с использованием React Testing Library, могут проверять, как компонент отображается и как он реагирует на действия пользователя. Они помогают убедиться, что приложение работает так, как ожидается. test('изменение текста при клике', () => { render(); const button = screen.getByRole('button'); fireEvent.click(button); expect(screen.getByText('Текст изменился!')).toBeInTheDocument(); });React Testing Library позволяет создавать понятные и эффективные тесты, что значительно повышает качество и надежность ваших приложений.