Enzyme React
Testing a React component using Jest and Enzyme. Let’s imagine for a moment a framework that allows you to test React components in an easy and quick way. Also, imagine that it brings a coverage code report. And all this without the need to install any extra features. Who wouldn’t want something like this to test their code? Well, let me introduce you to the wonderful framework called Jest.
What is Jest?
Jest is a testing framework created by Facebook to test JavaScript code, in particular for React apps. But you must be wondering, why is it a good option to test your app using this framework? Let’s mention some of the incredible benefits Jest has, and that will definitely erase your concerns.
- Setup – It’s really easy to set up on your JavaScript solution.
- Configuration – Jest is already configured for “create-react-app” script. Just one command and you are ready to start coding your tests.
- Works with TypeScript – It works with any JavaScript compiler and also integrates with Babel and typescript.
- Good performance – Jest has the capability to run tests in parallel.
- Snapshots – Jest includes a snapshots feature to simplify your tests.
- Mocking library – Jest provides the ability to mock any function or component.
- Coverage report – Jest includes a useful coverage feature.
Another way of testing React components is using Enzyme.
What is Enzyme?
Enzyme is a JavaScript testing utility created by Airbnb that makes it easy to assert, manipulate and traverse your React components outputs thanks to its great API.
In other words, Jest and Enzyme are your best allies when you need to test a React application; so, let’s take a look at the power of Jest and Enzyme with an example.
First of all, we need to create our React component to test it. Let’s create a simple component called “MyFirstComponent” (it’s a good practice to capitalize the first letter of the class) which will render a title and a button. The component will have a prop to set the title text and a state to control the button behavior. The title’s prop will be set as “Hello World” by default, and the state button will be set as “enable” by default. So you can click the button and once you press it, it will become disabled.
Now it’s time for a Unit Test:
What do you have to test in a Unit Test?
A good approach to achieve this task could be thinking about the essential aspects of the component. In other words, what do you expect to be rendered? Which things can modify the render? Do you have callbacks? What action should trigger the callbacks? Unfortunately, there is no rule for Unit Testing, especially because a component can be as complex as you can imagine. But the good news is that I can give you some tips to make your life easier:
- Check the component’s children elements matches what you expected.
- Check that “number” and “className” of the component’s children matches the values you expected.
- Check the component has the proper props.
- If some component’s events trigger a prop’s function, check that the event dispatches the particular function.
- Check component’s state matches what you expected.
Now, let’s try to apply those tips to our example. I’ll be presenting Enzyme’s API functions as we need to use them.
The first step will be to instantiate the component and check the default state and see if it is rendering what we expect. In this case, we will instantiate without set “title” prop, so it should render a main <div> with a “container” className, and also expect a <h2> with “Hello World” text and a <button> enabled. To do that, we will use the shallow function (Enzyme) to instantiate and test the component as a unit, and to ensure that you are focusing only on the component itself and not on its child component.
Once we have the component wrapper, we will use the find function (Enzyme) to get the <div>, and we’ll check that it has the appropriate className. In Jest we use the expect function to set the element that we want to analyze, and we can use many functions like toHaveLength, toEqual, toMatchObject, among others to assert what we expect. In this case, we will use the toHaveLength function to check if the <div> is rendered and toEqual to assert the className.
Next, we will check that the <h2> tag exists and renders the correct text, as we did for the <div>.
Finally, we will check that the <button> renders with the proper text and without the “disabled” prop. We’ll also check that the onClick action changes the component’s state. We will use the same approach that we’ve already used for the first part, and for the second part we will use the state function (Enzyme) to access the state value, and the simulate function (Enzyme) to trigger the onClick event.
Lastly, we will instantiate a new component with a “title” prop, and we expect it to render <h2> text with the new prop value.
Enzyme React Conclusion
I hope that if you are reading this, it’s because you are interested in continuing to learn about Jest and Enzyme. As I’ve mentioned, there is no rule to do Unit Tests but I’ll be very proud if next time you code a test for your React app, you at least think about using some of this.
If you have any questions, I recommend that you take advantage of the vast official documentation available for both frameworks.
