Jest + Enzyme unit testing in React

Talking to my peers and friends, nobody really likes to write unit tests for frontend. And I can see why. I saw a few tutorials on how to do them, but most of the time I was confused. Mounting a big chunk of the app with all the child components, massive test setups, not thorough test cases or very vague test asserts did not strike me as correct unit testing. To me, in React, there is only one unit to test -> component. If there is a parent component that consists of multiple children, those are different units and deserve separate attention. By testing each component separately and with trial and error method I finally got myself a method, how to test components with strict rules, that will lead to clear, complete and very isolated unit tests.

First steps

So let’s dive right into the testing and see how I do it. We will test a very simple component that loads some list and allows us to clear it, or refresh it.

Let’s test this app!

Note: loadData is function that load data from some api