enzyme

What is enzyme?

Enzyme is a JavaScript testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output. It is designed to work with test runners like Jest or Mocha, and it provides a more intuitive and flexible API for interacting with React component trees.

What are enzyme's main functionalities?

Shallow Rendering

Shallow rendering is useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behavior of child components.

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

const wrapper = shallow(<MyComponent />);
expect(wrapper.find('.my-class').length).toBe(1);

Full DOM Rendering

Full DOM rendering is ideal for use cases where you have components that may interact with DOM APIs, or may require the full lifecycle in order to fully test the component (i.e., componentDidMount etc.).

import { mount } from 'enzyme';
import MyComponent from './MyComponent';

const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-class').length).toBe(1);

Static Rendering

Static rendering is used to render the component to static HTML. It's useful for rendering components to strings, for instance, to send in emails, or for analyzing the markup structure.

import { render } from 'enzyme';
import MyComponent from './MyComponent';

const wrapper = render(<MyComponent />);
expect(wrapper.find('.my-class').length).toBe(1);

Other packages similar to enzyme

react-testing-library

React Testing Library is a very popular alternative to Enzyme that provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. It focuses on testing components 'as the user would' rather than testing implementation details.

jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works well with React and can be used as a test runner, assertion library, and mocking library. Jest's snapshot testing feature can be seen as an alternative to Enzyme's rendering capabilities.

README

Enzyme

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

Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation and traversal.

Enzyme is unopinionated regarding which test runner or assertion library you use, and should be compatible with all major test runners and assertion libraries out there. The documentation and examples for enzyme use mocha and chai, but you should be able to extrapolate to your framework of choice.

Installation

To get started with enzyme, you can simply install it with npm:

npm i --save-dev enzyme

Enzyme is currently compatible with both React 0.14.x and React 0.13.x. In order to achieve this compatibility, some dependencies cannot be explicitly listed in our package.json.

If you are using React 0.14, in addition to enzyme, you will have to ensure that you also have the following npm modules installed if they were not already:

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

Basic Usage

Shallow Rendering

import { shallow } from 'enzyme';
import sinon from 'sinon';

describe('<MyComponent />', () => {

  it('renders three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.length(3);
  });

  it('renders an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.length(1);
  });

  it('renders children when passed in', () => {
    const wrapper = shallow(
      <MyComponent>
        <div className="unique" />
      </MyComponent>
    );
    expect(wrapper.contains(<div className="unique" />)).to.equal(true);
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = shallow(
      <Foo onButtonClick={onButtonClick} />
    );
    wrapper.find('button').simulate('click');
    expect(onButtonClick.calledOnce).to.equal(true);
  });

});

Read the full API Documentation

JSDOM Full Rendering

import {
  describeWithDOM,
  mount,
  spyLifecycle,
} from 'enzyme';

describeWithDOM('<Foo />', () => {

  it('calls componentDidMount', () => {
    spyLifecycle(Foo);
    const wrapper = mount(<Foo />);
    expect(Foo.prototype.componentDidMount.calledOnce).to.equal(true);
  });

  it('allows us to set props', () => {
    const wrapper = mount(<Foo bar="baz" />);
    expect(wrapper.props().bar).to.equal("baz");
    wrapper.setProps({ bar: "foo" });
    expect(wrapper.props().bar).to.equal("foo");
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = mount(
      <Foo onButtonClick={onButtonClick} />
    );
    wrapper.find('button').simulate('click');
    expect(onButtonClick.calledOnce).to.equal(true);
  });

});

Read the full API Documentation

Static Rendered Markup

import { render } from 'enzyme';

describe('<Foo />', () => {

  it('renders three `.foo-bar`s', () => {
    const wrapper = render(<Foo />);
    expect(wrapper.find('.foo-bar').length).to.equal(3);
  });

  it('renders the title', () => {
    const wrapper = render(<Foo title="unique" />);
    expect(wrapper.text()).to.contain("unique");
  });

});

Read the full API Documentation

Future

Contributing

License

MIT

Changelog

1.3.0 (January 13, 2016)

Minor Changes

• Added .html() method to ReactWrapper (#71)

• Support property selector (i.e. [prop="foo"]) (#70)

• jsdom dependency now allows a range of supported versions (#95)

Patches

• Normalized setProps() behavior between mount/shallow to merge props (#103)

• Exclude _book from published package (#85)

• Various documentation, tests, and style changes