Guide · Open source
How to use Enzyme: install, shallow and mount React tests
Updated · written with AI from the project's own documentation and checked against our catalogue data
Enzyme is a JavaScript testing utility for React. It lets you check what a React component renders, find elements inside it and simulate actions such as clicks, using an API modeled on jQuery's traversal style. This guide shows how to install it with the matching adapter, configure it, and write shallow, full DOM and static rendering tests. You will also see the hooks limitations to watch for.
Quick start
- 1Check your React version. Confirm the React and react-dom versions you use, then find the matching adapter in the README compatibility table.
- 2Install Enzyme and the adapter. Run npm i --save-dev enzyme enzyme-adapter-react-16 for React 16, or the adapter that matches your version.
- 3Configure the adapter. Import Enzyme and your adapter, then call Enzyme.configure with a new adapter instance before tests run.
- 4Write a shallow test. Use shallow to render one component, then use find and simulate to check its output and events.
- 5Write a mount or render test. Use mount for full DOM rendering or render for static markup, depending on what the test needs to check.
- 6Run your test runner. Run the tests with your chosen runner, such as Mocha with Chai or Jest, since Enzyme is not tied to one runner.
What you need before you install Enzyme
Enzyme is installed through npm, so you need Node.js and npm. You also need React and react-dom versions that match the adapter you choose, because the README says each adapter has its own compatibility range with React.
- Node.js and npm
- React and react-dom matching your adapter version
- A test runner and assertion library such as Mocha with Chai, or Jest
Install Enzyme and an adapter
Enzyme needs an adapter that corresponds to your React version. For React 16, the README gives this install command, run as dev dependencies. Enzyme's official adapters cover React 16.x, 15.x, 0.14.x and 0.13.x, and the README lists the exact semver range for each adapter package.
- Pick the adapter from the README table that matches your React version.
- enzyme-adapter-react-16 has peer dependencies on react and react-dom.
npm i --save-dev enzyme enzyme-adapter-react-16Configure Enzyme with your adapter
Before tests run, tell Enzyme which adapter to use with the top-level configure API. Import Enzyme and the adapter, then call configure with a new adapter instance.
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });Write a shallow render test
Shallow rendering tests one component in isolation. The README example renders MyComponent with shallow, then uses find to count child components and elements, and simulate to fire a click on a button. Enzyme's contains method checks for a specific element in the output.
Mocha and Chai are used in the README examples, but Enzyme works with other runners too.
- wrapper.find(Foo) returns matching components, and .to.have.lengthOf checks the count.
- wrapper.find('button').simulate('click') triggers a click on that element.
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('<MyComponent />', () => {
it('renders three <Foo /> components', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find(Foo)).to.have.lengthOf(3);
});
it('simulates click events', () => {
const onButtonClick = sinon.spy();
const wrapper = shallow(<Foo onButtonClick={onButtonClick} />);
wrapper.find('button').simulate('click');
expect(onButtonClick).to.have.property('callCount', 1);
});
});Write a full DOM test with mount
Use mount when you want full DOM rendering. The README example shows mount being used to set props with setProps, simulate a click, and spy on componentDidMount. Use the full API documentation linked from the README for details on each method.
- Use shallow for one component in isolation.
- Use mount when you need the full rendering of child components.
import React from 'react';
import sinon from 'sinon';
import { expect } from 'chai';
import { mount } from 'enzyme';
import Foo from './Foo';
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');
});
});Test static markup with render
The render function produces static rendered markup. The README example checks the number of .foo-bar elements and the text of the rendered output.
import React from 'react';
import { expect } from 'chai';
import { render } from 'enzyme';
import Foo from './Foo';
describe('<Foo />', () => {
it('renders the title', () => {
const wrapper = render(<Foo title="unique" />);
expect(wrapper.text()).to.contain('unique');
});
});Know the hooks limitations
Enzyme supports React hooks, with limits in .shallow() because of upstream issues in React's shallow renderer. useEffect and useLayoutEffect are not called in shallow rendering, and useCallback does not memoize the callback in shallow mode. With React 16.8+ and .mount(), Enzyme wraps simulate, setProps, setContext and invoke in ReactTestUtils.act() for you.
- Hooks-heavy code tested with shallow may not behave as it does in a real render.
- With mount on React 16.8+, you do not need to wrap these calls in act yourself.
What people use it for
- Checking that a component renders a set number of child components with find and lengthOf assertions.
- Simulating a click on a button and asserting that a callback was called.
- Setting new props on a mounted component with setProps and checking the result.
- Confirming that rendered markup contains expected text with render.
Frequently asked questions
Is Enzyme free to use?
Yes. The project is licensed under MIT, as listed on its page. The MIT licence allows use, and the repository's LICENSE.md file has the full terms.
Does Enzyme work with React 18 or newer?
The README lists official adapters for React 16.x, 15.x, 0.14.x and 0.13.x only. If your React version is not covered by an adapter in the README, Enzyme compatibility is limited, so check the adapter table before you install.
How do I install Enzyme?
Run npm i --save-dev enzyme enzyme-adapter-react-16 for React 16. The README says each adapter may have peer dependencies, and enzyme-adapter-react-16 needs react and react-dom.
Is Enzyme the same as React Testing Library?
No. Enzyme focuses on inspecting component output and simulating actions with a jQuery-style API. React Testing Library is a different approach, and it is one of the comparable projects to consider when choosing a tool for new tests.
Why do useEffect hooks not run in my shallow test?
The README notes that useEffect and useLayoutEffect are not called in the React shallow renderer, due to an upstream issue in React. Use mount if your test depends on those effects running.
Can I use Enzyme with Jest?
Yes. The README lists a Jest guide and the jest-enzyme matcher package, and says Enzyme works with all major test runners and assertion libraries.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Enzyme suits developers maintaining React codebases that already have Enzyme tests, or who use React 16 or older with a matching adapter. If you are writing new React tests on a current React version, or want a documented approach that the README does not cover for newer React, consider React Testing Library, react-test-renderer or Jest instead.
Install options & downloads