JavaScript Testing utilities for React
JavaScript Shell
Latest commit 7f89d75 Jan 12, 2017 @cezaraugusto cezaraugusto committed on GitHub Add Brave 🦁
Permalink
Failed to load latest commit information.
.github Create Common issues and issue template Dec 28, 2016
docs [Docs] Fix alphabetical order of API lists Jan 10, 2017
src Use node._stringText instead of renderedChildren Jan 9, 2017
test Ignore text nodes in childrenOfInstInternal Jan 9, 2017
.babelrc Update to babel 6 #78 Jan 22, 2016
.eslintrc [Tests] fix linter/test scripts; move files with JSX to .jsx Aug 6, 2016
.gitignore address review feedback Jan 19, 2016
.lgtm [lgtm] Fix capitalization of maintainer name, drop approvals to 1 May 10, 2016
.npmignore Remove babelrc from npm package. (#311) Apr 18, 2016
.travis.yml [Tests] pin node builds to v6 temporarily. Oct 29, 2016
CHANGELOG.md v2.7.0 Dec 22, 2016
CONTRIBUTING.md The test:all script runs on all versions of react Jun 17, 2016
INTHEWILD.md Add Brave 🦁 Jan 13, 2017
LICENSE.md Refined docs a bit more Nov 16, 2015
MAINTAINERS [lgtm] Fix capitalization of maintainer name, drop approvals to 1 May 10, 2016
README.md Mention should-enzyme to readme Nov 16, 2016
ReactWrapper.js [New] Include root files so one can `require(‘enzyme/mount’)` etc Feb 16, 2016
ShallowWrapper.js [New] Include root files so one can `require(‘enzyme/mount’)` etc Feb 16, 2016
book.json Deprecate isEmpty() for exists() and update docs (#722) Dec 13, 2016
example-test.sh [Deps] add `in-publish` and `safe-publish-latest`; run builds prior t… Nov 9, 2016
install-relevant-react.sh [Tests] Default `REACT` to `v15` in `install-relevant-react` script. Apr 8, 2016
karma.conf.js allow test/helper files with .js extension Sep 13, 2016
mount.js [New] Include root files so one can `require(‘enzyme/mount’)` etc Feb 16, 2016
package.json v2.7.0 Dec 22, 2016
render.js [New] Include root files so one can `require(‘enzyme/mount’)` etc Feb 16, 2016
shallow.js [New] Include root files so one can `require(‘enzyme/mount’)` etc Feb 16, 2016
withDom.js [api] Display a useful error when `withDom` fails to find "jsdom". Nov 18, 2016

README.md

Enzyme

Join the chat at https://gitter.im/airbnb/enzyme

npm Version License Build Status Coverage Status Discord Channel

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.

If you are interested in using enzyme with custom assertions and convenience functions for testing your React components, you can consider using:

Using Enzyme with Mocha

Using Enzyme with Karma

Using Enzyme with Browserify

Using Enzyme with SystemJS

Using Enzyme with WebPack

Using Enzyme with JSDOM

Using Enzyme with React Native

Using Enzyme with Jest

Using Enzyme with Lab

Using Enzyme with Tape and AVA

Installation

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

npm i --save-dev enzyme

Enzyme is currently compatible with React 15.x, 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 or React 15.x, 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 React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';

import MyComponent from './MyComponent';
import Foo from './Foo';

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).to.have.property('callCount', 1);
  });
});

Read the full API Documentation

Full DOM Rendering

import React from 'react';
import sinon from 'sinon';
import { mount } from 'enzyme';

import Foo from './Foo';

describe('<Foo />', () => {
  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).to.have.property('callCount', 1);
  });

  it('calls componentDidMount', () => {
    sinon.spy(Foo.prototype, 'componentDidMount');
    const wrapper = mount(<Foo />);
    expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
    Foo.prototype.componentDidMount.restore();
  });
});

Read the full API Documentation

Static Rendered Markup

import React from 'react';
import { render } from 'enzyme';

import Foo from './Foo';

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

Enzyme Future

Contributing

See the Contributors Guide

In the wild

Organizations and projects using enzyme can list themselves here.

License

MIT