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

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(<MyComponent />);  
  	expect(getByText('Привет, мир!')).toBeInTheDocument(); 
});

• screen: Предоставляет доступ к методам для поиска элементов в рендере. Вместо деструктуризации из render, вы можете использовать screen для более читаемых тестов:

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

render(<MyComponent />); 
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(<MyComponent />);  
  	const button = screen.getByRole('button');  
  	fireEvent.click(button);  
  	expect(screen.getByText('Текст изменился!')).toBeInTheDocument(); 
});

React Testing Library позволяет создавать понятные и эффективные тесты, что значительно повышает качество и надежность ваших приложений.