Vite と React で単体テストする

必要なパッケージをインストールする

# vitestはViteのテストフレームワーク
# @testing-library/reactはReact用のテストライブラリ
# jest-environment-jsdomはNode.js上でDOM操作をシミュレートするライブラリ
# @testing-library/jest-domはtoBeInTheDocument()などDOMの状態を検証するためのカスタムマッチャーを提供するライブラリ
$ npm i -D vitest @testing-library/react jest-environment-jsdom @testing-library/jest-dom

設定を追加する

以下をマージする。

{
  "scripts": {
    "test": "vitest"
  }
}

vite.config.tsを書く。(★ の部分をマージする)

import react from "@vitejs/plugin-react";
import { defineConfig } from "vitest/config"; // ★importが通常と異なるので注意

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

テストコードを書く

interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
}

export function Button(props: ButtonProps) {
  return <button onClick={props.onClick}>{props.children}</button>;
}

import "@testing-library/jest-dom/vitest";
import { fireEvent, render, screen } from "@testing-library/react";
import { expect, it, vitest } from "vitest";
import { Button } from "./Button";

it("Buttonのイベント発火を確認する", () => {
  // イベントのモック関数
  const handleClick = vitest.fn().mockImplementation(() => {
    console.log("Mock called");
  });

  render(<Button onClick={handleClick}>Click Me</Button>);

  // テキストでHTML要素を取得する
  const element = screen.getByText(/Click Me/i);

  // 要素がドキュメント上に存在するか確認する
  expect(element).toBeInTheDocument();

  // クリックする
  fireEvent.click(element);

  // イベントが呼ばれたか確認する
  expect(handleClick).toHaveBeenCalled();
});

npm run testを実行する。