Для чего используются файлы App.test.js и setupTests.js в приложении create-response-app?
Если вы использовали приложение create-response-app, я уверен, что вы уже видели файлы App.test.js и setupTests.js. Если вы похожи на меня, первое, что нужно сделать при запуске нового проекта, - это удалить эти файлы. Это то, что они делают во всех уроках, верно?
Никогда не думал о включении тестов в свое приложение. Я всегда считал, что могу вручную протестировать приложение по мере его разработки. Я думал, что научиться писать тесты и писать их в моих собственных проектах будет пустой тратой времени.
До сих пор. В моей текущей работе мне было поручено написать тесты в приложении React, используя Jest и React Testing Library.
В последние несколько дней я потратил много времени на изучение тестирования, и я поделюсь тем, что узнал, в этой статье. Мы создадим новое приложение create-response-app и рассмотрим два файла, App.test.js и setupTests.js. Пришло время узнать, для чего они нужны и как мы можем их использовать.
Проведение вашего первого теста
create-response-app поставляется с установленной библиотекой тестирования Jest и React. Это рекомендуемый способ запускать модульные тесты в вашем приложении.
Если мы создадим новое приложение и откроем файл App.test.js, он будет выглядеть так.
На самом деле это тест, который они создали для нас. Если вам интересно посмотреть, что произойдет, запустите npm test в терминале проекта.
При первом запуске npm test вам будет предложено ввести эту команду.
В Jest есть режим наблюдения, который проверяет, были ли изменены какие-либо тестовые файлы с момента последней фиксации. Нажмите a, чтобы запустить все тесты. После этого вы увидите это сообщение.
Зеленый означает, что наш тест пройден! Но что именно мы тестировали? Давайте рассмотрим код более внимательно.
App.test.js
Сначала мы взглянем на файл App.test.js и разберем его построчно.
import { render, screen } from '@testing-library/react';
import App from './App';
Первые две строчки не кажутся слишком странными. Мы импортируем два объекта из библиотеки @testing-library/react и импортируем компонент приложения. Все идет нормально.
test('renders learn react link', () => {
});
Это тест. create-react-app использует Jest в качестве среды тестирования. Jest помогает нам настраивать и запускать тесты.
Тестовая функция принимает три аргумента; имя, функция и время ожидания (необязательно и здесь не указано).
Первый аргумент - это название теста. В нашем примере тест называется «отображает ссылку на обучение и реакцию». Второй аргумент - это функция, которая содержит ожидания теста.
render(<App />);
В функции мы сначала передаем компонент App методу рендеринга из библиотеки @testing-library/react. Здесь и вступает в игру Библиотека тестирования React. Библиотека React Testing помогает нам отображать компоненты, искать и взаимодействовать с виртуальной DOM. Вызывая метод рендеринга с компонентом App в качестве аргумента, мы создаем виртуальную модель DOM компонента App.
const linkElement = screen.getByText(/learn react/i);
Мы можем получить доступ к виртуальной DOM с помощью объекта экрана. Мы вызываем метод getByText() на экране. Это запрос, который позволяет нам находить элементы на странице. Подробнее о запросах можно прочитать здесь.
Мы передали аргумент /learn react/i. Это регулярное выражение, выполняющее поиск без учета регистра. Если бы мы хотели, мы могли бы просто передать вместо этого строку.
По сути, в приведенной выше строке кода говорится, что нужно искать элемент в виртуальной DOM с текстом «learn react» (без учета регистра) и сохранять его в переменной с именем linkElement.
expect(linkElement).toBeInTheDocument();
Последняя строка кода здесь называется утверждением. Это приведет к успешному или неудачному выполнению теста. Если мы прочитаем это вслух, мы сможем понять, чего ожидаем. Ожидайте, что элемент ссылки будет в документе.
Мы вызываем функцию ожидания из Jest и передаем аргумент linkElement. linkElement - это то, что мы проверяем. Заключительная часть утверждения называется сопоставлением. Это исходит от Jest-DOM, о котором мы поговорим в следующем разделе. Сопоставитель toBeInTheDocument() делает именно то, что говорит. Он проверяет, есть ли linkElement в документе или нет.
Если тест может найти элемент в виртуальной модели DOM с текстом «узнать, реагировать» (без учета регистра), то этот тест будет пройден. В противном случае он потерпит неудачу.
Если мы запустим наше приложение, мы увидим это. И, как видите, текст «Learn React» там!
setupTests.js
В последнем разделе мы упомянули Jest-DOM и сопоставители. Вот где нужен setupTests.js файл.
Подобно библиотеке тестирования Jest и React, Jest-DOM устанавливается с приложением create-response-app. Файл setupTests.js импортирует библиотеку в наше приложение и предоставляет нам доступ к сопоставителям.
В нашем примере теста в качестве сопоставителя использовался метод toBeInTheDocument(). Мы можем использовать гораздо больше сопоставителей. Подробнее о них вы можете прочитать здесь.
Вывод
Спасибо за чтение! Когда дело доходит до тестирования, мы лишь поверхностно относимся к нему. Но я надеюсь, что эта статья дала вам некоторое представление о том, что делают эти два файла, когда мы используем create-react-app. Я знаю по себе, это будут просто файлы, которые я сразу же удалил.
Я намного глубже погружаюсь в тестирование приложений React с помощью Jest и React Testing Library, так что ждите новых статей в ближайшее время!
Если вы хотите узнать, как обрабатывать ошибки в React, прочтите статью ниже.
Больше контента на plainenglish.io
