Testing React using Enzyme

By @richardkotze

Blog post on why and how to use Enzyme

My slides: slides.com/rkotze

What is Enzyme?

It’s a testing utility to assert, manipulate and read rendered React components

Made by Airbnb

Why use it?

• Keeps the code base clean and reduced boiler code
• Stable rendering of components
• Easy to use API to assert on rendered components

Before Enzyme

describe('User profile', () => {
  let component, dom;

  before((done) => {
    let person = { FirstName:'Richard', LastName:'Kotze' };
    component = ReactDOM.render(
      <ProfileBox person={person} />,
      document.getElementById('container'),
      () => {
        setTimeout(done);
      }
    );
  });

  after((done) => {
    React.unmountComponentAtNode(document.getElementById('container'));
    setTimeout(done);
  });

  it('should contain name', () => {
    dom = React.findDOMNode(component);
    dom.textContent.should.containEql('Richard Kotze');
  });
});

Using Enzyme

import { mount } from 'enzyme';
describe('User profile', () => {
  const person = { FirstName:'Richard', LastName:'Kotze' };

  it('should contain name', () => {
    const profileDom = mount(<ProfileBox person={person} />);
    profileDom.text().should.containEql('Richard Kotze');
  });
});

Enzyme API

Enzyme provides three ways to render your components.

Enzyme API

mount(<Component />)

Full DOM rendering when interacting with DOM API or components that use lifecycle methods.

Browser environment needed e.g. jsdom

Enzyme API

render(<Component />)

Render React components to static HTML and analyse the HTML stucture using the Cheerio library.

Browser environment not needed e.g. jsdom

Enzyme examples

Commonly used methods to help you kick start your React JS testing.

.find(['css selector'])

const dom = shallow(<ExampleComponent />);

const exampleList = dom.find('.exampleList li');

exampleList.length.should.equal(3);

If a component contained a list we can use the find method to get the list items and assert the total.

Find() returns a wrapper which will contain an array of elements.

.find(['other selector'])

Other selectors to find elements

Component constructor

.find(ExampleComponent);

Component displayName

.find('ExampleComponent');

Object property selector

.find({ magic: 'foo' });

<span magic="foo" />

.get(index) and .at(index)

const dom = shallow(<ExampleComponent />);

const exampleList = dom.find('.exampleList li');

exampleList.get(0).getAttribute('class').should.equal('special');

exampleList.at(1).contains(<li>test</li>).should.be.true();

• Get() returns a node (ReactElement) giving access to React and DOM methods.
• At() returns a wrapper to access Enzyme methods

Get a single element from list

.debug()

const dom = shallow(<ExampleComponent />);

const exampleList = dom.find('.exampleList li');

dom.debug();

See a string result of rendered mark up.

Useful if your test are failing for an unexpected reason.

Questions?

By @richardkotze

Blog post on why and how to use Enzyme

slides.com/rkotze/testing-react-using-enzyme

slides.com/jondarrer/a-simple-node-js-server

By Jonathan Darrer