使用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()) 的快捷方式。它支持调试文档、单个元素或元素数组。

文档