Как настроить тестовое окружение для React-приложений с Vite

Разбираемся с настройкой React Testing Library при использовании сборщика Vite. Готовим тестовое окружение и настраиваем назойливый линтер.
Код из видео github.com/michey85/test-vite...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

[@velikorossnationalist4259]

Это видео - то чего мне не хватало, не мог нигде найти дельного обьяснения. Спасибо!

[@SGWebDeveloper]

Хорошая новость про курс , как раз то что я искал ) спасибо за ваш труд Михаил и дальнейших успехов!

[@TarasovFrontDev]

Видео супер! Больше всего мне понравился момент, когда прошло десять минут видео, сделана куча настроек и после всего этого фраза "И ничего не работает" - просто космос)

[@user-kn7ky1ih2h]

Добрый день. Хотелось бы увидеть видео о том, какие компоненты нужно тестировать, как понять что эти тесты не просто "тесты ради тестов", допустим тест чекбокса на checked, нужны ли такие тесты? Возможно знаете какие-нибудь доклады на эту тему, где показывают в каких случаях обязательно нужно покрывать тестами, а в каких не стоит?

[@from_brest2631]

Так почитайте блог КентСиДодса, автора ТестингЛайбрери. Все описано от А до Я

[@sivtsev]

Зашкаливающий уровень эпической крутости!!!

[@user-kb5kd7ln3h]

Спасибо большое

[@BazliMax]

Хотелось бы видео по этой теме ( тестирования ). Например протестировать какой-то реальный компонент с логикой через Jest и хотелось бы с TS

[@arefev]

У vitest вроде используются те же функции что и у jest, использую vitest на проектах с vite

[@andrewsam224]

Добрый день! Заранее извиняюсь, что не по теме: для Адаптива и Стилизации в React, какие подходы и инструменты лучше использовать? Заранее огромное спасибо.

[@ZhenyaGoroh]

Спасибо за урок! А чего решили jest использовать а не vitest?

[@mishanep]

Jest - это стандарт на рынке.

[@true227]

Так витест во многом схож с джестом

[@carry-on-chaos4032]

vitest же взаимно совместим с jest

[@ZhenyaGoroh]

@@carry-on-chaos4032 Да, я знаю, но почему тогда jest а не vitest

[@velikorossnationalist4259]

А если в проекте typescript - нужна ли какая-та дополнительная настройка с тестированием описанным в видео?

[@mishanep]

Конечно, понадобится пару настроек для ts

[@user-hk3ht7cu9j]

@@mishanep можешь подсказать какие?

[@rubyhat]

Привет! Спасибо за классный гайд! Столкнулся с такой проблемой - когда мы используем переменные окружения, например: const API_BASE_PATH = import.meta.env.VITE_API_BASE_PATH; то при запуске тестов Jest жалуется, что не знает что такое import.meta.env . Как можно решить эту проблему? Перепробовал несколько способов, пока ничего не помогло :(

[@rubyhat]

Как удалось решить эту проблему: 1. создал отдельный файл envs.ts, куда импортирую переменные окружения при помощи import.meta.env и экспортирую все эти переменные как объект 2. везде где ранее использовались переменные окружения напрямую, теперь нужно использовать из файла envs.ts 3. создать мок объект при помощи jest.mock("./envs.ts, () => ... code ) и записать значения для всех переменных во время тестирования 4. важно, чтобы мок создавался до того, когда будет вызов теста компонента, где используется переменные окружения таким образом у нас получается одна точка входа для всех используемых переменных окружения - envs.ts, мы создаем мок для них перед вызовом всех остальных тестов и теперь они отрабатывают корректно. Надеюсь кому-то будет полезно, если у вас получилось решить проблему иным способом, то тоже делитесь своим решением!)

[@proletarian]

Миша расскажите в каком то видео о shadcn ui, пусть больше людей о нем узнает, я просто влюбился в этот ui

[@NeoCoding]

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

[@proletarian]

@@NeoCoding а с нуля постоянно лучше писать этот грёбаный цсс? Разве что уже есть готовый дизайн

[@NeoCoding]

@@proletarian тут понимаешь как, если надо по макету сверстать кот. не под либу писался, то надо б такую либу которая очень приятно кастомизируется и не имеет кучу сахара лишнего. и в этом смысле идеальная либа это такая которая содержит ядро (код который можно скопировать и вставить) и возможность прозрачно переопределить что-то чистым цсс.

[@proletarian]

@@NeoCoding ну это да, я просто не верстаю какой то дизайн специальный

[@CJIu3eHb]

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

[@mody-pq8kd]

А чем вам vitest не угодил? Там вроде бы как все с коробки работает плюс минус

[@mishanep]

Вопрос стандарта по рынку. А стандарт это jest.

[@baileysli6235]

А зачем ты юзаешь Jest если Vitest то же самое, только лучше. Если проект был бы на Next.js я бы ппонял

[@mishanep]

Стандарт есть стандарт. Я пока не встречал проектов, где бы использовался vitest.

[@IvanZakharanka]

@@mishanep У нас сейчас прод проект на vitest, но странностей с ним хватает)

[@limpchh]

А как подружить jest с svgr vite? Появляются проблемы у джеста при импорте svg файла как компонента с ?react в конце.

[@mishanep]

В доке svgr должна быть инструкция. Насколько помню, суть сводилась к созданию мок файла, где вместо иконок возвращалась просто строка для jest.

[@limpchh]

@@mishanep да, но на импорт с препиской *.svg?react в конце, все равно ругается

[@mishanep]

А матчер в jest конфиге настроен на *.svg?react ?

[@limpchh]

@@mishanep настроил! Не понимал почему не работает из-за того, что неправильно стояло в матчерах в очереди. Матчер с .svg?react нужно было перед всеми другими матчерами для svg. Затупил и не подумал что очередь важна. Спасибо за помощь!

[@sol-ares]

настройка выглядит костыльно, уж лучше потратить время на vitest

[@NeoCoding]

Михаил, так надо просто запилить сборку уже с зависимостями и запушить им на сайт. нахр эти танцы каждый раз