Как тестировать приложения Next.js с помощью Jest

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

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

Тестирование приложений Next.js

Написание тестов является важным и часто недооцениваемым аспектом разработки надежных приложений. Легко поддаться искушению отправить код непосредственно в производство, полагаясь на убеждение, что «вы написали код, значит, он должен работать!»

Однако такой подход может привести к непредвиденным проблемам и ошибкам в производственной среде. В результате применение подхода разработки через тестирование (TDD) может помочь повысить вашу уверенность в коде и сократить время, затрачиваемое на разработку.

Что такое шутка?

Шутка это популярная среда тестирования, которая широко используется различными JavaScript-фреймворки. Он предоставляет набор функций тестирования, таких как мощное средство запуска тестов, автоматическое моделирование и тестирование моментальных снимков.

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

Создайте приложение Next.js To-Do

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

Чтобы начать, выполните следующие действия:

1. Создайте новый проект Next.js, выполнив в терминале следующую команду:

   npx create-next-app@latest test-tutorial

2. После создания проекта перейдите в каталог проекта, выполнив:

   cd nextjs-тест-учебник

3. Установите необходимые зависимости как devDependencies выполнив следующую команду:

   npm install npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Теперь, когда проект настроен и установлены зависимости, вы готовы создать приложение Next.js и написать модульные тесты с помощью Jest.

Создайте компонент списка дел

в /src каталог проекта, откройте страницы/index.js файл, удалите существующий шаблонный код Next.js и добавьте следующий код.

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

Импортировать { состояние использования } от"реагировать";
Импортировать стили от"../стили/Home.module.css";
экспортпо умолчаниюфункцияДом() {
константа [todos, setTodos] = useState([]);
константа [newTodo, setNewTodo] = useState("");
константа добавитьTodo = () => {
если (новыйTodo.trim() !== "") {
константа updatedTodos = [...todos, newTodo];
 setTodos (обновляемыйTodos);
 установитьНовоеТодо("");
 }
 };
константа удалитьTodo = (индекс) => {
константа обновленоTodos = [...todos];
 updateTodos.splice (индекс, 1);
 setTodos (обновляемыйTodos);
 };

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

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

возвращаться (


 тип="текст"
 имя_класса={styles.input}
 значение = {новое задание}
 данные-testid ="todo-ввод"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"добавить-сделать">
 Добавить дело
 </button>
"список дел">
 {todos.map((дела, указатель) => (


 {делать}
 </li>
 ))}
 </ul>
 {todos.map((дела, указатель) => (


 onClick={() => deleteTodo (индекс)}
 className={стили.кнопка}
 данные-testid={`удалить-todo-${индекс}`}
 >
 Удалить
 </button>
 </div>
 ))}
 </div>
 );}

Написание тестовых случаев

Прежде чем вы начнете писать тестовые примеры, очень важно настроить Jest в соответствии с вашими конкретными требованиями к тестированию. Это включает в себя создание и настройку jest.config.js файл, который служит основой для вашей тестовой установки.

В корневом каталоге создайте новый jest.config.js файл. Затем добавьте следующий код для соответствующей настройки Jest:

константа следующийJest = требовать("следующий / шутка");
константа createJestConfig = следующийJest({
 реж.: "./",
});
константа customJestConfig = {
 каталоги модулей: ["узловые_модули", "/"],
 тестовая среда: "шутка-среда-jsdom",
};
модуль.exports = createJestConfig (customJestConfig);

Наконец, откройте пакет.json файл и добавьте новый скрипт с именем тест который выполнит команду шутка --watchAll запускать все тестовые случаи и следить за любыми изменениями.

После обновления ваши скрипты должны выглядеть так:

"скрипты": {
"разработчик": "следующий разработчик",
"строить": "следующая сборка",
"начинать": "следующий старт",
"ворс": "следующий ворс",
"тест": "шутка --watchAll"
 },

