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: 
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 :

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

```

P. S: mobile edit. Pls ignore formats
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 }}>

```