Tools of the Trade: React Testing with Enzyme and Jest

Jon Rosado
Jun 27, 2018 · 7 min read

As I’ve grown as a programmer, I’ve learned the importance of writing clean and readable code. When things inevitably go wrong and debugging halts your progress, having code that you can easily follow goes a long way in minimizing the frustration of spotting what’s wrong. Sometimes, however, writing clean code when you’re in a groove can prove to be easier said than done. This is where testing can come in handy and, thankfully, the philosophy of Test-Driven Development (TDD) can help keep you on track and make your life easier in the end.

To briefly explain, TDD is the act of writing tests cases for the results that you are expecting prior to writing your code. This, in essence, will force you to write your code to these expected outcomes, potentially minimizing bugs in the process.

There are several types of tests as well:

  • unit tests — tests which focus on one particular job or aspect of your code base
  • integration tests — testing how various elements work in conjunction with one another
  • end-to-end tests — testing your app in a browser environment

Today, I will focus on Front-end React unit testing, as it can feel a little bit more abstract to conceptualize and implement. I will also be focusing on two of the more popular front-end testing tools: Enzyme and Jest. We use some simple React components for examples to take a brief look at how these tools work both separately and in unison with one another, and we will write some unit tests to see how they look. First, it would help to understand what each of these tools are.

Enzyme

Enzyme, according to its documentation, is a Javascript Testing utility. It is designed for ease of assertion, manipulation, and traversal of your React component’s output. In essence, it is a library that wraps around React’s native React TestUtils, among other things, to make it easter to write unit tests for your app. If you are using Node, then you can simply install enzyme from the command line:

Set up with Mocha and Chai

It is not, however, a unit testing framework in and of itself. With this being the case, Enzyme tends to require several other frameworks to be present in order to fully leverage its abilities. Often times, you will see popular external test runners (like mocha) and assertion libraries (like chai) included in the project. Also, with the most recent update to Enzyme 3, you will need to install an enzyme-adapter to configure Enzyme to work with whichever version of React you are currently running:

Once you have all of the pieces installed, you need to configure Enzyme to work with your project by creating a configuration file with the following:

Running Enzyme Tests

After all of the configuration is handled, we can move forward with looking at how to build a test. Lets say you were building a simple component to render a greeting to a visitor. In order to approach this from a TDD workflow, we could go about outlining what we are looking for within the component:

The describe function is used to essentially give a heading to your test suite, whereas the it function defines the individual tests within your suite. The expect function provided by chai defines the result that the test is expecting to see from your code. Within the expect function, we can see that Enzyme uses jQuery-like targeting to pinpoint paragraph (p) tags within the component. We can use text function to check what text is contained within the p tags, and compare it with the to.equal function’s expected result.

Enzyme’s shallow function is really handy as well, as it allows for a shallow rendering of whichever component that you pass to it. Note, however, that if our Hello component had any nested components within it, then those components would NOT render by using shallow. That is where the mount and render functions that we configured before come into play.

Now that we’ve outlined the results that we are looking for, we can write a component that will pass these tests:

Wonderful! As you can see, Enzyme is a useful testing utility despite the bloat that comes with requiring many external modules. One way to reduce some of the bloat associated with using Enzyme is to replace mocha and chai and with one convenient framework- Jest.

Jest testing

Jest is described as a unit testing framework to test services and React applications. Jest is a fairly easy framework to implement. So easy, in fact, that if you initialize a React project using create-react-app:

then your project will already come preinstalled with and able to use Jest. It’s primary focus is to define tests, make assertions, and create mocks, making it a one-stop solution to working with Enzyme. You could, however, also run specific types of tests with Jest alone:

Notice how Jest uses the describe function to give an overall test suite description as well, while defining individual tests using the test function.

Describing Jest Snapshots

One of the most powerful features of Jest is it’s ability to take snapshots. This mechanism of snapshot testing is unique in that it allows you to copy and stringify a representation of the virtual DOM of your project. With the above code, we are taking a snapshot of the virtual DOM, and the resulting snapshot would look like this:

By saving this snapshot, you can run future snapshots against the preserved one to see if there were any changes to the DOM. If anything is different, your test will fail, indicating that there is either a bug in your code, or that your code base has changed and that your snapshot needs to be updated. If the latter is true, you can easily update your snapshot from within the console where your failed test is displayed by entering the ‘u’ key. This will replace the old snapshot with the new one, allowing you to compare future snapshot results to the new results of your altered code.

Enzyme and Jest

Now that we’ve seen the two working separately, let’s look at how both Jest and Enzyme can be utilized together.

As you can see, using Jest and Enzyme in unison reduces some of the clutter that each required when operating separately. No longer do we need to install chai or require in expect thanks to Jest. Additionally, when testing the snapshot of our component, we no longer need to add the line where we converted the DOM tree to JSON. These two languages play nicely with one another, and using them together can lighten the testing load overall. With this test, we could write the same component as before:

And still pass all of our tests and have a component that works the way that we anticipate.

To Recap

In this post, I’ve only begun to scratch the surface of what is possible in regards to Front-end testing with Jest and Enzyme. With our simple Hello component, I believe that I was able to show how Jest and Enzyme work a little bit better. I also hope that I have shown the benefit in shifting focus from comparing the two and instead looking at them as tools to use together. In the future, I hope to do a deeper dive into more complex situations, thereby showing the true power of leveraging TDD and Jest and Enzyme in unison.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade