Посмотрите, как мы можем протестировать асинхронный список
В типичном веб-приложении обязательно будет список для отображения. Это может быть список ноутбуков, автомобилей, фильмов, собственности, пользователей и т. Д. Сегодня мы рассмотрим, как можно протестировать асинхронный список.
Я начал репо с помощью Create React App, вот три дополнительных пакета, которые я использовал для работы:
"@testing-library/react": "^8.0.4" "axios": "^0.19.0" "jest-dom": "^3.5.0"
Во-первых, у нас есть этот компонент:
Это просто вызывает API, извлекает данные и отображает имя пользователя на странице. И когда он загружается, мы отображаем "Загрузка…"
Мы должны настроить Шутку, чтобы высмеивать аксиомы. Просто создайте папку __mocks__ в каталоге src, мы назовем файл axios.js с помощью приведенного ниже кода.
Затем мы должны настроить afterEach очистку с помощью Jest, чтобы нам не приходилось повторять это в каждом из наших тестовых файлов.
afterEach(cleanup)
Подробнее об очистке afterEach читайте в документации.
Для этого создайте файл с именем jest.config.js на первом уровне каталога вашего приложения.
Сейчас мы находимся в тестовой части. Создайте файл с именем Users.spec.js (или Users.test.js).
Тест соответствовал двум нашим требованиям. Убедитесь, что загрузчик существует во время выборки данных, и проверьте правильность отображаемого списка.
Если у нас есть дополнительные требования, например, нам нужен отсортированный список, поведение пользователя при нажатии и т. Д., Лучше разделить вышеуказанный тест на несколько тестовых блоков.
Однако нам нужно убедиться, что мы сбросили макет с помощью mockClear, чтобы API не вызывался более одного раза.
Чтобы увидеть тест в действии или продолжить играть с настройкой, вот репо.
Удачного тестирования!
