はじめに

Vitest で React Testing Library（RTL）を利用できるようにする手順のメモです。

前提

開発環境は以下の通りです。

Windows11
VSCode
TypeScript 4.9.5
React 18.2.0
Vite 4.1.0
Vitest 0.28.5
@testing-library/react 14.0.0

また、事前に以下の準備をしています。

Vite でプロジェクトファイルの作成（※手順は、こちらの記事にまとめてあります。）
Vitest のインストール
@testing-library/react のインストール
テストディレクトリ（src/__test__）の作成
App.tsx のテストファイル（以下）の作成

App.test.tsx

import { render, screen } from "@testing-library/react";
import React from "react";
import { describe, test } from "vitest";
import App from "../../App";

describe("App", () => {
  test("renders App component", () => {
    render(<App />);

    screen.debug();
  });
});

この状態でテストを実行してもRTLの render を読み込むことができず、以下のようにテストが失敗してしまいます。

そのため、これ以降の設定を行うことで、VitestでRTLを利用できるようにします（主に Vitest with React Testing Library を参考にしながら設定を行います）。

1. jsdomインストール

RTLはReactコンポーネントをテストします。そのため、jsdomのようなライブラリを使い、Vitest上でHTMLを利用できるようにする必要があります。
以下のコマンドでjsdomをインストールします。

yarn add --dev jsdom

2. vite.config.ts 追加設定①

次に vite.config.ts に test の設定を追加します。

vitest.config.ts

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
  },
  test: {
    environment: "jsdom",
  },
});

この時点では以下のように test の呼び出しエラーが発生します。

Configuring Vitestには、vitestから defineeConfig をインポートする場合、設定ファイルの先頭に triple slash command を利用してVitest型への参照を追加する必要があるとの記載があります。
ただ、この通りに設定したつもりでしたが、エラーが解消されなかったので、Stack Overflow に記載の方法で、エラーを回避しました。

vitest.config.ts

import react from "@vitejs/plugin-react";
import type { UserConfig } from "vite";
import { defineConfig } from "vite";
import type { InlineConfig } from "vitest";

interface VitestConfigExport extends UserConfig {
  test: InlineConfig;
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
  },
  test: {
    environment: "jsdom",
  },
} as VitestConfigExport);

3. @testing-library/jest-dom インストール

RTLでjest-domを利用できるようにするため、@testing-library/jest-dom を以下のコマンドでインストールします。

yarn add --dev @testing-library/jest-dom

4. テスト設定ファイルの追加

テストファイル用のディレクトリの下に setup.ts を追加します。
内容は以下の通りです。

追記：@testing-library/jest-dom のバージョンによって記載内容が一部異なります。

@testing-library/jest-dom が v5以前の場合

setup.ts

import matchers from "@testing-library/jest-dom/matchers";
import { cleanup } from "@testing-library/react";
import { afterEach, expect } from "vitest";

// extends Vitest's expect method with methods from react-testing-library
expect.extend(matchers);

// runs a cleanup after each test case (e.g. clearing jsdom)
afterEach(() => {
  cleanup();
});

@testing-library/jest-dom が v6の場合

setup.ts

import "@testing-library/jest-dom/vitest";
import { cleanup } from "@testing-library/react";
import { afterEach } from "vitest";

// runs a cleanup after each test case (e.g. clearing jsdom)
afterEach(() => {
  cleanup();
});

5. vite.config.ts 追加設定②

最後に先ほど作成したテスト設定ファイルを vite.config.ts で読み込みます。
加えて、VitestのAPIをグローバルに利用できるようにするため、globals を true にします。

vite.config.ts

import react from "@vitejs/plugin-react";
import type { UserConfig } from "vite";
import { defineConfig } from "vite";
import type { InlineConfig } from "vitest";

interface VitestConfigExport extends UserConfig {
  test: InlineConfig;
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
  },
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/__tests__/setup.ts",
  },
} as VitestConfigExport);

globals: true を追加したことで、テストファイルから import { describe, test } from "vitest"; を削除できます。