Как настроить тестовое окружение для React-приложений с Vite
HTML-код
- Опубликовано: 5 мар 2024
- Разбираемся с настройкой React Testing Library при использовании сборщика Vite. Готовим тестовое окружение и настраиваем назойливый линтер.
Код из видео github.com/michey85/test-vite...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep 
Наука
Это видео - то чего мне не хватало, не мог нигде найти дельного обьяснения. Спасибо!
Добрый день. Хотелось бы увидеть видео о том, какие компоненты нужно тестировать, как понять что эти тесты не просто "тесты ради тестов", допустим тест чекбокса на checked, нужны ли такие тесты? Возможно знаете какие-нибудь доклады на эту тему, где показывают в каких случаях обязательно нужно покрывать тестами, а в каких не стоит?
Так почитайте блог КентСиДодса, автора ТестингЛайбрери. Все описано от А до Я
Хорошая новость про курс , как раз то что я искал ) спасибо за ваш труд Михаил и дальнейших успехов!
Видео супер!
Больше всего мне понравился момент, когда прошло десять минут видео, сделана куча настроек и после всего этого фраза "И ничего не работает" - просто космос)
Зашкаливающий уровень эпической крутости!!!
Спасибо большое
Хотелось бы видео по этой теме ( тестирования ). Например протестировать какой-то реальный компонент с логикой через Jest и хотелось бы с TS
Добрый день! Заранее извиняюсь, что не по теме: для Адаптива и Стилизации в React, какие подходы и инструменты лучше использовать? Заранее огромное спасибо.
У vitest вроде используются те же функции что и у jest, использую vitest на проектах с vite
Спасибо за урок! А чего решили jest использовать а не vitest?
Jest - это стандарт на рынке.
Так витест во многом схож с джестом
vitest же взаимно совместим с jest
@@carry-on-chaos4032 Да, я знаю, но почему тогда jest а не vitest
А если в проекте typescript - нужна ли какая-та дополнительная настройка с тестированием описанным в видео?
Конечно, понадобится пару настроек для ts
@@mishanep можешь подсказать какие?
Это просто ппц. Вместо того, чтобы думать о бизнес-логике и архитектуре, люди должны ковыряться в этой куче настроек, которые завтра же изменятся, и хорошо, если все это вместе взлетит.
Привет! Спасибо за классный гайд!
Столкнулся с такой проблемой - когда мы используем переменные окружения, например: const API_BASE_PATH = import.meta.env.VITE_API_BASE_PATH; то при запуске тестов Jest жалуется, что не знает что такое import.meta.env . Как можно решить эту проблему? Перепробовал несколько способов, пока ничего не помогло :(
Как удалось решить эту проблему:
1. создал отдельный файл envs.ts, куда импортирую переменные окружения при помощи import.meta.env и экспортирую все эти переменные как объект
2. везде где ранее использовались переменные окружения напрямую, теперь нужно использовать из файла envs.ts
3. создать мок объект при помощи jest.mock("./envs.ts, () => ... code ) и записать значения для всех переменных во время тестирования
4. важно, чтобы мок создавался до того, когда будет вызов теста компонента, где используется переменные окружения
таким образом у нас получается одна точка входа для всех используемых переменных окружения - envs.ts, мы создаем мок для них перед вызовом всех остальных тестов и теперь они отрабатывают корректно.
Надеюсь кому-то будет полезно, если у вас получилось решить проблему иным способом, то тоже делитесь своим решением!)
Миша расскажите в каком то видео о shadcn ui, пусть больше людей о нем узнает, я просто влюбился в этот ui
а во что там влюбляться? куча вложенных компонентов только чтобы стилизовать простейшие вещи, а еще если надо добавить обертки для логики то вообще будет дно. Не спорю, тупо набросать побыстрому интерфейс вполне
@@NeoCoding а с нуля постоянно лучше писать этот грёбаный цсс? Разве что уже есть готовый дизайн
@@proletarian тут понимаешь как, если надо по макету сверстать кот. не под либу писался, то надо б такую либу которая очень приятно кастомизируется и не имеет кучу сахара лишнего. и в этом смысле идеальная либа это такая которая содержит ядро (код который можно скопировать и вставить) и возможность прозрачно переопределить что-то чистым цсс.
@@NeoCoding ну это да, я просто не верстаю какой то дизайн специальный
А как подружить jest с svgr vite? Появляются проблемы у джеста при импорте svg файла как компонента с ?react в конце.
В доке svgr должна быть инструкция. Насколько помню, суть сводилась к созданию мок файла, где вместо иконок возвращалась просто строка для jest.
@@mishanep да, но на импорт с препиской *.svg?react в конце, все равно ругается
А матчер в jest конфиге настроен на *.svg?react ?
@@mishanep настроил! Не понимал почему не работает из-за того, что неправильно стояло в матчерах в очереди. Матчер с .svg?react нужно было перед всеми другими матчерами для svg. Затупил и не подумал что очередь важна. Спасибо за помощь!
А чем вам vitest не угодил? Там вроде бы как все с коробки работает плюс минус
Вопрос стандарта по рынку. А стандарт это jest.
А зачем ты юзаешь Jest если Vitest то же самое, только лучше. Если проект был бы на Next.js я бы ппонял
Стандарт есть стандарт. Я пока не встречал проектов, где бы использовался vitest.
@@mishanep У нас сейчас прод проект на vitest, но странностей с ним хватает)
Михаил, так надо просто запилить сборку уже с зависимостями и запушить им на сайт. нахр эти танцы каждый раз
настройка выглядит костыльно, уж лучше потратить время на vitest