Setting up a testing environment for React applications with Vite

Posted by

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

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

Vite – это новый инструмент для быстрой разработки React-приложений. Он предлагает простой и быстрый способ настроить тестовое окружение для работы с React. В этой статье мы рассмотрим, как можно настроить тестовое окружение для React-приложений с использованием Vite.

Шаг 1: Установка Vite

    
      npm install create-vite -g
    
  

Шаг 2: Создание нового проекта

    
      create-vite react-app
      cd react-app
      npm install
    
  

Шаг 3: Запуск тестового окружения

    
      npm run dev
    
  

Теперь у вас должно быть настроено тестовое окружение для React-приложения с использованием Vite. Вы можете начать работу над своим проектом и тестировать его без необходимости настроек сборки и конфигураций.

Надеюсь, эта статья была полезной для вас. Успехов в разработке React-приложений с использованием Vite!

0 0 votes
Article Rating
18 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@rubyhat
2 months ago

Привет! Спасибо за классный гайд!

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

@user-kb5kd7ln3h
2 months ago

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

@sivtsev
2 months ago

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

@mody-pq8kd
2 months ago

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

@CJIu3eHb
2 months ago

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

@andrewsam224
2 months ago

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

@sol-ares
2 months ago

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

@BazliMax
2 months ago

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

@TarasovFrontDev
2 months ago

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

@arefev
2 months ago

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

@SGWebDeveloper
2 months ago

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

@NeoCoding
2 months ago

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

@velikorossnationalist4259
2 months ago

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

@velikorossnationalist4259
2 months ago

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

@baileysli6235
2 months ago

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

@user-kn7ky1ih2h
2 months ago

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

@ZhenyaGoroh
2 months ago

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

@proletarian
2 months ago

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