【Vitest】ReferenceError: document is not definedエラー

はじめに

JestからVitestへ移行した際に発生したタイトルエラーの原因と解決方法です。

問題

以下テストファイルを実行したところ、ReferenceError: document is not definedエラーが発生しました。

App.spec.tsx

import "@testing-library/jest-dom/vitest";
import { test, expect, describe } from "vitest";
import { render, screen } from "@testing-library/react";
import App from "@/App";
import { ChakraProvider, defaultSystem } from "@chakra-ui/react";

describe("App.tsx", () => {
  test("表示テスト", async () => {
    await render(
      <ChakraProvider value={defaultSystem}>
        <App />
      </ChakraProvider>,
    );
    const title = await screen.findByText("APP");
    expect(title).toBeInTheDocument();
  });
});

エラーメッセージ

ReferenceError: document is not defined
 ❯ render node_modules/@testing-library/react/dist/pure.js:256:5
 ❯ src/__tests__/App.spec.tsx:9:11
      7| describe("App.tsx", () => {
      8|   test("表示テスト", async () => {
      9|     await render(
       |           ^
     10|       <ChakraProvider value={defaultSystem}>
     11|         <App />

解決方法

テストコードの一番上に// @vitest-environment jsdomを追加すればOKです。

+ // @vitest-environment jsdom
import "@testing-library/jest-dom/vitest";
import { test, expect, describe } from "vitest";
import { render, screen } from "@testing-library/react";
import App from "@/App";
import { ChakraProvider, defaultSystem } from "@chakra-ui/react";

describe("App.tsx", () => {
  test("表示テスト", async () => {
    await render(
      <ChakraProvider value={defaultSystem}>
        <App />
      </ChakraProvider>,
    );
    const title = await screen.findByText("APP");
    expect(title).toBeInTheDocument();
  });
});

// @vitest-environment jsdomは何をしている？

テスト実行時の環境をjsdomに指定しています。jsdomに指定することブラウザAPIが使えるようになり、テスト実行時の環境がブラウザ（を模倣した）環境になります。

なにも指定しない場合はテスト環境がnodeになるので、documentが無いエラーが発生しました。

// @vitest-environment jsdomを毎回書かないで済むようにする

vite.config.tsにenviroment:"jsdom"を記載すれば、テストファイルに記述する必要はなくなります。

vite.config.ts

/// <reference types="vitest/config" />
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import viteTsconfigPaths from "vite-tsconfig-paths";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), viteTsconfigPaths()],
  test: {
    globals: true,
+    environment: "jsdom",
  },
});

おわりに

公式の情報を必ず読むようにします。

参考

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼
https://projisou.jp （