CODEWITHSUNDEEP
reactjsunit-testingtestingantdreact-testing-library
AKFourSeven
AKFourSeven

Reputation: 1325

Ant Design and React Testing Library

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 ?

Upvotes: 3

Views: 10657

Answers (2)

dev
dev

Reputation: 1

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

Upvotes: 0

Karthik R
Karthik R

Reputation: 5786

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

Upvotes: 2

Related Questions