Setting up Enzyme with Mocha


How do we go about testing our React components?

A popular approach is to use Enzyme, which is a React testing utility. Let’s use it with Mocha, a Node.js test runner.

You’ll need the following installed:

# peer dependencies (if not already installed)
$ npm install react react-dom

# another dependency
$ npm install react-addons-test-utils

# for testing
$ npm install enzyme mocha

Add the following to your project’s .babelrc:

{ "presets": ["es2015", "react"] }

The above config will be used when you run babel.

Update package.json with the npm script for test.

You can either follow babel’s recommendation:

{
  "scripts": {
    "test": "mocha --compilers js:babel-register"
  }
}

Or mocha’s recommendation:

{
  "scripts": {
    "test": "mocha --require babel-register"
  }
}

In either scenario, babel will compile the JavaScript files based on your .babelrc.

Now you can run your tests:

$ npm test

Check out Enzyme’s repository for basic usage and examples.

Advanced

You can also specify a different directory to run your tests:

# run tests that match `./lib/*.js`
$ mocha --require babel-register lib/

Or even subdirectories with a glob pattern:

$ mocha --require babel-register lib/**/*.spec.js

For Windows compatibility, wrap the glob in quotes:

$ mocha --require babel-register "lib/**/*.spec.js"