Vitest で「document is not defined」が解決できない（jsdom 環境未設定）の主な原因は？

・Vitest の既定 environment が node で DOM が存在しない・React / Vue などのコンポーネントテストで document や window を参照している・jsdom（または happy-dom）パッケージが未インストール

Vitest で「document is not defined」が解決できない（jsdom 環境未設定）

・Vitest の既定 environment が node で DOM が存在しない ・React / Vue などのコンポーネントテストで document や window を参照している ・jsdom（または happy-dom）パッケージが未インストール

・vitest.config の test.environment を jsdom にする ・ファイル先頭の docblock で対象ファイルだけ jsdom に切り替える ・jsdom もしくは happy-dom を devDependencies に追加する

Vitest の既定環境は node なので、document や window を触ると document is not defined になる。
test.environment を jsdom か happy-dom にすれば DOM API が使えるようになる。

#vitest#jsdom#environment

公開: 2026-06-22

document is not defined（window is not defined も同様）は、Vitest の既定テスト環境が Node.js で、ブラウザの DOM API を持たないために出る。

DOM を使うコンポーネントテストでは、jsdom か happy-dom のブラウザ風環境へ切り替える必要がある。

test.environment を jsdom にすれば document などが使えるようになる（公式: environment）。

import { defineConfig } from 'vitest/config';
 
export default defineConfig({
  test: { environment: 'jsdom' },
});

// @vitest-environment jsdom

ファイル先頭の docblock やコメントで、その file だけ別環境を指定できる。

npm i -D jsdom

happy-dom を使う場合は同様に npm i -D happy-dom で追加する。

テスト対象が DOM を触らないユーティリティだけなら environment は node のままでよく、画面描画を伴うテストだけ jsdom にすると起動コストを抑えられる。