使用React测试库时，我如何输出当前渲染的组件?

Question

我试图了解是否从渲染组件中删除了一些DOM。我如何把当前组件的HTML输出到VSCode控制台来看看实际呈现的是什么。下面是我的简单测试。我想这样写:console.log(renderer.<page content>)

import { render, fireEvent, waitForElementToBeRemoved } from '@testing-library/react'

it ('test', async () => {
const renderer = render(<MyComponent />)
fireEvent.click(renderer.getByText('Click to Hide'))
await waitForElementToBeRemoved(() => renderer.getByText('text to hide'))
})

Answer 1

你可以这样做:

import { render, fireEvent, waitForElementToBeRemoved, prettyDOM } from '@testing-library/react'

it ('test', async () => {
const renderer = render(<MyComponent />)
...
console.log(prettyDOM(renderer.container.firstChild))

Answer 2

screen.debug()是一种快速的方法。大多数测试通常从导入屏幕开始。

为了方便，屏幕还公开了除查询。这个方法本质上是一个快捷方式console.log (prettyDOM())。它支持调试文档，一个元素，或元素数组。

文档