Testing React with Jest and Enzyme: 1. Snapshot testing

Another test framework??? I know.. I know.. Going through multiple test frameworks myself (Selenium, Cypress, Cucumber, Puppeteer, Jest, Enzyme .....), I find it important to keep track of latest frameworks. Each framework came to fix a challenge with the previous framework and creating new challenges. That is why I do not recommend forcing a company to unify a framework, so that you do not have to upgrade everything. Use something easy and portable and keep trying. Of course it is a lot easier with Unit tests and Integration tests that Jest and Enzymes are good at. Jest comes automatically with create-react-app, so it is the recommended Uni Test framework by Facebook. In this article, I will just show you a very basic example of Jest and Enzyme so that you understand how it works, when comes to decide between multiple frameworks. The most important advice to remember "Do not build your own custom framework." We can argue that in an other article. Here is a comparison that might help (https://blog.logrocket.com/comparing-react-testing-libraries/ )

However, Enzyme is trending over Cypress, recently according to https://www.npmtrends.com/cypress-vs-enzyme-vs-react-testing-library

Let's create a react app to play with it

create-react-app jest-enzyme-demo

I did not want to use npx create-react-app because there still no update for enzyme-adapter for react17 :( the file can be found at https://github.com/ranyelhousieny/jest-enzyme-demo

Now, let's install dependencies

npm install enzyme enzyme-adapter-react-16 react-test-renderer --save-dev

This will add those 3 libraries to package.json

Test files will have the following format <ComponentName>.test.js the following is the test file for App.js that comes with create-react-app

Let's start the test and see how things going by default

npm test

You will get the following screen with options to run

Since there are no changes since the last commit, it will not run any tests. Let's configure Enzyme and create some tests. Add the following to App.test.js, while npm test still running

import Enzyme from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';

// configure the adapter
Enzyme.configure( { adapter: new EnzymeAdapter() });

Let's write the smallest test that will succeed just by rendering

import App from './App';
import Enzyme from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';


// configure the adapter
Enzyme.configure( { adapter: new EnzymeAdapter() });
test( 'should render without errors', () => {
  
} );

As you can see the command is straight forward. You start with the command test and then add the behavior (similar to a story as we will see later) This is BDD (Behavioral Driven Development (I prefer this over Cucumber for different reason to discuss on another article)

Let's prepare App.js for a simple test

remove the unnecessary elements in App.js to become a simple React component as follows:

1. Snapshot testing

In this case, we will take a snapshot and save for future regressions. The command to create a snapshot is "create" from 'react-test-renderer'

here is the code before the snapshot (Note there is not _snapshots_)

Now, after we save (or run npm test if it is not running). Note the _snapshots_ folder

Here is the snapshot mentioning that it is a <div>

Now try to change App.js to <h1> instead of <div> and it should fail

You can also test type and any item in the object

In the next article, I will show how to test Redux reducers and actions

By: Rany ElHousieny

https://rany.elhsouieny.com

https://www.dhirubhai.net/in/ranyelhousieny/