enzyme 0,10,32,6,23,0,24,14 eslint travis-ci npm

JavaScript Testing utilities for React

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.5, 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 react-dom

If you are using React >=15.5, 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-test-renderer react-dom

Basic Usage

Shallow Rendering

import React from 'react';
import { expect } from 'chai';
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 { expect } from 'chai';
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 { expect } from 'chai';
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

Related Repositories

chai-enzyme

chai-enzyme

Chai.js assertions and convenience functions for testing React Components with e ...

enzyme-to-json

enzyme-to-json

Convert Enzyme wrappers to a format compatible with Jest snapshot ...

enzyme-example-mocha

enzyme-example-mocha

Example project with React + Enzyme + Mocha ...

enzyme-example-karma-webpack

enzyme-example-karma-webpack

Example project with React + Enzyme + Karma + Webpack ...

enzyme-matchers

enzyme-matchers

Jasmine/Jest assertions for enzyme ...


Top Contributors

lelandrichardson ljharb nfcampos Aweary koba04 iancmyers marlonbernardes mwilliamson nfpiche milesj cpojer blainekasten jordwest istarkov silvenon griffinmichl SimenB erikthedeveloper marcin-mazurek AugustinLF srph CurtisHumphrey Danwhy gterzian jakubzitny thatjessicakelly themouette kevinzwhuang deepsweet roadhump

Dependencies

package version
cheerio ^0.22.0
function.prototype.name ^1.0.0
is-subset ^0.1.1
lodash ^4.17.4
object-is ^1.0.1
object.assign ^4.0.4
object.entries ^1.0.4
object.values ^1.0.4
prop-types ^15.5.10
uuid ^3.0.1
dev babel-cli ^6.24.1
babel-core ^6.25.0
babel-eslint ^7.2.3
babel-loader ^6.4.1
babel-plugin-transform-replace-object-assign ^0.2.1
babel-preset-airbnb ^2.3.3
babel-register ^6.24.1
chai ^4.0.2
coveralls ^2.13.1
create-react-class ^15.6.0
enzyme-example-jest ^0.1.0
enzyme-example-karma ^0.1.1
enzyme-example-karma-webpack ^0.1.4
enzyme-example-mocha ^0.1.0
enzyme-example-react-native ^0.1.0
eslint ^3.19.0
eslint-config-airbnb ^15.0.1
eslint-plugin-import ^2.6.0
eslint-plugin-jsx-a11y ^5.0.3
eslint-plugin-markdown ^1.0.0-beta.6
eslint-plugin-react ^7.1.0
gitbook-cli ^1.0.1
in-publish ^2.0.0
istanbul ^1.0.0-alpha.2
jsdom ^6.1.0
json-loader ^0.5.4
karma ^1.3.0
karma-chrome-launcher ^1.0.1
karma-firefox-launcher ^1.0.1
karma-mocha ^1.3.0
karma-sourcemap-loader ^0.3.7
karma-webpack ^1.8.1
mocha ^3.4.2
rimraf ^2.6.1
safe-publish-latest ^1.1.1
sinon ^2.3.5
webpack ^1.13.3
react 0.13.x || 0.14.x || ^15.0.0-0 || 15.x
peer react 0.13.x || 0.14.x || ^15.0.0-0 || 15.x

Releases

-   v2.4.1 zip tar
-   v2.4.0 zip tar
-   v2.3.0 zip tar
-   v2.2.0 zip tar
-   v2.1.0 zip tar
-   v2.0.0 zip tar
-   v1.6.0 zip tar
-   v1.5.0 zip tar
-   v1.4.1 zip tar
-   v1.4.0 zip tar
-   v1.3.1 zip tar
-   v1.3.0 zip tar
-   v1.2.0 zip tar
-   v1.1.0 zip tar
-   v1.0.0 zip tar
-   reagent-v1.0.1 zip tar
-   reagent-v1.0.0 zip tar