Модульное тестирование - это удобная штука. Открытие приложения для реагирования и размещение отладчиков там, где это необходимо, чтобы увидеть, что происходит на определенном этапе, - это допустимый способ тестирования того, что происходит с вашим приложением, но есть способ протестировать ваши функции в вашем приложении, а также понять, будет ли компонент отображать на странице, и это модульное тестирование.
Jest - это среда тестирования, которая хорошо работает с Vue.js, React.js, Angular и другими!
При запуске приложения реакции с:
npm создать приложение для реагирования ‹project_name›
Jest уже установлен в вашем приложении, вы можете протестировать его с самого начала с помощью
npm тест
Теперь, если вы не создали свое приложение для реагирования с помощью create react-app, вам придется установить его отдельно:
npm install - save-dev шутка
Перейдите в свой файл package.json и в скриптах:
скрипты: {
«тест»: «шутка»
Обязательно укажите это там. Теперь вы можете запустить npm test как обычно.
Вы увидите файл App.test.js или, если добавляете его вручную, создайте его в своей папке src. Не забудьте включить:
И:
Скорее всего, вы снова увидите там тест, если вы создали с помощью create response-app, но в противном случае вставите этот код:
Теперь запустим тест npm:
Теперь вы увидите, что тест на рендеринг без сбоев прошел!
Так что здесь происходит? Ну, Jest имитирует компонент, работающий в DOM, и если ваш компонент не смонтирован должным образом, вы получите ошибку:
В этом случае закрывающего тега h1 не было. Незавершенное содержимое JSX. Очень откровенно.
Давайте еще один тест. Мы создадим файл Numbers.js в нашей папке src. Здесь давайте представим функцию, которая складывает два числа вместе, а другая - удваивает число:
И давайте экспортируем его, чтобы мы могли получить к нему доступ в нашем файле App.test.js:
Примечание: вы можете экспортировать по умолчанию только одну функцию за раз, если вы не сгруппируете их все вместе, как в примере.
Давайте импортируем их в наш тестовый файл:
Мы импортируем Numbers, теперь каждая функция в нашем файле Numbers.js будет доступна (пока она экспортирована) путем вызова Numbers.FunctionName.
А теперь давайте напишем несколько тестов:
Хорошо, это немного просто, но я все еще разбираюсь в этом сам. Это поможет вам начать. Чтобы написать тестовые функции:
test («ЧТО ВЫ ХОТИТЕ ПРОИЗОЙТИ ПРИ ВЫЗОВЕ ЭТОЙ ФУНКЦИИ», () = ›expect (functionName (argument1, argument2)). toBe (YOUREXPECTEDOUTCOME))
test () - это функция Jest, которая принимает строку, то, что вы ожидаете, и функцию, вызывающую ожидание (), которая будет содержать вашу функцию с аргументами, которые вы тестируете. Наконец, toBe () будет содержать значение, которое вы ожидаете вернуть для сравнения.
Я буду еще немного поиграться с этим, но вы можете посмотреть репо через Github здесь:
Спасибо, что заглянули!
