React 및 Vitest + eslint/tailwind/pnpm/typescript/MSW/prettier로 Vite를 구성하는 방법

사용된 모든 물건

@laststance 특히 this awesome template for react 제작에 참여한 분들께 감사드립니다. 더 이상 고민하지 않고 나에게 중요한 "물건":

비테

바이테스트

리액트

타자기

React 테스트 라이브러리

에스린트

이뻐요

MSW

PNPM

멋지지만 지금 나에게 그다지 중요하지 않은 것:

tailwindcss

CI(GitHub 작업)

그리고 다른 기술로 교체할 물건

jest를 vitest로 교체

yarn를 pnpm로 교체

따라하고 싶지 않으세요?

이 저장소를 복제하면 all the features mentioned above - 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>

이제 시작할 준비가 되었습니다. 변경하고 삭제해야 할 사항이 몇 가지 있습니다.
이 구조는 vitest 대신 jest를 사용하지만 우선 다음과 같습니다.

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 is not defined. 이 문제를 해결하려면
두 가지 솔루션이 있습니다.

// const jest = vi;에 구성된 jsxInject에서 vitest.config.ts의 주석 처리를 제거합니다.

jest를 vi로 이름 변경(새 프로젝트이므로 이것이 우리에게 가장 좋은 경우)
이 파일을 편집하십시오src/hooks/useDidUpdateEffect.test.ts Line 6.

이제 다시 실행하면pnpm vitest 또 다른 오류가 발생합니다React has already been declared.
이것이 사용되었거나 import React from 'react';에서 jsxInject를 제거하십시오.

파일:

src\main.tsx
src\App.tsx
src\App.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 + 반응을 구성하는 데 도움이 되었기를 바랍니다(community vite templates에는 vitest + 반응이 없습니다 :o)