Package Exports
- enzyme
- enzyme/build
- enzyme/build/Debug
- enzyme/build/ReactWrapper
- enzyme/build/ShallowWrapper
- enzyme/build/Utils
- enzyme/build/react-compat
- enzyme/package.json
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (enzyme) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
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.
If you are interested in using enzyme with custom Chai.js assertions and convenience functions for testing your React components, you can consider using chai-enzyme.
Using Enzyme with Mocha Using Enzyme with Karma Using Enzyme with Jasmine Using Enzyme with Browserify Using Enzyme with WebPack Using Enzyme with JSDOM Using Enzyme with React Native Using Enzyme with Jest
Installation
To get started with enzyme, you can simply install it with npm:
npm i --save-dev enzymeEnzyme 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-domBasic Usage
Shallow Rendering
import React from 'react';
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
Full DOM Rendering
import React from 'react';
import sinon from 'sinon';
import { mount } from 'enzyme';
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.calledOnce).to.equal(true);
});
it('calls componentDidMount', () => {
sinon.spy(Foo.prototype, 'componentDidMount');
const wrapper = mount(<Foo />);
expect(Foo.prototype.componentDidMount.calledOnce).to.be.true;
Foo.prototype.componentDidMount.restore();
});
});Read the full API Documentation
Static Rendered Markup
import React from 'react';
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
See the Contributors Guide