「Property 'toBeInTheDocument' does not exist on type 'Matchers<void, HTMLElement>'」のエラーの解決法

こんにちはk42un0k0です
今回はエラーを解決したので、嬉しさ余って記事を書こうと思います。

エラーの発生条件

• @testing-library/jest-domを使っている
• @jest/globalsを使っている

今回遭遇したエラー

「Property 'toBeInTheDocument' does not exist on type 'Matchers'」

@testing-library/jest-domを使い始めたときに遭遇したエラーです

こちらのエラーは@jest/globalsを使ってると遭遇します

対処法

なんでもいいのでtsconfig.jsonのincludeでインクルードされてるtsファイルの中で次を書き加えてください

import { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers";

declare module "expect" {
  interface Matchers<R extends void | Promise<void>, T = unknown>
    extends TestingLibraryMatchers<typeof expect.stringContaining, R> {}
}

私はjestのセットアップファイルに書き加えました

jest.setup.ts

import "@testing-library/jest-dom";
import { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers";

declare module "expect" {
  interface Matchers<R extends void | Promise<void>, T = unknown>
    extends TestingLibraryMatchers<typeof expect.stringContaining, R> {}
}

原因

こちらのエラーは本来jestのdescribe等を暗黙的に使用できる状態ならば起きません
というのも@testing-library/jest-domの中で以下のように宣言されてるからです

import { TestingLibraryMatchers } from './matchers';

declare global {
    namespace jest {
        interface Matchers<R = void, T = {}> extends TestingLibraryMatchers<typeof expect.stringContaining, R> {}
    }
}

この宣言がライブラリ内であるので、グローバルなjestを使っている場合は自動でカスタムマッチャーの型定義が使えます
ですが今回は@jest/globalsを使っている関係で、型が違うので宣言しなおさなきゃいけなかったみたいです。