React testing library | Frontend Advent #16

Задача:

Написать тесты на редактирование формы

Как выполнить задание:

Уже реализовано:

• Макет и базовая структура приложения.
• Мокирование серверных запросов.
• Часть тестов.

⚠️ Важный момент Для мокирования запросов в тестах используется среда node.js (не браузер). Это достигается с помощью server из файла server.ts.

В этом задании от вас требуется написать тесты на редактирование формы. Для этого в файле GiftItem.test.tsx

• Найдите элементы формы: поле ввода nameInput и текстовое поле descriptionArea через их атрибуты data-testid.
• Очистите текущие значения этих полей с помощью методов из библиотеки userEvent.
• Введите новые значения в оба поля.
• Проверьте, что поля содержат ожидаемые значения, используя метод toHaveValue.

Убедитесь, что тесты проходят успешно, запустив команду npm run test:ui.

Запуск проекта:

• npm i - установка библиотек
• npm run dev - сборка для разработки
• npm run test:ui - тестирование UI компонентов

Дополнительные материалы:

Документация - https://testing-library.com/docs/react-testing-library/example-intro
Видео - https://youtube.com/shorts/yRcvOPREgGg?feature=share