Vitestで「ReferenceError: document is not defined」エラーが出る原因と対処法

Vitestは、Vue.jsやViteを使用したプロジェクトのためのテストランナーで、非常に高速で使いやすいテスト環境を提供します。しかし、テストを実行する際に「ReferenceError: document is not defined」というエラーが発生することがあります。このエラーは、主にブラウザ環境でのみ利用可能なdocumentオブジェクトにアクセスしようとしたときに発生します。

本記事では、このエラーの原因とその対処法について詳しく解説します。

Contents

1. ReferenceError: document is not definedとは？

ReferenceError: document is not definedというエラーは、Node.js環境で実行されるテストコードが、ブラウザ環境でのみ存在するdocumentオブジェクトにアクセスしようとしたときに発生します。

Node.jsはサーバーサイドのJavaScript環境であり、ブラウザのDOM（Document Object Model）にアクセスすることはできません。このため、テストコードがDOMに依存している場合、エラーが発生します。

エラーの例

以下は、documentオブジェクトにアクセスしようとした際に発生するエラーの例です。

test('should access document', () => {
  const element = document.createElement('div');
  expect(element).toBeDefined();
});

このコードをVitestで実行すると、ReferenceError: document is not definedというエラーが発生します。

2. エラーの原因

1. Node.js環境でのテスト実行

VitestはNode.js環境で動作するため、ブラウザのAPI（documentやwindowなど）にはアクセスできません。これが、documentが未定義である主な原因です。特に、VueコンポーネントのテストやDOM操作を行う場合、このエラーが発生しやすくなります。

2. テスト環境の設定不足

Vitestの設定が不十分な場合、DOM環境をエミュレートするためのライブラリが正しく読み込まれず、documentオブジェクトが未定義のままになります。特に、JSDOMなどのライブラリを使用していない場合、DOM関連の操作ができません。

3. 対処法

1. JSDOMを使用する

documentオブジェクトにアクセスするための最も一般的な解決策は、JSDOMを使用してテスト環境を設定することです。JSDOMは、Node.js環境でDOMをエミュレートするライブラリで、ブラウザのAPIを模倣します。

JSDOMのインストール

まず、JSDOMをプロジェクトにインストールします。

npm install --save-dev jsdom

Vitestの設定

次に、Vitestの設定ファイル（vitest.config.jsなど）にJSDOMを追加します。

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom', // JSDOM環境を指定
  },
});

この設定を行うことで、テスト実行時にdocumentオブジェクトが定義され、エラーが解消されます。

2. テストコードの修正

テストコードを修正して、documentオブジェクトに依存しないようにすることも一つの方法です。例えば、DOM操作を行う部分をモックすることで、テストを実行できるようにします。

test('should mock document', () => {
  const mockCreateElement = jest.fn().mockReturnValue({}); // モック関数を作成
  global.document = { createElement: mockCreateElement }; // documentをモック

  const element = document.createElement('div');
  expect(mockCreateElement).toHaveBeenCalled(); // モック関数が呼ばれたことを確認
});

このように、documentをモックすることで、実際のDOMに依存せずにテストを実行できます。

3. テスト環境の確認

Vitestの設定が正しく行われているかを確認することも重要です。特に、environmentオプションがjsdomに設定されているかを確認します。設定が正しくない場合、DOM関連の操作ができず、エラーが発生します。

// vitest.config.js
export default defineConfig({
  test: {
    environment: 'jsdom', // 確認ポイント
  },
});

4. まとめ

Vitestで「ReferenceError: document is not defined」というエラーが発生する原因は、主にNode.js環境でdocumentオブジェクトにアクセスしようとすることにあります。このエラーを解決するためには、JSDOMを使用してテスト環境を設定することが最も効果的です。また、テストコードを修正してdocumentに依存しないようにすることも有効です。

これらの対処法を実施することで、Vitestを使用したテストがスムーズに行えるようになるでしょう。

参考

タイトルとURLをコピーしました