Repository files navigation

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output.You can also manipulate, traverse, and in some ways simulate runtime given the output.

Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulationand traversal.

Are you here to check whether or not Enzyme is compatible with React 16? Are you currently usingEnzyme 2.x? Great! Check out ourmigration guide for helpmoving on to Enzyme v3 where React 16 is supported.

To get started with enzyme, you can simply install it via npm. You will need to install enzymealong with an Adapter corresponding to the version of react (or other UI Component library) youare using. For instance, if you are using enzyme with React 16, you can run:

npm i --save-dev enzyme enzyme-adapter-react-16

Each adapter may have additional peer dependencies which you will need to install as well. For instance,enzyme-adapter-react-16 has peer dependencies onreact andreact-dom.

At the moment, Enzyme has adapters that provide compatibility withReact 16.x,React 15.x,React 0.14.x andReact 0.13.x.

The following adapters are officially provided by enzyme, and have the following compatibility withReact:

Finally, you need to configure enzyme to use the adapter you want it to use. To do this, you can usethe top levelconfigure(...) API.

importEnzymefrom'enzyme';importAdapterfrom'enzyme-adapter-react-16';Enzyme.configure({adapter:newAdapter()});

It is possible for the community to create additional (non-official) adapters that will make enzymework with other libraries. If you have made one and it's not included in the list below, feel freeto make a PR to this README and add a link to it! The known 3rd party adapters are:

Enzyme is unopinionated regarding which test runner or assertion library you use, and should becompatible with all major test runners and assertion libraries out there. The documentation andexamples for enzyme useMocha andChai, but youshould be able to extrapolate to your framework of choice.

If you are interested in using enzyme with custom assertions and convenience functions fortesting your React components, you can consider using:

• chai-enzyme with Mocha/Chai.
• jasmine-enzyme with Jasmine.
• jest-enzyme with Jest.
• should-enzyme for should.js.
• expect-enzyme for expect.

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

importReactfrom'react';import{expect}from'chai';import{shallow}from'enzyme';importsinonfrom'sinon';importMyComponentfrom'./MyComponent';importFoofrom'./Foo';describe('<MyComponent />',()=>{it('renders three <Foo /> components',()=>{constwrapper=shallow(<MyComponent/>);expect(wrapper.find(Foo)).to.have.lengthOf(3);});it('renders an `.icon-star`',()=>{constwrapper=shallow(<MyComponent/>);expect(wrapper.find('.icon-star')).to.have.lengthOf(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).to.have.property('callCount',1);});});

Read the fullAPI Documentation

importReactfrom'react';importsinonfrom'sinon';import{expect}from'chai';import{mount}from'enzyme';importFoofrom'./Foo';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).to.have.property('callCount',1);});it('calls componentDidMount',()=>{sinon.spy(Foo.prototype,'componentDidMount');constwrapper=mount(<Foo/>);expect(Foo.prototype.componentDidMount).to.have.property('callCount',1);Foo.prototype.componentDidMount.restore();});});

Read the fullAPI Documentation

importReactfrom'react';import{expect}from'chai';import{render}from'enzyme';importFoofrom'./Foo';describe('<Foo />',()=>{it('renders three `.foo-bar`s',()=>{constwrapper=render(<Foo/>);expect(wrapper.find('.foo-bar')).to.have.lengthOf(3);});it('renders the title',()=>{constwrapper=render(<Footitle="unique"/>);expect(wrapper.text()).to.contain('unique');});});

Read the fullAPI Documentation

Enzyme supportsreact hooks with some limitations in.shallow() due to upstream issues in React's shallow renderer:

• useEffect() anduseLayoutEffect() don't get called in the React shallow renderer.Related issue

• useCallback() doesn't memoize callback in React shallow renderer.Related issue

If you're using React 16.8+ and.mount(), Enzyme will wrap apis including.simulate(),.setProps(),.setContext(),.invoke() withReactTestUtils.act() so you don't need to manually wrap it.

A common pattern to trigger handlers with.act() and assert is:

constwrapper=mount(<SomeComponent/>);act(()=>wrapper.prop('handler')());wrapper.update();expect(/* ... */);

We cannot wrap the result of.prop() (or.props()) with.act() in Enzyme internally since it will break the equality of the returned value.However, you could use.invoke() to simplify the code:

constwrapper=mount(<SomeComponent/>);wrapper.invoke('handler')();expect(/* ... */);

Enzyme Future

See theContributors Guide

Organizations and projects usingenzyme can list themselveshere.

MIT