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')
})