Selecting child component with react-testing-library

Question

I am able to select the child component easily with Enzyme but I would like to use react-testing-library. Suppose I have a component that returns the following:

return (
  <DropdownButton>
    <Dropdown.Item data-testid='x' key={id} />
  </DropdownButton>
)

As of now in a test I can easily select the Dropdown.Item with const item = wrapper.find(Dropdown.Item) but how come I cannot select via const { getByTestId } = render(<MyComponent />) and const item = getByTestId('x') using react-testing-library and data-testid?

Should I be using a different query?

Testing-library is built around asserting the end dom rather than components. What you want is against the principles of testing-library testing-library.com/docs/guiding-principles — johnny peter
@johnnypeter ahh so I was viewing it for something it is not - thanks for the clarification! — toobs

toobs toobs · Accepted Answer · 2020-02-28T19:02:45

As per the comment above, react-testing-library "...should deal with DOM nodes rather than component instances, and it should not encourage dealing with component instances". I was approaching this with the wrong view.

Thanks to johnny peter for the clarification.

Selecting child component with react-testing-library

1 Answers