Открой безлимитный доступ ко всем скринкастам и получай большие скидки на все наши стримы
Подключить →
Бесплатный
0/ мес.

Ограниченный доступ
только к Free-видео

Активен
Подписчик
500/ мес.

Безлимитный доступ
ко всем скринкастам

Подключить
Принимаем оплату российскими и иностранными картами, системами МИР Pay и Tinkoff Pay.

Перевод фронтенда на Vite React

Как это иногда случается во фронтенде, проект Create React App заброшен и пакет react-scripts давно не обновляется. Пришла пора перейти на современный быстрый сборщик и dev-сервер ViteJS. И произошло крупное обновление ESLint с переходом на новую структуру конфигурационного файла. Сегодня немного доработаем E2E-тесты, обновимся до ESLint 10, перейдём на React 19, произведём поэтапную миграцию фронтенда на Vite и сравним варианты написания тестов на Jest и Vitest:

  • 00:00:00 Что сегодня будет
  • 00:01:09 Обновление пакетов Cucumber
  • 00:03:46 Переход на Browser SetCookie
  • 00:04:57 Одноразовая запись в localStorage в E2E тестах
  • 00:13:43 Перевод Cucumber на ESLint 10
  • 00:31:27 Структура разработки и сборки фронтенда
  • 00:33:37 План ухода от react-scripts
  • 00:38:33 Обзор сборщика Vite
  • 00:45:16 Добавление тестов для undefined сообщений
  • 00:46:25 Обновление фронтенда
  • 00:50:57 Отключение внутреннего ESLint
  • 00:54:14 Разделение testing-library
  • 00:55:34 Миграция с Enzyme на Jest Mock
  • 00:59:40 Извлечение Jest из react-scripts
  • 01:08:29 Переход на React Router 7
  • 01:10:12 Обновление до React 19
  • 01:11:13 Модульная конфигурация для StyleLint
  • 01:13:31 Файл prettierignore
  • 01:14:02 Перевод фронтенда на ESLint 10
  • 01:16:52 ESLint Prettier Plugin
  • 01:17:56 Избавление от import React
  • 01:23:36 ESLint React Hooks Plugin
  • 01:28:56 ESLint React Refresh Plugin
  • 01:32:41 ESLint Jest Plugin
  • 01:43:17 ESLint Testing Library Plugin
  • 01:44:44 Исследование скелетона ViteJS
  • 01:47:45 Модульные скрипты в index.html
  • 01:52:10 Миграция package.json
  • 01:54:25 Раздельная конфигурация tsconfig
  • 02:01:05 Явный импорт искусственных типов
  • 02:02:25 Прокидывание типов для тестов
  • 02:03:34 Несовместимость verbatim syntax с CommonJS
  • 02:04:46 Отдельный tsconfig для тестов
  • 02:05:59 Запуск dev-сервера Vite
  • 02:08:45 Переход с process env на import meta
  • 02:13:11 Типизация для переменных окружения
  • 02:15:18 Использование Vitest вместо Jest
  • 02:23:56 ESLint Vitest Plugin
  • 02:25:00 Что у нас получилось
Скрытый контент (код, слайды, ...) для подписчиков. Открыть →
Комментарии (0)
Зарегистрируйтесь или войдите чтобы оставить комментарий

Или войти через:

Yandex
MailRu
GitHub
Google
© 2026 ООО «Деворкер» ИНН 7840083887