0

Let's say I want to check this component render its child with the right initial props

const { container } = render(<Header/>)

Where is

<div> <SomeChild custom-prop=innerHeaderVariableLikeInitialState /> </div>

Before I can try to check anything when I run my test I get the prop 'custom-prop' is marked as required but it's value is undefined (I use prop types) So it means the react-testing-library doesn't initialize its child componenent ? How to manage this ? I feel I'm not taking this with the right angle

Thanks

François Richard
  • 6,111
  • 10
  • 34
  • 66

1 Answers1

0

What you're looking for is probably container.firstChild.

However, testing for the presence of certain props goes against the "don't test implementation details" approach of react-testing-library. Really, there's no way to do that with the rendered output, as it's all DOM elements, not React components. Instead, consider what user-facing elements you could look for, like text, accessibility labels, etc. How can you verify the user is seeing what you expect them to see?

dangerismycat
  • 556
  • 2
  • 10
  • 15