はじめに

Vitest と React Testing Library を利用した自動テストで @testing-library/jest-dom を v5 から v6 にアップデートしたら自動テストでエラーが発生したので、その解決方法を記載します。

エラー内容

エラー内容は以下の通りです。
テスト設定ファイル（setup.ts）の6行目でエラーが発生していることがわかります。

TypeError: Cannot convert undefined or null to object
 ❯ src/__tests__/setup.ts:6:8
      4| 
      5| // extends Vitest's expect method with methods from react-testing-libr…
      6| expect.extend(matchers);
       |        ^
      7| 
      8| // runs a cleanup after each test case (e.g. clearing jsdom)

解決方法

以下2点を実施することで解決できました。

expect.extend(matchers); の削除
import "@testing-library/jest-dom/vitest"; の追加

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();
});

参考

@testing-library/jest-domをv5からv6にしたらテストが全て落ちたので調査する