Как настроить Vite с React и Vitest + eslint/tailwind/pnpm/typescript/MSW/prettier

Все использованные материалы

Отдельное спасибо @laststance за участие в создании этого потрясающего шаблона для react. Без лишних слов, «материал», который важен для меня:

• Vite
• Vitest
• React
• Typescript
• Библиотека тестирования React
• Eslint
• Prettier
• MSW
• PNPM

То, что круто, но не так важно для меня в данный момент:

• tailwindcss
• CI (действия на GitHub)

И то, что я заменю на другую технологию.

• Замените jest на vitest
• Замените yarn на pnpm.

Не хотите следовать за ним?

Просто клонируйте этот репозиторий, и вы получите все возможности, упомянутые выше - Jest + Vitest - yarn + pnpm:

https://github.com/guitartsword/vitest-react-ts-extended

Или просто сделайте это:

npx degit guitartsword/vitest-react-ts-extended

Начало работы

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

npx degit laststance/vite-react-ts-extended <folder>
cd <folder>

Теперь вы готовы приступить к работе, хотя есть некоторые вещи, которые нам нужно изменить и удалить.
Эта структура использует jest вместо vitest, но прежде всего:

git init
git add .
git commit -m "Initial commit"

Удалите Jest и установите Vitest

Теперь, когда мы можем отследить все изменения, которые нам предстоит сделать, давайте начнем удалять/переименовывать файлы

rm yarn.lock
mv jest vitest
find ./vitest -name *Transform.js -delete

Вот и все! Теперь пришло время установить vitest и отредактировать некоторые файлы

pnpm i
pnpm i -D vitest
pnpm vitest # to test installation (all tests will fail, but vitest should run)

После установки vitest, давайте настроим его, создадим файл vitest.config.ts и добавим следующий код:

import { defineConfig } from 'vitest/config'

export default defineConfig({
  esbuild: {
    // This is to not import React (similar to create react app)
    jsxInject: `
import React from 'react';
// const jest = vi; // Uncomment this line if you are migrating from jest to vitest
`,
  },
  test: {
    // Do not process css files (is slow)
    css: false,
    environment: 'jsdom',
    // This is to not import test, it, expect, vi (instead of jest). Similar to how jest works
    globals: true,
    setupFiles: ['./vitest/setupTests.ts'],
  },
})

Если вы запустите pnpm vitest, вы получите ошибку. jest не определен. Чтобы исправить это,
у нас есть два решения:

• Откомментировать // const jest = vi; в jsxInject, настроенном в vitest.config.ts.
• Переименуйте jest в vi (поскольку это новый проект, это лучший вариант для нас) Просто отредактируйте этот файл src/hooks/useDidUpdateEffect.test.ts Line 6.

Теперь, если вы снова запустите pnpm vitest, у вас будет другая ошибка React уже был объявлен, просто удалите его отовсюду.
где он используется или удалите import React из 'react'; в jsxInject.

Файлы:

srcmain.tsx
srcApp.tsx
srcApp.test.tsx

Теперь запустите pnpm vitest и мы сделали это! Мы настроили его!
Но у нас все еще есть кое-что, что нам нужно настроить: tsconfig.json, добавьте следующее в ваш tsconfig.json:

{
  "compilerOptions": {
    "types": ["vitest/globals"] // Add this line
  },
  "include": ["./src", "./vitest/setupTests.ts"] // Add setupTests.ts to includes
}

Теперь давайте проверим, работает ли приложение

pnpm dev

Хорошо, оно должно быть запущено. Осталось сделать несколько последних вещей.

Очистка зависимостей

pnpm uninstall @types/jest esbuild-jest jest jest-environment-jsdom jest-watch-typeahead
pnpm uninstall node-notifier # optional, seems it isn't used
pnpm install -D jsdom @vitest/ui

Я заметил, что vite был автоматически обновлен до версии 3, и msw не работает, как ожидалось, так что давайте это исправим.

rm mockServiceWorker.js
pnpm msw init ./public

Затем просто нажмите Enter и позвольте msw все настроить. После этого давайте обновим наш package.json.

{
  "scripts": {
    "test": "vitest --run",
    "test:watch": "vitest",
    "test:ui": "vitest --ui", // you will love this (if you test your code 🤭)
  }
}

Резюме

Вот и все, мы завершили конфигурацию Vitest, обновили конфигурацию msw, удалили все зависимости jest и связанный с ним код конфигурации. И поскольку мы используем шаблон @laststance, мы настроили tailwind, msw, eslint, prettier и github CI.

Надеюсь, эта статья помогла вам настроить ваш vitest + react (в шаблонах community vite нет vitest + react :o)