reactjs - How to test the value of the props of react component rendered using react testing library

Question

<Abc> 
  <Xyz data-testid="comp-xyz" prop1={pqr}/>
</Abc>

Here if Abc is a class component and we are testing Abc using react testing library, then is there a way to test the value of prop1 ?

const {getByTestId} = render(<Abc />)

Now I grab the component Xyz using testId getByTestId("comp-xyz")

Can I get props of this component something like this ? getByTestId("comp-xyz").props() ?

Answer 1

No. The idea of ??the testing-library is to encourage you to test the user's interaction with the screen. Creating tests that depend on component data, such as props and state, does not help with this type of test, because users do not interact directly with the props, but with the elements rendered through them.

Another point is that tests that depend on implementation details are fragile tests, that is, any change in the implementation, which does not change the behavior of the component, can fail its testing generating a 'false-negative'.

In this documentation link they explain it better: https://testing-library.com/docs/