Написание тестов может быть утомительным и повторяющимся. Вам может показаться, что вы тратите драгоценное время, которое вы бы предпочли использовать для работы над функциями. Однако, если вы хотите выпускать приложения, в которых вы уверены, вам следует писать тесты.

Тестирование позволяет выявлять ошибки и баги, которые в противном случае вы могли бы отправить пользователям. Таким образом, это улучшает взаимодействие с пользователем вашего приложения и избавляет вас от необходимости отлаживать рабочий код.

Вы можете легко писать тесты в React, используя Jest и библиотеку тестирования React.

Что вы должны протестировать в React?

Решить, что тестировать, может быть сложно. Хотя тесты — это здорово, вам не следует тестировать каждую строку в вашем приложении React. Это оставит вас с хрупкими тестами, которые ломаются при малейших изменениях в вашем приложении.

Вместо этого вы должны тестировать только реализацию для конечного пользователя. Это означает тестирование того, как конечный пользователь будет использовать ваше приложение, вместо тестирования внутренней работы вашего приложения.

instagram viewer

Кроме того, убедитесь, что вы тестируете наиболее часто используемые компоненты вашего приложения, такие как целевая страница или компонент входа. Кроме того, протестируйте наиболее важные функции вашего приложения. Например, это могут быть функции, которые приносят деньги, например функция корзины.

Решая, что тестировать, следует помнить одну вещь: никогда не тестировать функциональность, с которой React справляется сам. Например, вместо проверки валидности реквизита вы можете использовать React PropTypes.

Тестирование компонента кнопки

Помните, что вы должны тестировать только реализацию компонента для конечного пользователя, а не его внутреннюю работу. Для компонента кнопки это означает проверку того, что он отображается без сбоев и правильно отображается.

Создайте новый файл в источник папка с именем Кнопка.js и добавьте следующий код.

функцияКнопка({ценность}) {
возвращаться (
<кнопка>{ценность}</button>
 )
}
экспортдефолт Кнопка

Button.js принимает свойство с именем value и использует его в качестве значения кнопки.

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

А приложение «создать-реагировать-приложение» поставляется с предустановленной Jest и библиотекой тестирования React. Jest — это легкая библиотека для тестирования со встроенными функциями имитации и утверждения. Он работает со многими JavaScript-фреймворки. Библиотека тестирования React, с другой стороны, предоставляет функции, которые помогут вам проверить, как пользователи взаимодействуют с компонентами.

Создайте новый файл с именем Кнопка.test.js в папке src. По умолчанию Jest идентифицирует файлы с суффиксом .test.js как тестовые файлы и автоматически запускает их. Другой вариант — добавить тестовые файлы в папку с именем __.тесты__.

Добавьте следующий код в Button.test.js, чтобы создать первый тест.

импорт { оказывать } из '@testing-library/реакция';
импорт Кнопка из '../Кнопка';
описывать('Компонент кнопки', () => { 
 тест('Отрисовывает компонент кнопки без сбоев', () => {
 оказывать(<Кнопка />);
 }); 
})

Этот тест сначала определяет, о чем тест, используя блок описания, предоставленный Jest. Этот блок полезен для группировки связанных тестов. Здесь вы группируете тесты для компонента Button.

Внутри блока описания у вас есть первый тест в тестовом блоке. Этот блок принимает строку, описывающую, что должен делать тест, и функцию обратного вызова, которая выполняет ожидание.

В этом примере тест должен отображать компонент Button без сбоев. Метод рендеринга из библиотеки тестирования React выполняет фактический тест. Он проверяет, правильно ли отображается компонент Button. Если да, то тест пройден, иначе — нет.

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

Иногда вы хотите проверить, был ли смонтирован элемент. Метод screen имеет функцию getByRole(), которую вы можете использовать для получения элемента из DOM.

screen.getByRole('кнопка')

Затем вы можете использовать полученный элемент для выполнения тестов, таких как проверка того, существует ли он в документе или правильно ли он отрисован.

getByRole() — это один из многих запросов, которые вы можете использовать для выбора элементов в компоненте. Ознакомьтесь с другими типами запросов в The Библиотека тестирования React Руководство «Какой запрос следует использовать». Кроме того, помимо роли «кнопки», большинство семантические элементы HTML иметь неявные роли, которые вы можете использовать для выполнения ваших запросов. Найдите список ролей из документы MDN.

Добавьте следующее в тестовый блок, чтобы проверить визуализацию компонента.

тест('Отрисовывает кнопку без сбоев', () => {
 оказывать(<Значение кнопки ="Подписаться" />);
 ожидать (экран.getByRole('кнопка'))).toBeInTheDocument()
});

Сопоставитель toBeInTheDocument() проверяет, существует ли элемент кнопки в документе.

Ожидайте, что кнопка будет отображаться правильно

Компонент Button принимает значение реквизита и отображает его. Чтобы он отображался правильно, отображаемое значение должно совпадать с тем, которое вы передали.

Создайте новый тестовый блок и добавьте следующий код.

тест('Отображает кнопку правильно', () => {
 оказывать(<Значение кнопки ="Авторизоваться" />);
 ожидать (экран.getByRole('кнопка')).toHaveTextContent("Авторизоваться")
})

Обратите внимание, что вам не нужно выполнять очистку после тестов при использовании библиотеки тестирования React. В прошлых версиях вам нужно было вручную выполнить очистку следующим образом:

afterEach (очистка)

Теперь тестовая библиотека автоматически размонтирует компоненты после каждого рендера.

Создание снэпшот-тестов

До сих пор вы тестировали поведение компонента Button. Напишите тесты моментальных снимков, чтобы проверить, остается ли вывод компонента прежним.

Тесты моментальных снимков сравнивают текущий вывод с сохраненным выводом компонента. Например, если вы измените стиль компонента «Кнопка», тест моментального снимка уведомит вас об этом. Вы можете либо обновить снимок, чтобы он соответствовал измененному компоненту, либо отменить изменения стиля.

Моментальные тесты очень полезны, когда вы хотите убедиться, что ваш пользовательский интерфейс не изменится неожиданно.

Тестирование моментальных снимков отличается от модульных тестов, поскольку для создания моментального снимка вам нужен уже работающий код.

Вы будете использовать метод рендерера из npm-пакета react-test-renderer. Итак, выполните следующий код, чтобы установить его.

нпм установить реагировать-тест-рендерер

В Button.test.js напишите тест моментального снимка следующим образом:

тест('Снимок совпадений', () => {
 константное дерево = renderer.create(<Значение кнопки ="Авторизоваться" />).toJSON();
ожидать(дерево).toMatchSnapshot();
})

Для компонента «Кнопка» нет существующих снимков, поэтому запуск этого теста создаст файл моментального снимка вместе с тестовым файлом:

Кнопка
└─── __тесты__
│ │ Кнопка.тесты.js
│ └─── __моментальный снимок__
│ │ Кнопка.тест.js.щелчок
│ 
└─── Кнопка.js

Теперь, когда вы запустите следующий тест, React сравнит созданный им новый снимок с сохраненным.

Напишите тесты для наиболее часто используемых компонентов

В этом руководстве вы научились писать тесты DOM и моментальных снимков в React, тестируя компонент Button. Написание тестов для всех компонентов, которые вы создаете, может быть утомительным. Однако эти тесты экономят время, которое вы потратили бы на отладку уже развернутого кода.

Вам не нужно достигать 100-процентного покрытия тестами, но убедитесь, что вы пишете тесты для наиболее часто используемых и наиболее важных компонентов.