React + TypeScript + Vite + Vitest + ReactTestingLibrary + jest-dom + jsdom

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

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

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

必要なライブラリをインストール

• Vitestのインストール(公式)

npm install -D vitest

• ReactTestingLibraryのインストール(公式, 公式)

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

• jest-domのインストール(公式)。toBeIntheDocument等を使いたいため。

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

• jsdomのインストール(公式)

npm install -D jsdom

設定ファイル

• Vitestの設定(公式)

vite.config.ts

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

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

• jest-domの設定(公式)

vitest-setup.ts

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

vite.config.ts

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

tsconfig.app.json

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

• jsdomの設定(公式)

vite.config.ts

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