chai-dom, enzyme, jest-dom, and react-testing-library are JavaScript libraries that support testing user interfaces, particularly in React applications. They provide utilities for rendering components, simulating user interactions, and asserting on DOM structure or behavior. While all aim to improve test reliability and developer experience, they differ significantly in philosophy, API design, maintenance status, and integration with modern testing ecosystems.
Frontend Testing Tools Compared: chai-dom, enzyme, jest-dom, and react-testing-library
When writing tests for React applications, developers rely on libraries to render components, simulate interactions, and verify outcomes. The four packages under review serve overlapping but distinct roles in this workflow. Understanding their scope, compatibility, and current viability is essential for making sound architectural decisions.
🧪 Core Responsibilities: What Each Package Actually Does
It’s critical to recognize that these tools don’t all solve the same problem:
react-testing-libraryrenders React components into a DOM environment and provides utilities to query and interact with them.jest-domadds custom Jest matchers to make DOM assertions more semantic and robust.chai-domoffers similar DOM assertions but for the Chai assertion library, typically used outside Jest.enzyme(deprecated) was a full-featured React testing utility that included rendering, querying, and lifecycle control.
Let’s examine how they approach common testing tasks.
🖼️ Rendering Components and Querying the DOM
react-testing-library is built around the principle of testing what the user sees. It renders components into a container and exposes queries like getByText, getByRole, etc.
// react-testing-library
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';
test('displays hello message', () => {
render(<Greeting name="Alice" />);
expect(screen.getByText('Hello, Alice!')).toBeInTheDocument();
});
enzyme provided multiple rendering modes (shallow, mount, render). Shallow rendering was popular for isolating components, but it bypassed React’s actual rendering behavior.
// enzyme (deprecated)
import { shallow } from 'enzyme';
import Greeting from './Greeting';
test('displays hello message', () => {
const wrapper = shallow(<Greeting name="Alice" />);
expect(wrapper.text()).toEqual('Hello, Alice!');
});
jest-dom and chai-dom do not render anything. They only enhance assertions on DOM nodes that have already been rendered by another tool.
// jest-dom used alongside react-testing-library
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
const { container } = render(<button disabled>Click me</button>);
expect(container.querySelector('button')).toBeDisabled();
// chai-dom used with jsdom and mocha
import chai from 'chai';
import chaiDom from 'chai-dom';
chai.use(chaiDom);
const button = document.createElement('button');
button.disabled = true;
expect(button).to.be.disabled;
✅ Writing Readable Assertions
jest-dom shines in Jest environments by offering intuitive matchers:
// jest-dom
expect(element).toBeInTheDocument();
expect(element).toBeVisible();
expect(element).toHaveClass('active');
expect(input).toHaveValue('test');
chai-dom provides equivalent capabilities for Chai users:
// chai-dom
expect(element).to.be.inDocument;
expect(element).to.be.visible;
expect(element).to.have.class('active');
expect(input).to.have.value('test');
Note that neither defines how the element is obtained — that’s left to your test setup (e.g., via jsdom, react-testing-library, or manual DOM manipulation).
enzyme required manual traversal or assertions using its wrapper API:
// enzyme
expect(wrapper.find('button').prop('disabled')).toBe(true);
expect(wrapper.contains('Hello')).toBe(true);
These assertions often probed component internals rather than user-facing output.
⚠️ Maintenance and Compatibility Status
As of 2024:
enzymeis officially deprecated. Its GitHub repository states: "Enzyme is no longer being actively maintained... We recommend using React Testing Library instead." It does not support React 18+ features reliably and breaks with concurrent rendering.react-testing-library,jest-dom, andchai-domare actively maintained and compatible with modern React.
If you’re starting a new project, do not use Enzyme. If you maintain a legacy codebase using Enzyme, plan a migration to React Testing Library.
🔗 Typical Testing Stack Integrations
In practice, these tools are rarely used in isolation:
-
Jest + React Testing Library + jest-dom is the dominant stack for React testing today:
// Full modern test import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom'; import Button from './Button'; test('calls onClick when clicked', () => { const handleClick = vi.fn(); render(<Button onClick={handleClick} />); fireEvent.click(screen.getByRole('button')); expect(handleClick).toHaveBeenCalledTimes(1); }); -
Mocha + Chai + chai-dom + jsdom is a viable alternative for non-Jest environments:
// Mocha/Chai setup import { JSDOM } from 'jsdom'; import chai from 'chai'; import chaiDom from 'chai-dom'; chai.use(chaiDom); const dom = new JSDOM('<!DOCTYPE html><div id="root"></div>'); global.document = dom.window.document; global.window = dom.window; // Then render your component (e.g., via ReactDOM) and assert with chai-dom
enzyme historically paired with Mocha or Jest but required adapters for each React version, adding maintenance overhead.
🛠️ Handling User Interactions
Only react-testing-library provides built-in utilities for simulating realistic user events via fireEvent or userEvent:
// react-testing-library
fireEvent.change(input, { target: { value: 'new text' } });
// or better:
import userEvent from '@testing-library/user-event';
await userEvent.type(input, 'hello');
enzyme offered methods like .simulate('click'), but these triggered React synthetic events directly, not real DOM events, leading to gaps between test and real behavior.
jest-dom and chai-dom have no interaction APIs — they are assertion-only.
📌 Summary Table
| Package | Renders Components? | Simulates Events? | Provides DOM Assertions? | Test Runner Agnostic? | Maintenance Status |
|---|---|---|---|---|---|
react-testing-library | ✅ | ✅ (fireEvent) | ❌ (use with jest-dom) | ✅ | Actively maintained |
jest-dom | ❌ | ❌ | ✅ | ❌ (Jest-only) | Actively maintained |
chai-dom | ❌ | ❌ | ✅ | ✅ (Chai-compatible) | Actively maintained |
enzyme | ✅ | ✅ (limited) | ❌ | ✅ | Deprecated |
💡 Final Guidance
- For new React projects: Use
react-testing-library+jest-domwith Jest. This combination follows React team recommendations and focuses tests on user-visible behavior. - If you must use Mocha/Chai: Pair
react-testing-library(for rendering and events) withchai-dom(for assertions), usingjsdomas your DOM environment. - Avoid
enzymeentirely in new codebases. Its design conflicts with modern React, and migration paths to React Testing Library are well-documented.
The goal of testing isn’t to verify that your component’s internal state is correct — it’s to ensure users can achieve their goals. The tools that encourage this mindset (react-testing-library and its assertion companions) lead to more resilient, meaningful tests.
- enzyme:
Do not choose
enzymefor new projects. The library is officially deprecated as of 2023, with its maintainers recommending migration to React Testing Library. While Enzyme offered powerful APIs for shallow rendering and direct component instance inspection, it relies on internal React implementation details that are incompatible with modern React features like hooks and concurrent rendering. - jest-dom:
Choose
jest-domwhen writing tests with Jest and you need expressive, readable assertions on DOM elements (e.g.,toBeInTheDocument(),toBeDisabled()). It extends Jest’sexpectwith custom matchers focused solely on DOM state and does not provide tools for rendering components or simulating user interactions — it complements libraries like React Testing Library. - chai-dom:
Choose
chai-domif you're already using the Chai assertion library and need DOM-specific assertions (like checking element visibility or attributes) within a non-Jest test runner such as Mocha. It extends Chai’s BDD/TDD syntax with DOM helpers but doesn’t handle component rendering or user events — it only enhances assertions on existing DOM nodes. - react-testing-library:
Choose
react-testing-libraryfor new React projects because it encourages testing components as users interact with them — by querying the rendered DOM and firing real-like events. It integrates seamlessly with Jest (especially via@testing-library/jest-domfor assertions) and aligns with React’s current best practices, avoiding implementation details in favor of observable behavior.
Enzyme
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 manipulation and traversal.
Upgrading from Enzyme 2.x or React < 16
Are you here to check whether or not Enzyme is compatible with React 16? Are you currently using Enzyme 2.x? Great! Check out our migration guide for help moving on to Enzyme v3 where React 16 is supported.
Installation
To get started with enzyme, you can simply install it via npm. You will need to install enzyme along with an Adapter corresponding to the version of react (or other UI Component library) you are 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 on react and react-dom.
At the moment, Enzyme has adapters that provide compatibility with React 16.x, React 15.x,
React 0.14.x and React 0.13.x.
The following adapters are officially provided by enzyme, and have the following compatibility with React:
| Enzyme Adapter Package | React semver compatibility |
|---|---|
enzyme-adapter-react-16 | ^16.4.0-0 |
enzyme-adapter-react-16.3 | ~16.3.0-0 |
enzyme-adapter-react-16.2 | ~16.2 |
enzyme-adapter-react-16.1 | ~16.0.0-0 || ~16.1 |
enzyme-adapter-react-15 | ^15.5.0 |
enzyme-adapter-react-15.4 | 15.0.0-0 - 15.4.x |
enzyme-adapter-react-14 | ^0.14.0 |
enzyme-adapter-react-13 | ^0.13.0 |
Finally, you need to configure enzyme to use the adapter you want it to use. To do this, you can use
the top level configure(...) API.
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
3rd Party Adapters
It is possible for the community to create additional (non-official) adapters that will make enzyme work with other libraries. If you have made one and it's not included in the list below, feel free to make a PR to this README and add a link to it! The known 3rd party adapters are:
| Adapter Package | For Library | Status |
|---|---|---|
enzyme-adapter-preact-pure | preact | (stable) |
enzyme-adapter-inferno | inferno | (work in progress) |
Running Enzyme Tests
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 assertions and convenience functions for testing your React components, you can consider using:
chai-enzymewith Mocha/Chai.jasmine-enzymewith Jasmine.jest-enzymewith Jest.should-enzymefor should.js.expect-enzymefor expect.
Using Enzyme with React Native
Using Enzyme with Tape and AVA
Basic Usage
Shallow Rendering
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('renders an `.icon-star`', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('.icon-star')).to.have.lengthOf(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).to.have.property('callCount', 1);
});
});
Read the full API Documentation
Full DOM Rendering
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');
});
it('simulates click events', () => {
const onButtonClick = sinon.spy();
const wrapper = mount((
<Foo onButtonClick={onButtonClick} />
));
wrapper.find('button').simulate('click');
expect(onButtonClick).to.have.property('callCount', 1);
});
it('calls componentDidMount', () => {
sinon.spy(Foo.prototype, 'componentDidMount');
const wrapper = mount(<Foo />);
expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
Foo.prototype.componentDidMount.restore();
});
});
Read the full API Documentation
Static Rendered Markup
import React from 'react';
import { expect } from 'chai';
import { render } from 'enzyme';
import Foo from './Foo';
describe('<Foo />', () => {
it('renders three `.foo-bar`s', () => {
const wrapper = render(<Foo />);
expect(wrapper.find('.foo-bar')).to.have.lengthOf(3);
});
it('renders the title', () => {
const wrapper = render(<Foo title="unique" />);
expect(wrapper.text()).to.contain('unique');
});
});
Read the full API Documentation
React Hooks support
Enzyme supports react 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
ReactTestUtils.act() wrap
If you're using React 16.8+ and .mount(), Enzyme will wrap apis including .simulate(), .setProps(), .setContext(), .invoke() with ReactTestUtils.act() so you don't need to manually wrap it.
A common pattern to trigger handlers with .act() and assert is:
const wrapper = 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:
const wrapper = mount(<SomeComponent />);
wrapper.invoke('handler')();
expect(/* ... */);
Future
Contributing
See the Contributors Guide
In the wild
Organizations and projects using enzyme can list themselves here.