Ant Design and React Testing Library

Question

I have recently started using Ant Deisgn and really enjoyed working with it.

However I seem to have stumble upon an issue that I am having a hard time solving.

Using react-testing-library for tests, I am having troubles with testing some Ant Design component.

One of the reason is that for some unknown reason some components (e.g. Menu, Menu.Item, Dropdown, etc) do not render the custom attribute data-testid thus making impossible to target a specific element of the DOM.

This makes the tests less performant and accurate.

Did some else stumble upon the same issue ? How did you go about solving this ?

Is there something that can be done by the Ant Design team about this issue ?

AKFourSeven · Accepted Answer · 2019-10-15 10:20:13Z

2

The data-testid attribute is configurable to whatever attribute you want.

https://testing-library.com/docs/dom-testing-library/api-configuration

Also, as long as the library you choose, has ID attribute, you çan do following :

  const {container} = render(<Foo />) ;
  const button = container.querySelector('#idValue'); // returns react element
  fireEvent.click(button);

P. S: mobile edit. Pls ignore formats

edited Oct 15, 2019 at 10:20

AKFourSeven

1,3254 gold badges18 silver badges33 bronze badges

answered Oct 2, 2019 at 9:36

Karthik R

5,8162 gold badges23 silver badges32 bronze badges

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

5 Comments

AKFourSeven Over a year ago

I know that data-testid is configurable the issue is not the configuration fo the data-testid. The issue is that come components from the Ant Design library will render the data-testid and some other won't. I find that very strange and I would like to know why or what can be done instea...

Karthik R Over a year ago

I already explained how to get it.. Did you notice it? Use query selector from container above.

Karthik R Over a year ago

@AKFourSeven Did this resolve the question, if so, please mark as answer.

AKFourSeven Over a year ago

I forgot about this post, like I said this wasn't the issue, the id is never passed down to the rendered component, so no amount of data-test-id, or whatever other name you give to the id would change that. There was actually no direct solution and we stopped using Ant Design anyways. However, some people find your answer relevant (because normally that is exactly what should be done) so I'll mark it !

OWS Over a year ago

@AKFourSeven you are right, this is not the best solution, it may apply on some cases, but not on all antd components. For example, I cannot test a <Skeleton.Input data-testid='test-input'> because it does not render data-testid='test-input' to the span element

dev · Accepted Answer · 2022-10-13 13:46:27Z

Today, I had the same issue with testing a label of an Ant Design Desciptions.Item with the react-testing-library.

I figured out that the label was in a <span> element, so I moved it into a <div> element which solved my problem.

Before:

<Descriptions.Item
     data-testid='test-label-of-descriptions-item-failed'
     label={'some label'}
     labelStyle={{ ...FONT_SMALL }}
     contentStyle={{ ...FONT_SMALL }}
     style={{ ...DESC_ITEM }}>

After:

<Descriptions.Item
     label={ <div style={{ display: 'inline-block' }} data-testid='test-label-of-descriptions-item-worked' >'some label' </div> }
     labelStyle={{ ...FONT_SMALL }}
     contentStyle={{ ...FONT_SMALL }}
     style={{ ...DESC_ITEM }}>

Collectives™ on Stack Overflow

Ant Design and React Testing Library

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related