Unit test a React Render Prop component

Share this video with your friends

Send Tweet

In this lesson, I use Enzyme and Jest to unit test a Counter Render Prop component. Writing integration tests are perfect for components that consume a Render Prop component. Likewise, unit tests are important to write for the Render Prop component itself, as you can test each individual unit that makes up the component.

Mykolas Mikelevicius
~ 7 years ago

There is no point of testing implementation details, that's why I think asserting the state value is not a good idea.

Steve
~ 7 years ago

Thanks for the lesson. I found it very useful :)

Andrew Del Preteinstructor
~ 7 years ago

There is no point of testing implementation details, that's why I think asserting the state value is not a good idea.

I agree in some cases Mykolas. My example is kind of contrived because all of the methods just update the state. The main point for unit testing a Render Prop (or component in general) is to test all of the methods as units. Some of them may not effect state and could contain advanced logic you want to make sure is correct.

I have Render Prop components that offer many different methods and my consumer components only take advantage of a few of them at a time, so when I write integration tests I am usually only testing a few of those methods by interacting someway with the consumer component. Unit testing the Render Prop component itself is good because you can test every unit in isolation.

Testing this stuff has a wide spectrum so everyone has their thoughts. I appreciate yours! thanks for watching.

Andrew Del Preteinstructor
~ 7 years ago

Thanks for the lesson. I found it very useful :)

Thanks for watching Steve! Glad it helped!