VitestでtoBeInTheDocument

Vitestで toBeInTheDocument を使用すると、VSCode上で以下のエラーが発生した

プロパティ 'toBeInTheDocument' は型 'Assertion<HTMLElement>' に存在しません。ts(2339)

この状態でテストを実行すると以下のエラーが発生する。

Error: Invalid Chai property: toBeInTheDocument

toBeInTheDocument は @testing-library/jest-dom ライブラリのメソッドなので追加する必要がある。

pnpm add -D pnpm add -D @testing-library/jest-dom

setupTests.js

import "@testing-library/jest-dom";

vitest.config.js

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

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    setupFiles: ["./setupTests.js"],
  },
});

この状態でテストを実行すると以下のエラーが発生する。

ReferenceError: expect is not defined
 ❯ ../../node_modules/.pnpm/@testing-library+jest-dom@6.1.3_vitest@0.34.3/node_modules/@testing-library/jest-dom/dist/index.mjs:12:1
 ❯ setupTests.ts:1:31
      1| import "@testing-library/jest-dom";
       |                               ^
      2|

解決方法はjest-domのREADMEに書いてあって、Vitestの場合は以下のように記載する必要がある。

setupTests.js

import "@testing-library/jest-dom/vitest";