[React Testing] Debug the DOM State During Tests using React Testing Library’s debug Function

While you’re writing your tests it can be helpful to see what the DOM looks like. You can do this with React Testing Library’s debug function which will log a formatted and syntax highlighted state of the DOM at the time it is called.

 

const { getByLabelText, debug } = render(<FavoriteNumber />)

 

Using it:

test('renders a text input with placeholder Search beer', () => {
  const { getByLabelText, debug } = render(<FavoriteNumber />)
  const input = getByLabelText(/favorite number/i)
  debug(input) // output input dom
  debug() // output whole component dom
  expect(input).toHaveAttribute('type', 'number')
})