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
– johnny peter, Commented Feb 28, 2020 at 5:52
@johnnypeter ahh so I was viewing it for something it is not - thanks for the clarification! — toobs
– toobs, Commented Feb 28, 2020 at 18:53

toobs · Accepted Answer · 2020-02-28 19:02:45Z

1

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.

answered Feb 28, 2020 at 19:02

toobs

842 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Selecting child component with react-testing-library

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related