Zenn
🙆‍♀️

ReactにVitestを追加してテスト環境を整備する方法

2024/06/23に公開
React
TypeScript
Test
Vitest
tech

どうもこんにちは、たくびーです。
今回はReactプロジェクトにvitestを導入したので備忘録として残したいと思います。

Vitest導入方法

パッケージインストール

まずは必要なパッケージをインストールします。以下のコマンドを実行してください。

npm install -D vitest jsdom @testing-library/jest-dom @testing-library/react @testing-library/user-event

ファイル追加

次に、テストのセットアップ用ファイルを追加します。vitest-setup.tsというファイルを作成し、以下の内容を追加してください。

vitest-setup.ts
import '@testing-library/jest-dom/vitest';

設定追加

続いて、Viteの設定ファイル（vite.config.ts）にテスト関連の設定を追加します。

vite.config.ts
/// <reference types="vitest" />
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    // ビルド設定
  },
  server: {
    // サーバー設定
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./vitest-setup.ts'],
  },
});

さらに、tsconfig.tsにも設定を追加します。

tsconfig.ts
{
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "lib": [
      "ES2020",
      "DOM",
      "DOM.Iterable"
    ],
    "module": "ESNext",
    "types": [
      "vitest/globals",
    ],
    "moduleResolution": "bundler",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ES2020",
    "useDefineForClassFields": true
  },
  "include": [
    "src",
    "./vitest-setup.ts",
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

(オプション) 日付のテストを行う場合は、以下のパッケージもインストールしてください。

npm install -D jest-date-mock

テストの書き方

以下はテストのサンプルです。sample.tsxファイルを作成し、次の内容を追加します。

sample.tsx
import { render, screen } from '@testing-library/react';
import { SomeComponent } from './components/SomeComponent';

describe('このファイルのテストの説明', () => {
  test('テストケースについて', () => {
    render(<SomeComponent />);
    const element = screen.getByText('確認したい文字列');
    expect(element).toBeInTheDocument();
  });
});

テストの実行

以下のコマンドでテストを実行します。

npm run test

カバレッジの出し方

パッケージのインストール

カバレッジを出すためのパッケージをインストールします。

npm i -D @vitest/coverage-v8

package.jsonにスクリプトを記載

package.jsonにカバレッジを出力するためのスクリプトを追加します。

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "test": "vitest run",
    "coverage": "vitest run --coverage"
  }
}

カバレッジの出力

以下のコマンドでカバレッジを出力します。

npm run coverage

実行後、coverageディレクトリが作成され、詳細なカバレッジレポートを確認することができます。

参考

Discussion