ガイド
テスト(jsdom)
installJsdomLayoutStubs による実グリッドの jsdom 描画テスト
背景: 素の jsdom ではグリッドが描画されない
jsdom はレイアウトを計算しないため、素の jsdom では実グリッドの行・列が 1 本も描画されません。
- 縦方向: グリッドはスクロール要素の
clientHeight/clientWidthを読んで可視行数を決めますが、jsdom では 0 のため行が出ません。 - 横方向: 列仮想化(
@tanstack/virtual-core)はスクロール要素の矩形を ResizeObserver の通知から得るため、observe()が no-op のスタブだと幅 0 のまま列が描画されません(getBoundingClientRectのスタブだけでは不足)。
installJsdomLayoutStubs
@ishibashi0112/spreadsheet-grid/testing サブパスの installJsdomLayoutStubs() が上記をまとめて解決します(React 非依存の小さなモジュール)。
// @vitest-environment jsdom
import { beforeAll } from 'vitest';
import { installJsdomLayoutStubs } from '@ishibashi0112/spreadsheet-grid/testing';
beforeAll(() => {
installJsdomLayoutStubs(); // 既定 1200×600
});寸法を変えたい場合はオプションで指定します。teardown が必要なスイートでは返り値の restore 関数を使います。
const restore = installJsdomLayoutStubs({ width: 800, height: 400 });
afterAll(restore);インストールされるスタブ:
| 対象 | 内容 |
|---|---|
HTMLElement.prototype.clientHeight / clientWidth | 固定値を返す getter |
Element.prototype.getBoundingClientRect | 固定矩形(width × height) |
globalThis.ResizeObserver | observe() 時に即時コールバックするスタブ |
Element.prototype.scrollTo | 未定義のときのみ no-op を補う |
検証できること
スタブ適用後は実グリッドが本体行 / 全列を描画するため、DOM で次を検証できます。
const { container } = render(<SpreadsheetGrid rows={rows} columns={columns} />);
// 行・セルの描画
expect(container.querySelectorAll('.ssg-body-row')).toHaveLength(rows.length);
// getRowClassName / cellClassName で付与したクラス
expect(container.querySelectorAll('.ssg-body-cell.my-warn-cell')).toHaveLength(2);状態クラスの一覧(公開契約)は SpreadsheetGrid props の「スタイリング用の状態クラス」を参照してください。
偽のタイマーを使うとき
dateSet の相対プリセット(今日 / 今月 / 過去 30 日 / カスタム)を列フィルターに掛けている間、グリッドは日付の変わり目を見張るタイマー(最大 1 時間ごとに張り直す)を持ちます。vi.useFakeTimers() の下で vi.runAllTimers() を呼ぶとこのタイマーが尽きないため、上限回数で打ち切られます。時刻を進めたいときは vi.advanceTimersByTime() / vi.runOnlyPendingTimers() を使ってください(相対プリセットが掛かっていなければタイマーはありません)。