调试

自动日志记录

当你在测试用例中使用的任何 `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 />` 和注释节点。你可以通过传递一个自定义 `filterNode` 函数来配置此行为，该函数应该对希望包含在输出中的每个节点返回 `true`。

此函数通常与 `console.log` 一起使用，以便在测试期间临时打印出 DOM 树以进行调试

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`