DOM Testing Libraryとは？利用者視点のDOM testing utility

ページ内ナビ

概要

DOM Testing LibraryはDOM nodeを対象にした軽量testing utilityです。component instanceや内部実装へ寄りかからず、利用者が画面上の要素を探す方法に近いqueryを使うことで、refactorに強いUI testを作る方針を取ります。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-06

主な特徴

JSDOMまたはbrowser上のDOM nodeを直接テストする

framework固有のcomponent instanceではなくDOM nodeを対象とし、user-visibleな要素へqueryして期待するUIを検証します。

出典：[1]

framework wrapperの基盤として同じtesting方針を共有する

React、Vue、Angular等では対応wrapperを使えますが、DOM Testing Library自体がuser-centric queryの基盤になります。

出典：[1]

向いている用途

実装詳細ではなく利用者から見える振る舞いを検証したい場合に向く

component内部のmethodやinstanceに依存するtestを減らし、markupのrefactor後も利用者向けの振る舞いが維持されているかを確認したいUI testに適します。

出典：[1]

導入前の確認

v10.4.2系のpackage metadataではNode.js 18以上を前提にする

導入時はtest runnerやJSDOM等の周辺環境も含め、対象Node.js versionとの互換性を確認してください。

出典：[2]

参考にした公式資料

[1]DOM Testing Library v10.4.2 README(2026-10-06)
[2]DOM Testing Library v10.4.2 package metadata(2026-10-06)
[3]DOM Testing Library v10.4.2 release(2026-10-06)

編集部からの補足

component instanceではなく利用者から見えるDOMを検証するため、refactorで内部実装が変わっても振る舞いを守るtestを作りたい場合に向きます。v10.4.2系のpackage metadataはNode.js 18以上を前提にします。

3ステップで試す

1
ソースを取得
git clone --depth 1 https://github.com/testing-library/dom-testing-library.git
2
リポジトリへ移動
cd dom-testing-library
3
公式手順を確認
READMEのInstallation / Quick Start / Getting Startedにある公式コマンドを続けて実行してください。
find . -maxdepth 1 -iname 'README*' -exec sed -n '1,220p' {} \; -quit

公式READMEで確認

成長

成長の推移 · 直近30日

3,335 Stars

推移データを蓄積中です。

Built with

JavaScript

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

javascript
testing

Stars: 3,335
Forks: 473
Watchers: 30
Open Issues: 132
所有者種別: Organization
主要言語: JavaScript
ライセンス: MIT
リポジトリ最終更新: 2026/09/15

概要

特徴と向いている用途

主な特徴

JSDOMまたはbrowser上のDOM nodeを直接テストする

framework wrapperの基盤として同じtesting方針を共有する

向いている用途

実装詳細ではなく利用者から見える振る舞いを検証したい場合に向く

導入前の確認

v10.4.2系のpackage metadataではNode.js 18以上を前提にする

参考にした公式資料

3ステップで試す

ソースを取得

リポジトリへ移動

公式手順を確認

成長

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHub Topics

関連情報

あわせて探訪