How to check with react testing library that the rendered element is of type 'div'?

Question

I have checked this answer: Check HTML element type for result of React Testing Library's getByText? but unfortunately, div does not have a default role assigned (as can be checked here: https://www.w3.org/TR/html-aria/#docconformance)

So my below test fails:

  it('should render as div when the "as" attribute is passed with a value of "div"', () => {
    render(<Button label={testText} as='div' data-testid='test-button'/>)

    expect(screen.getByTestId('test-button')).toBe('div')
  })

I am not able to find a query which would be good for testing this. Can anyone help?

Why not using data-testid attribute and query the element by screen.getByTestId(xxx)? — Lin Du
– Lin Du, Commented Feb 17, 2022 at 4:02

Pedro Satin · Accepted Answer · 2022-10-26 13:12:59Z

3

To check the element type you could access the nodeName from any HTMLElement returned by the screen.getByTestId.

https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName

You could try something like that:

  it('should render as div when the "as" attribute is passed with a value of "div"', () => {
    render(<Button label={testText} as='div' data-testid='test-button'/>)
    
    expect(screen.getByTestId('test-button').nodeName.toLowerCase()).toBe('div')
  })

answered Oct 26, 2022 at 13:12

Pedro Satin

564 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paolo Biavati Over a year ago

Great! in typescript I had to change just a little but is the same: expect(screen.getByTestId('test-button').nodeName.toLowerCase()).toBe('div');

Collectives™ on Stack Overflow

How to check with react testing library that the rendered element is of type 'div'?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related