はじめに

個人勉強のために簡単なアプリを作ろ〜と思った時に、テストを書き始めると...
チーム開発で当たり前に使用しているtoBeInTheDocumentを入力した途端にエラーが発生したので、そのエラーの解決方法(2パターン)をまとめます。

今回発生したエラー

Property toBeInTheDocument does not exist on type Assertion<HTMLElement>

TypeScriptでの型の不一致に関するエラーですね。

環境

"vite": "^5.4.1",
"typescript": "^5.5.3",
"vitest": "^2.0.5"
"happy-dom": "^15.7.3",
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/react": "^16.0.1",
"@testing-library/user-event": "^14.5.2",

Testing Library Documentの手順

vite.config.tsの設定
vitest-setup.tsの準備をします。

vite.config.ts

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "happy-dom",
    setupFiles: ["./vitest-setup.ts"],
  }
})

vitest-setup.ts

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

ファイル構造

上記の環境構築を行うと、tsconfigファイルが3つ作成されました。

tsconfig.json: プロジェクト全体の基本設定用
tsconfig.app.json: アプリケーションコード専用の設定用（通常は tsconfig.json から拡張）
tsconfig.node.json: Node.js 環境専用の設定用

解決方法（パターン1）

では、いよいよエラーを解決するために追加の記述を行います。
結構な時間調べていたのですが、追加したのは本当に少しだけ。
えっ、これだけでエラー解消されるの？と衝撃を受けました...。

パターン1でのエラー解決方法はtsconfig.app.jsonのTypesプロパティを追記する方法です。

エラー解決前

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

エラー解決後

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "types": ["vitest", "@testing-library/jest-dom"], // ←記述追加

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

解決方法（パターン2）

パターン2でのエラー解決方法はtsconfig.app.jsonのIncludeプロパティに追記する方法です。

エラー解決前

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

エラー解決後

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "vitest-setup.ts"] // ←記述追加
}

無事エラーが解決できました！

最後に

TypesとInclude
types: 使用する型定義ファイルを指定するオプション。
include: コンパイル対象となるファイルやディレクトリを指定するオプション。

個人的には、Typesの記述の方がしっくりくるので現段階ではパターン1を使用していこうと思っています。