How can I output the current rendered component when using the React testing library?

Question

I'm trying to understand whether or not some DOM removed from rendered component. So how do I do current component HTML output into VSCode console just to see what actually rendered. Here is my simple test. I want to do something like: 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

You can do something like that:

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() is a quick way to do it. Most tests usually have screen imported to begin with.

For convenience screen also exposes a debug method in addition to the queries. This method is essentially a shortcut for console.log(prettyDOM()). It supports debugging the document, a single element, or an array of elements.

Docs