После настройки приступайте к написанию и выполнению тестов.

Тестирование приложения Next.js To-Do с помощью Jest

В корневом каталоге проекта создайте новую папку с именем __тесты__. Jest будет искать тестовые файлы в этой папке. Внутри этой папки создайте новый файл с именем index.test.js.

Сначала сделайте следующий импорт.

Импортировать Дом от"../источник/страницы/индекс";
Импортировать"@testing-library/jest-dom";
Импортировать {fireEvent, визуализация, экран, ожидание, действие} от"@тестовая-библиотека/реакция";

Напишите тест, чтобы убедиться, что все элементы отображаются правильно:

описывать(Приложение "Тодо", () => {
 это("рендерит приложение todo", () => {
 оказывать(<Дом />);

 ожидать (экран.getByTestId("todo-ввод"))).toBeInTheDocument();
 ожидать (экран.getByTestId("добавить-сделать"))).toBeInTheDocument();
 });
});

Тестовый пример проверяет правильность отображения приложения To-Do и его элементов. Внутри тестового примера Дом компонент визуализируется с помощью оказывать функция из тестовой библиотеки.

Затем делаются утверждения с использованием ожидать функция, чтобы гарантировать, что определенные элементы с идентификаторами тестов, такие как todo-ввод присутствуют в отображаемом выводе. Если эти элементы найдены в DOM, тест пройден; в противном случае он терпит неудачу.

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

запустить тест npm

Вы должны увидеть аналогичный ответ, если тест пройден.

Тестирование различных действий и имитация ошибок

Опишите эти тестовые примеры, чтобы проверить функциональность функций «Добавить задачу» и «Удалить задачу».

Начните с написания тестового примера для функции «Добавить задачу».

 это("добавляет задачу", асинхронный () => {
 оказывать(<Дом />);

константа todoInput = screen.getByTestId("todo-ввод");
константа addTodoButton = screen.getByTestId("добавить-сделать");
константа todoList = screen.getByTestId("список дел");
Ждите действовать(асинхронный () => {
 fireEvent.change(todoInput, { цель: { ценить: "Новое Тодо" } });
 добавитьTodoButton.click();
 });
Ждите ждать(() => {
 ожидать (todoList).toHaveTextContent("Новое Тодо");
 });
 });

Приведенный выше фрагмент кода имитирует взаимодействие с пользователем путем ввода в поле ввода и нажатия кнопки «Добавить». Затем, используя фиктивное входное значение To-Do, он проверяет, успешно ли добавлено входное значение в список To-Do.

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

Чтобы имитировать ошибку теста, измените идентификатор теста кнопки добавления и повторно запустите тест. С этим обновлением тест должен завершиться неудачно и выйти из системы с сообщением об ошибке, указывающим на конкретную возникшую ошибку.

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

Наконец, напишите тестовый пример для функции «Удалить задачу».

 это("удаляет задачу", асинхронный () => {
 оказывать(<Дом />);

константа todoInput = screen.getByTestId("todo-ввод");
константа addTodoButton = screen.getByTestId("добавить-сделать");

 fireEvent.change(todoInput, { цель: { ценить: "Тодо 1" } });
 fireEvent.click(addTodoButton);

константа deleteTodoButton = screen.getByTestId("удалить-todo-0");
 fireEvent.click (удалитьTodoButton);

константа todoList = screen.getByTestId("список дел");
Ждите ждать(() => {
 ожидать (todoList).toBeEmptyDOMEElement();
 });
 });

Опять же, он проверяет, успешно ли удалена задача. Сохраните файл для выполнения теста.

Модульное тестирование с использованием Jest

Это руководство предоставило вам знания о написании и выполнении простых модульных тестов на примере компонента To-Do. Чтобы обеспечить стабильность и надежность основных функций вашего приложения и снизить вероятность неожиданные проблемы в производственных средах, важно расставить приоритеты в написании тестов для вашего ключа компоненты.

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