React + TypeScript + Viteで作成したフロントエンドのテスト

Vitest + ReactTestingLibrary + jest-dom + jsdomを使用

※React + TypeScript + Viteでフロントエンドを作成している前提です。

npm install -D vitest

npm install -D @testing-library/react @testing-library/dom @testing-library/user-event @types/react @types/react-dom

npm install -D @testing-library/jest-dom

npm install -D jsdom

vite.config.ts

/// <reference types="vitest" />
import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    // ...
  },
})

vitest-setup.ts

import '@testing-library/jest-dom/vitest'

vite.config.ts

test: {
  // ...
  setupFiles: ['./vitest-setup.ts'], 
}

tsconfig.app.json

"include": [
  // ...
  "./vitest-setup.ts"
],

vite.config.ts

test: {
  // ...
  environment: 'jsdom',
}