I've been recently asked this question in an interview and this was my answer:

Pure unit tests and shallow rendering idea

For ReactJS in particular, there are many testing libraries that allow you to do shallow rendering (enzyme for example), that means that if you have a composed component, the test won’t actually render that inner component so you can’t make assertions on that. If you want to cover those internal components you need to write specific tests for each part.

For example:

<div>
   <Form>
      <Username />
      <Email />
   </Form>
</div>

With this structure, if you want to write a test for this component, the first div will be rendered but the custom Form component won’t, neither the Username and Email components, they will be mocked. You will have to test them individually, which follows the pure unit testing idea, but you can’t ensure that the components work ok together.
If you follow this pattern, you will soon end up with a set of pure unit tests that are really confusing and hard to follow.

Tests should resemble the way the software is used. Even though is not pure unit tests (technically you can call it integration test), at the end of the day the only thing that matters is that you can ship your app with confidence.

Resources:

• @kentcdodds
• Testing React Applications, v2

Image by Gerd Altmannfrom Pixabay