enzyme
Version:
JavaScript Testing utilities for React
154 lines (106 loc) • 4.13 kB
Markdown
Enzyme
=======
[](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)
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.
### [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 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:
```bash
npm i --save-dev react-addons-test-utils
npm i --save-dev react-dom
```
Basic Usage
===========
## [Shallow Rendering](/docs/api/shallow.md)
```jsx
import { shallow } from 'enzyme';
describe('<MyComponent />', () => {
it('should render three <Foo /> components', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find(Foo)).to.have.length(3);
});
it('should render an `.icon-star`', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('.icon-star')).to.have.length(1);
});
it('should render children when passed in', () => {
const wrapper = shallow(
<MyComponent>
<div className="unique" />
</MyComponent>
);
expect(wrapper.contains(<div className="unique" />)).to.be.true;
});
it('simulates click events', () => {
const onButtonClick = sinon.spy();
const wrapper = shallow(
<Foo onButtonClick={onButtonClick} />
);
wrapper.find('button').simulate('click');
expect(onButtonClick.calledOnce).to.be.true;
});
});
```
Read the full [API Documentation](/docs/api/shallow.md)
## [JSDOM Full Rendering](/docs/api/mount.md)
```jsx
import {
describeWithDOM,
mount,
spyLifecycle,
} from 'enzyme';
describeWithDOM('<Foo />', () => {
it('calls componentDidMount', () => {
spyLifecycle(Foo);
const wrapper = mount(<Foo />);
expect(Foo.prototype.componentDidMount.calledOnce).to.be.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.be.true;
});
});
```
Read the full [API Documentation](/docs/api/mount.md)
## [Static Rendered Markup](/docs/api/render.md)
```jsx
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('rendered the title', () => {
const wrapper = render(<Foo title="unique" />);
expect(wrapper.text()).to.contain("unique");
});
});
```
Read the full [API Documentation](/docs/api/render.md)
### [Future](/docs/future.md)
### [Contributing](/CONTRIBUTING.md)
### License
[MIT](/LICENSE.md)