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.
If you are interested in using enzyme with custom Jasmine/Jest assertions and convenience functions for testing your React components, you can consider using jasmine-enzyme.
Using Enzyme with React Native
To get started with enzyme, you can simply install it with npm:
npm i --save-dev enzymeEnzyme 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-domimportReactfrom'react';import{shallow}from'enzyme';importsinonfrom'sinon';describe('<MyComponent />',()=>{it('renders three <Foo /> components',()=>{constwrapper=shallow(<MyComponent/>);expect(wrapper.find(Foo)).to.have.length(3);});it('renders an `.icon-star`',()=>{constwrapper=shallow(<MyComponent/>);expect(wrapper.find('.icon-star')).to.have.length(1);});it('renders children when passed in',()=>{constwrapper=shallow(<MyComponent><divclassName="unique"/></MyComponent>);expect(wrapper.contains(<divclassName="unique"/>)).to.equal(true);});it('simulates click events',()=>{constonButtonClick=sinon.spy();constwrapper=shallow(<FooonButtonClick={onButtonClick}/>);wrapper.find('button').simulate('click');expect(onButtonClick.calledOnce).to.equal(true);});});Read the full API Documentation
importReactfrom'react';importsinonfrom'sinon';import{mount}from'enzyme';describe('<Foo />',()=>{it('allows us to set props',()=>{constwrapper=mount(<Foobar="baz"/>);expect(wrapper.props().bar).to.equal("baz");wrapper.setProps({bar: "foo"});expect(wrapper.props().bar).to.equal("foo");});it('simulates click events',()=>{constonButtonClick=sinon.spy();constwrapper=mount(<FooonButtonClick={onButtonClick}/>);wrapper.find('button').simulate('click');expect(onButtonClick.calledOnce).to.equal(true);});it('calls componentDidMount',()=>{sinon.spy(Foo.prototype,'componentDidMount');constwrapper=mount(<Foo/>);expect(Foo.prototype.componentDidMount.calledOnce).to.be.true;Foo.prototype.componentDidMount.restore();});});Read the full API Documentation
importReactfrom'react';import{render}from'enzyme';describe('<Foo />',()=>{it('renders three `.foo-bar`s',()=>{constwrapper=render(<Foo/>);expect(wrapper.find('.foo-bar').length).to.equal(3);});it('renders the title',()=>{constwrapper=render(<Footitle="unique"/>);expect(wrapper.text()).to.contain("unique");});});Read the full API Documentation
See the Contributors Guide
Organizations and projects using enzyme can list themselves here.