Unit Testing With Jest in Javascript, Part II — React
In part one of “Unit Testing with Jest in Javascript” we discussed the basics of unit testing and some of the basic ways to implement tests to a vanilla Javascript project, but what if you are using a React framework? When you want to test some of your React components using Jest unit testing, there are a few extra steps that should be taken to ensure proper testing is completed. I would suggest reading part one to the series here before continuing on so that you get the basic knowledge and learn how to set things up before moving forward with this article.
Set Up
In part one we discussed how to set your environment up for testing. The same rules apply, but you will also need to install Enzyme. Enzyme gives you the ability to simulate rendering your application, without actually having to render it. To install both Jest, Enzyme, and the Enzyme adapter for React version 16 at the same time, you can run the following code in your terminal: npm i --save-dev enzyme enzyme-adapter-react-16. When you run this line in the terminal you should have a file called setupTests.js that was created. You will then need to place some code in this file that will configure Enzyme to your React adapter based on which version you are using. This code, shown in the photo below, can be found in the Enzyme docs previously linked. This is a file that Enzyme will search for when running tests.
Mocking Components
When unit testing in React, we want to be able to create mock data that can be used to test out components. We do not want to have to pull this data from the back end, because at that point, it would not be considered a unit test. So we get around this, by creating mock data using enzyme. Enzyme has three different rendering methods: shallow, full DOM, static render markup. Static render markup is actually imported from a third party, and full DOM requires a full DOM API to run it’s tests because it must have a browser-like environment. You can look into these two on your own, but today we will be discussing some of the capabilities provided through shallow rendering. Shallow rendering allows you to test your components as a whole and helps to ensure you are following proper separation of concerns.
To set up your test file, we will follow the same naming conventions mentioned in part one. Then in your test file we will need to import React and shallow, as well as the function being tested.
Then we want to create a variable with mock data to be tested. This should mimic the kind of data this function would receive from the backend.
After you have that set up you can get into writing your test case. We will use the global method, describe. It takes in two arguments, a description of your test sweet and a callback function. Within the callback function we will place our individual test cases. This is similar to writing your test case for basic unit test, but the syntax is a little different and we need a wrapper variable that will mock the component being tested. This wrapper variable will be equal to the shallow render function, which takes in a component as an argument. We also have matchers that are provided to us for shallow rendering. In the case below we are using “.toMatchSnapshot()”. This is a matcher provided to us by Jest. When using this matcher, the first time the test is ran, Jest creates a file with a snapshot of the HTML code. Every time after, Jest will compare the test case to the snapshot file that was created. You want to be careful with this matcher because if the implementation of the code changes, you must be sure that the snapshot file gets updated, or else your test will fail.
The individual tests within our describe method will be “it” methods. The “it” method, again, takes in a description of what this test is checking for, and a callback function which will contain our wrapper variable and the matcher that will be used.
Now let’s say we have another component that renders our police components. We want to make sure that this parent component renders the correct amount of child components. We can do so, by creating a test file for the parent component, then we will import the parent file and the child file into this test file.
Then we will create our describe method which will describe our Polices component. We will create an “it” test case that will test if the proper amount of Police components are created. First we want to create out mock Polices data, in this case we have an array of Police objects. Then we create our wrapper variable that holds our shallow render method, taking in a Polices component as an argument. Next we implement our matchers. For this test case we are using two matchers. So we have our toBe() matcher that will check to see if the expected argument matches the test case argument. Our expected argument, in this case, takes our wrapper variable and uses the .find() enzyme matcher to see find when the Polices component creates Police components. This returns a shallowWrapper, which is a wrapper housing all of the new nodes. We call .length on this new wrapper to get a count of the number of nodes and we are comparing that value to the length of our mockPolices variable data that was created. The two should be the same value if it is being rendered properly.
Some other helpful enzyme matchers that could be used are:
.props() — returns the props of the wrapper node that you call this matcher on.
.get(index) — returns the node at the given index.
.parent() — returns the parent node of a specified node within your wrapper variable. (It will not be able to find a parent node that is not included in the shallow render)
These are just a few of the enzyme matchers. A complete list of the shallow render matchers can be found here. To run the tests you can run “npm test” in the terminal and the tests will run every time a change is saved. The tests will show the same as was shown in the previous article. Avoid the red, and chase the green!
This was just a small dip into testing within your React app with Jest. I highly suggest you look into the docs for both Enzyme and Jest to get familiar with other ways to implement tests within your project. But until next time, Happy Coding/Testing!
