デバッグ

自動ロギング

テストケースで使用している`get`または`find`呼び出しが失敗した場合、`container`（DOM）の現在の状態がコンソールに出力されます。例えば

// <div>Hello world</div>
getByText(container, 'Goodbye world') // will fail by throwing error

上記のテストケースは失敗しますが、テスト中のDOMの状態が出力されるため、以下を確認できます。

Unable to find an element with the text: Goodbye world. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Here is the state of your container:
<div>
  <div>
    Hello world
  </div>
</div>

**注**: DOMのサイズが非常に大きくなる可能性があるため、環境変数`DEBUG_PRINT_LIMIT`を使用して、出力されるDOMコンテンツの制限を設定できます。デフォルト値は`7000`です。設定した長さまたはデフォルトのサイズ制限のためにDOMコンテンツが切り捨てられた場合、コンソールに`...`が表示されます。テスト実行時にこの制限を増やす方法は次のとおりです。

npm
Yarn

DEBUG_PRINT_LIMIT=10000 npm test

DEBUG_PRINT_LIMIT=10000 yarn test

これはmacOS/Linuxで動作します。Windowsでは別の方法が必要です。両方で動作するソリューションが必要な場合は、`cross-env`を参照してください。

**注**: テストがノード環境で実行されている場合、DOMの出力はデフォルトで色付けされます。ただし、デバッグのために出力がログファイルに書き込まれる場合など、色をオフにしたい場合があります。環境変数`COLORS`を使用して、強制的に色付けをオフまたはオンにすることができます。例えば

npm
Yarn

COLORS=false npm test

COLORS=false yarn test

これはmacOS/Linuxで動作します。Windowsでは別の方法が必要です。両方で動作するソリューションが必要な場合は、`cross-env`を参照してください。

`prettyDOM`

`pretty-format`上に構築されたこのヘルパー関数は、ノードのDOMツリーの読みやすい表現を出力するために使用できます。これは、例えばテストのデバッグ時に役立ちます。

これは次のように定義されています。

interface Options extends prettyFormat.OptionsReceived {
  filterNode?: (node: Node) => boolean
}

function prettyDOM(
  node: HTMLElement,
  maxLength?: number,
  options?: Options,
): string

出力するルートノードと、結果の文字列のサイズが大きくなりすぎた場合に制限するためのオプションの追加パラメータを受け取ります。最後のパラメータでは、フォーマットを設定できます。リストされているオプションに加えて、`pretty-format`のオプションも渡すことができます。

デフォルトでは、`<style />`、`<script />`、およびコメントノードは無視されます。出力に含めたいすべてのノードに対して`true`を返すカスタム`filterNode`関数を渡すことで、この動作を設定できます。

この関数は通常、デバッグのためにテスト中にDOMツリーを一時的に出力するために`console.log`と一緒に使用されます。

import {prettyDOM} from '@testing-library/dom'

const div = document.createElement('div')
div.innerHTML = '<div><h1>Hello World</h1></div>'
console.log(prettyDOM(div))
// <div>
//   <h1>Hello World</h1>
// </div>

この関数は、上記で説明した自動デバッグ出力にも使用されています。

`screen.debug()`

便宜上、`screen`は`debug`メソッドも公開しています。このメソッドは基本的に`console.log(prettyDOM())`のショートカットです。ドキュメント、単一の要素、または要素の配列のデバッグをサポートします。

import {screen} from '@testing-library/dom'

document.body.innerHTML = `
  <button>test</button>
  <span>multi-test</span>
  <div>multi-test</div>
`

// debug document
screen.debug()
// debug single element
screen.debug(screen.getByText('test'))
// debug multiple elements
screen.debug(screen.getAllByText('multi-test'))

`screen.logTestingPlaygroundURL()`

testing-playgroundを使用したデバッグのために、`screen`はこの便利なメソッドを公開しており、ブラウザで開くことができるURLをログに記録し、返します。

import {screen} from '@testing-library/dom'

document.body.innerHTML = `
  <button>test</button>
  <span>multi-test</span>
  <div>multi-test</div>
`

// log entire document to testing-playground
screen.logTestingPlaygroundURL()
// log a single element
screen.logTestingPlaygroundURL(screen.getByText('test'))

`logRoles`

このヘルパー関数は、DOMノードのツリー内のすべての暗黙的なARIAロールのリストを出力するために使用できます。各ロールには、そのロールに一致するすべてのノードのリストが含まれています。これは、getByRoleを使用してテスト中のDOMをクエリする方法を見つけるのに役立ちます。

import {logRoles} from '@testing-library/dom'

const nav = document.createElement('nav')
nav.innerHTML = `
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>`

logRoles(nav)

結果

navigation:
<nav />
--------------------------------------------------
list:
<ul />
--------------------------------------------------
listitem:
<li />
<li />
--------------------------------------------------

自動ロギング​

`prettyDOM`​

`screen.debug()`​

`screen.logTestingPlaygroundURL()`​

`logRoles`​

自動ロギング

`prettyDOM`

`screen.debug()`

`screen.logTestingPlaygroundURL()`

`logRoles`