Unit Testing tips with modern React and Enzyme
Hooks, context, redux, these are a few of the things frontend developers who use React know of quite well. They’re tools we use to make development easier but they can sometimes be quite difficult to test. Through testing multiple sites I’ve found a few techniques that have helped me test some of these difficult things more easily.
Why Enzyme?
There are lots of testing utilities out there for React and to be honest, it doesn’t really matter which one you use. I subscribe to Kent Dodds’ mantra of testing use cases over code which boils down to testing the ‘observable effect’ the code has for the end-user instead of testing that every single line of the code that has been implemented. So whether it’s ReactTestUtils, react-testing-library, Enzyme or your own custom utilities, as long as you’re able to simulate browser events it doesn’t really matter what you use. I’ve chosen Enzyme because that’s what I’m most comfortable with.
Basic test setup in Enzyme
This isn’t a beginners tutorial on how to use Enzyme, the setup is fairly tedious on new React apps and there are many great tutorials out there to help you get started.
The app we’re going to be testing is a simple questionnaire which gets data from an external JSON file. You can go through…
