Do your tests fail even with a little change of code? Do you mock heavily? Are you testing function calls and component state all the time? Well, you probably doing it wrong.

We build spectacular apps, check auriosoftware.com

I have read a lot of articles about how to test React components and most of the time I felt like there should be a better way. In this article, I would like to address some common issues with help of Jest and Enzyme.

So let's begin with the most important advice.

Test behavior, not implementation details!

Look at the example below.

At first, it seems ok. I have an email input and I want to test “When I change the email input the new value will appear in my state”.

The problem is that you are testing implementation details, specifically the internal component state. And when you couple your tests with implementation details, your tests become fragile.

Look at the property “email” in the state. Whenever you rename that property or refactor your component, your test will fail!

If you are asking “But how the hell do I know whether this input works if I don't test that” let me show you that you actually don't need this test.