Part 3: Add Jest and Enzyme to your project

React Logo

Apologies for the super late post, but I finally got around this to finish this series.

Part 1 — Project Setup and Webpack configuration Dev Mode.

Part 2: Configure Babel and add React to your project

Part 3: Add Jest and Enzyme to your project

1. To install Jest to our project, simply run the following at the root of the repository.

npm install --save-dev jest

This will install jest in dev mode. To know what Jest can or cannot do, visit Getting Started with Jest.

2. But, to make it work with babel, we would also need the following:

npm install --save-dev jest babel-jest babel-preset-es2015 babel-preset-react react-test-renderer

We still have the babel.config.js with the contents

babel.config.js

This should still work fine for us.

3. Amend the ‘test’ script, as “test”: “jest”

test script package.json

4. We need to add a component and its respective test case to see if this works.

Re-using the example from Jest documentation, add a file called Link.js in the src folder

import React from 'react';

const STATUS = {
    NORMAL: 'normal',
    HOVERED: 'hovered',
};

export default class Link extends React.Component {
  constructor(props) {
  super(props);
  this._onMouseEnter = this._onMouseEnter.bind(this);
  this._onMouseLeave = this._onMouseLeave.bind(this);
  this.state = {
     class: STATUS.NORMAL,
   };
 }
 _onMouseEnter() {
    this.setState({class: STATUS.HOVERED});
 }
 _onMouseLeave() {
    this.setState({class: STATUS.NORMAL});
 }
 render() {
   return (
      <a className={this.state.class} 
         
         href={this.props.page || '#'}
         onMouseEnter={this._onMouseEnter}
         onMouseLeave={this._onMouseLeave}>
         {this.props.children}
      </a>
  );
 }
}

5. Now that we have the source code, we are going to write a respective test for it that does snapshot testing for our Link component. You can place this file either in a __tests__ folder, or you can name the file as link.test.js and keep it with the component file in src folder. I’ve kept it along with the component in the src folder. If you choose otherwise, make sure to update the import statements.

Also note, test|spec are the defaults file extension types that Jest would try, find and run along with files kept in __tests__ folder.

import React from 'react';
import Link from './Link';
import renderer from 'react-test-renderer';
test('Link changes the class when hovered', () => {
const component = renderer.create(
<Link page="http://www.facebook.com">Facebook</Link>
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
// manually trigger the callback
tree.props.onMouseEnter();
// re-rendering
tree = component.toJSON();

expect(tree).toMatchSnapshot();
// manually trigger the callback
tree.props.onMouseLeave();

// re-rendering
tree = component.toJSON();
expect(tree).toMatchSnapshot();
});

6. Now that we have the test in place, run the following:

npm run test

If everything went fine, you should see the test pass and have a snapshot file created as such

Onto Enzyme

1. To install enzyme, run the following:

npm i --save-dev enzyme enzyme-adapter-react-16

Note that enzyme requires an adapter to be installed alongside.

You can read more on enzyme installation here.

2. Using Jest documentation, add another component CheckboxWithLabel.js in the src folder with the following contents.

import React from 'react';
export default class CheckboxWithLabel extends React.Component {
constructor(props) {
  super(props);
  this.state = {isChecked: false};
  this.onChange = this.onChange.bind(this);
}
onChange() {
this.setState({isChecked: !this.state.isChecked});
}
render() {
return (
    <label>
    <input
     type="checkbox"
     checked={this.state.isChecked}
     onChange={this.onChange}
    />
     {this.state.isChecked ? this.props.labelOn:this.props.labelOff}
    </label>
   );
  }
}

3. Now, to test this component, we have checkboxWithLabel.test.js

import React from 'react';
import { shallow, mount, render,configure } from 'enzyme';
import CheckboxWithLabel from './CheckboxWithLabel';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
test('CheckboxWithLabel changes the text after click', () => {
// Render a checkbox with label in the document
const checkbox = shallow(
<CheckboxWithLabel labelOn="On" labelOff="Off" />
);
expect(checkbox.text()).toEqual('Off');
checkbox.find('input').simulate('change');
expect(checkbox.text()).toEqual('On');
});

Now, if you run

npm run test

again from terminal,

you should get a similar result :

test results

And there you are, you now have a minimal working React, Babel, Webpack, Jest and Enzyme setup. :)

Fin.