Enzyme Testing

INTRO TO ENZYME

Started by Airbnb engineer Leland Richardson, since open sourced

Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.

INTRO TO ENZYME

Benefits of using Enzyme

• Unopinionated
• jQuery style DOM traversal
• Mocking out components to test is clean

INTRO TO ENZYME

So uh... what am I supposed to be testing?

• Is it a valid component?
• Is everything rendering that you're expecting?
• Checking props
• Simulating events, such as a click

INTRO TO ENZYME

Getting Started

npm i --save-dev enzyme
npm i --save-dev react-addons-test-utils
npm i --save-dev react-dom

INTRO TO ENZYME

Example of basic test

import React from 'react';
import { shallow } from 'enzyme';
import ToDoList from '../components/ToDoList';
import ToDoItem from '../components/ToDoItem';

describe('<ToDoList />', () => {
  it('renders the entire list of items', () => {
    const items = [mockItem(), mockItem() /*, ... */];
    const wrapper = shallow(<ToDoList items={items} />);
    expect(wrapper.find(ToDoList)).to.have.length(items.length);
  });
});

INTRO TO ENZYME

Example of complex test

import React from 'react';
import { shallow } from 'enzyme';
import chai, {expect} from 'chai';
import { stub } from 'sinon';
import sinonChai from 'sinon-chai';
chai.use(sinonChai);

const FBButton4 = ({ likePage }) => {
  const onClick = () => {
    if (FB.like()) {
      likePage();
    }
  };
  return <button onClick={onClick}>Like this on Fakebook!</button>;
};

describe('<FBButton4 />', () => {
  it('will call our action because FB.like returns `true`', () => {
    const likePage = stub();
    const wrapper = shallow(<FBButton4 likePage={likePage} />);

    stub(FB, 'like').returns(true);

    wrapper.find('button').simulate('click');
    expect(likePage).to.have.been.called;
    FB.like.restore(); // This is important!
  });
});

Rendering methods

Rendering methods

Shallow

Rendering methods

Mount

Rendering methods

Render

Best practices

• Start with .shallow()
• Always refresh your wrapper variable between tests
• Only pass wrappers the required props for component to render
• If you're having trouble writing a test for an existing component, consider rewriting the component to make it more testable
• Pick an assertion syntax and stick to it

Best practices

What about React Native? 

React Native has many environmental dependencies that can be hard to simulate without a host device.

Best practices

Test double library!

Allows you to replace the difficult parts of your tests with something that makes testing simple.

Best practices

Test double library!

• Spies, which offer information about function calls, without affecting their behavior
• Stubs, which are like spies, but completely replace the function. This makes it possible to make a stubbed function do whatever you like — throw an exception, return a specific value, etc
• Mocks, which make replacing whole objects easier by combining both spies and stubs