Enzyme
=======
[](https://gitter.im/airbnb/enzyme?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://www.npmjs.com/package/enzyme) [](https://www.npmjs.com/package/enzyme) [](https://travis-ci.org/airbnb/enzyme) [](https://coveralls.io/github/airbnb/enzyme?branch=master)
[](https://discord.gg/0ZcbPKXt5bY8vNTA)
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](https://mochajs.org/) and [chai](http://chaijs.com/), 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:
* [`chai-enzyme`](https://github.com/producthunt/chai-enzyme) with Mocha/Chai.
* [`jasmine-enzyme`](https://github.com/blainekasten/enzyme-matchers/tree/master/packages/jasmine-enzyme) with Jasmine.
* [`jest-enzyme`](https://github.com/blainekasten/enzyme-matchers/tree/master/packages/jest-enzyme) with Jest.
* [`should-enzyme`](https://github.com/rkotze/should-enzyme) for should.js.
* [`expect-enzyme`](https://github.com/PsychoLlama/expect-enzyme) for expect.
[Using Enzyme with Mocha](/docs/guides/mocha.md)
[Using Enzyme with Karma](/docs/guides/karma.md)
[Using Enzyme with Browserify](/docs/guides/browserify.md)
[Using Enzyme with SystemJS](/docs/guides/systemjs.md)
[Using Enzyme with WebPack](/docs/guides/webpack.md)
[Using Enzyme with JSDOM](/docs/guides/jsdom.md)
[Using Enzyme with React Native](/docs/guides/react-native.md)
[Using Enzyme with Jest](/docs/guides/jest.md)
[Using Enzyme with Lab](/docs/guides/lab.md)
[Using Enzyme with Tape and AVA](/docs/guides/tape-ava.md)
### [Installation](/docs/installation/README.md)
To get started with enzyme, you can simply install it with npm:
```bash
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:
```bash
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:
```bash
npm i --save-dev react-test-renderer react-dom
```
Basic Usage
===========
## [Shallow Rendering](/docs/api/shallow.md)
```javascript
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('', () => {
it('renders three components', () => {
const wrapper = shallow();
expect(wrapper.find(Foo)).to.have.length(3);
});
it('renders an `.icon-star`', () => {
const wrapper = shallow();
expect(wrapper.find('.icon-star')).to.have.length(1);
});
it('renders children when passed in', () => {
const wrapper = shallow((
));
expect(wrapper.contains()).to.equal(true);
});
it('simulates click events', () => {
const onButtonClick = sinon.spy();
const wrapper = shallow((
));
wrapper.find('button').simulate('click');
expect(onButtonClick).to.have.property('callCount', 1);
});
});
```
Read the full [API Documentation](/docs/api/shallow.md)
## [Full DOM Rendering](/docs/api/mount.md)
```javascript
import React from 'react';
import sinon from 'sinon';
import { expect } from 'chai';
import { mount } from 'enzyme';
import Foo from './Foo';
describe('', () => {
it('allows us to set props', () => {
const wrapper = mount();
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((
));
wrapper.find('button').simulate('click');
expect(onButtonClick).to.have.property('callCount', 1);
});
it('calls componentDidMount', () => {
sinon.spy(Foo.prototype, 'componentDidMount');
const wrapper = mount();
expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
Foo.prototype.componentDidMount.restore();
});
});
```
Read the full [API Documentation](/docs/api/mount.md)
## [Static Rendered Markup](/docs/api/render.md)
```javascript
import React from 'react';
import { expect } from 'chai';
import { render } from 'enzyme';
import Foo from './Foo';
describe('', () => {
it('renders three `.foo-bar`s', () => {
const wrapper = render();
expect(wrapper.find('.foo-bar').length).to.equal(3);
});
it('renders the title', () => {
const wrapper = render();
expect(wrapper.text()).to.contain('unique');
});
});
```
Read the full [API Documentation](/docs/api/render.md)
### Future
[Enzyme Future](/docs/future.md)
### Contributing
See the [Contributors Guide](/CONTRIBUTING.md)
### In the wild
Organizations and projects using `enzyme` can list themselves [here](INTHEWILD.md).
### License
[MIT](/LICENSE.md)