When you're using Jest as a JavaScript Testing Framework for your React projects there is a high chance that you're using Jest in conjunction with Enzyme.

Enzyme is a popular JavaScript Testing utilities for React from Airbnb and de facto is a standard testing library withing the React community. Of course, there are some alternatives like react-testing-library but Enzyme us more popular.

If Jest + Enzyme works very well already, why bother and installing something else additionally?

Welcome Enzyme-matchers

Enzyme-matchers - is a set of Jest assertions for the enzyme to simplify your tests and make them more readable.

It has a package called jest-enzyme. That's what we need.

Reasons to use jest-enzyme

• better tests readability

• more comfortable (Enzyme doesn’t have all the handy assertions)

• shorter (less code to write)

• more specific error output (not general)

Assertions I use the most from the jest-enzyme

I'm using full mount for most of my unit tests so these assertions work with it.

• toBeChecked()
• toBeDisabled()
• toBeEmptyRender()
• toExist()
• toHaveProp()
• toHaveText()
• toIncludeText()
• toHaveValue()

How to setup jest-enzyme?

Step 1. Install jest-enzyme package to your package.json

Note: there is a Setup documentation in the docs but I'm doing setup differently.

Depends which package manager you use Yarn or NPM from the project root execute add jest-enzyme to your devDependencies:

yarn add -D jest-enzyme # install with Yarn

npm i jest-enzyme --save-dev # install with NPM

Step 2. Configure jest-enzyme

In your jest.config.js file add property:

// jest.config.js
module.exports = {
  setupFilesAfterEnv: ['./jest/setupTestFramework.js']
}

// or in the package.json
{
  "jest": {
     "setupFilesAfterEnv": ['./jest/setupTestFramework.js'],
  }
}

Step 3. Create setupTestFramework file

In the project root create a folder called jest with a file inside called setupTestFramework.js so you'll have a file structure like ./jest/setupTestFramework.js.

Step 4. Import jest-enzyme in the setupTestFramework file

Your setupTestFramework might look like that. Please include import 'jest-enzyme' line in it.

// ./jest/setupTestFramework.js
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import 'jest-enzyme'

configure({ adapter: new Adapter() })

That's it! Now you can use better assertions form the jest-enzyme 🙂

jest-enzyme is a great addition to your React testing toolkit. It is not necessarily aiming at replacing Enzyme but a nice addition to it.