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 ?

Answer 1

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