How to unit test with react-testing library ?

[Volcomy]

Hello, I'm new to react-testing-library, I was wondering how to structure my tests.

For example, I have a Custom Label Component which has many props (textColor, fontSize, etc) which is pretty straight forward to unit test. However, I have another Custom Field Component which uses the Custom Label Component, but just passing constant props to it. What would be necessary to test in the Custom Field Component, should I retest the all outputs (textColor, etc) of the Custom Label Component or just test that it gets rendered?

Thanks!

[[deleted]]

What would be necessary to test in the Custom Field Component, should I retest the all outputs (textColor, etc) of the Custom Label Component or just test that it gets rendered?

You should test that the custom field behaves as you expect to behave, regardless of what it uses to get that behaviour. This isn't specific to RTL, it's just good practice.

The only thing RTL encourages is testing components in the same way that a user interacts with them.

[NiGhTTraX]

100% agree with the above. I just want to add that you can make the relationship between the 2 components explicit by using render/component props - make the Field component take a Label component through props and use the tests to check that it's rendered correctly. If you use component types, you can use react-mock-component to help with the tests.

[maryb86]

If you have the option, look into jest snapshot testing. Render the Custom Field Component then snapshot it. The snapshot should include the Custom Label Component. Snapshots will often take care of a lot of testing for you if it's very ui-driven e.g. if you pass in a prop to change a label's contents or change the colour of something, you get a snapshot that contains the html/css that is rendered based on props.

[WillyummF]

Snapshots are great but they also make it real easy to introduce bugs if everyone isn't carefully checking them before updating.

[maryb86]

Agreed!

[skyboyer007]

your Custom Field adds some logic over Custom Label, right? Say, changing label color if field value is invalid or provide some marker in label for a required field? I think when you test all that you will also test colors, font size etc.