3

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
  • 1,305
  • 3
  • 18
  • 31

2 Answers2

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

AKFourSeven
  • 1,305
  • 3
  • 18
  • 31
Karthik R
  • 5,523
  • 2
  • 18
  • 30
  • 3
    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... – AKFourSeven Oct 15 '19 at 09:35
  • I already explained how to get it.. Did you notice it? Use query selector from container above. – Karthik R Oct 15 '19 at 10:47
  • @AKFourSeven Did this resolve the question, if so, please mark as answer. – Karthik R Oct 15 '19 at 10:48
  • 3
    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 ! – AKFourSeven Oct 01 '20 at 11:19
  • @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 because it does not render data-testid='test-input' to the span element – OWS Dec 16 '22 at 15:52
0

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 }}>
dev
  • 1