Enzyme — React Component Testing Utilities

Introduction

Enzyme is a testing utility developed by Airbnb for React components. It provides an API for shallow rendering, full DOM rendering, and static rendering of React trees, making it straightforward to test component behavior and output without a browser.

What Enzyme Does

• Shallow renders components in isolation without child component rendering
• Full DOM renders components with lifecycle methods and child trees via mount()
• Traverses rendered output using CSS selectors and React component selectors
• Simulates user events like clicks, form input, and keyboard actions
• Inspects component state, props, and context programmatically

Architecture Overview

Enzyme abstracts React's rendering internals through adapters, one per React major version. The adapter translates between Enzyme's API and React's reconciler, enabling shallow or full rendering. The ShallowWrapper and ReactWrapper classes expose jQuery-like traversal methods (find, filter, children, parents) over the rendered component tree.

Self-Hosting & Configuration

• Install enzyme and the correct adapter package for your React version
• Call Enzyme.configure({ adapter }) once in your test setup file
• Works with any test runner: Jest, Mocha, Jasmine, or AVA
• Add enzyme-to-json for snapshot testing integration with Jest
• No build step required; import directly in test files

Key Features

• Shallow rendering isolates the component under test from its children
• jQuery-like traversal API (find, closest, filter, at) for intuitive assertions
• Built-in event simulation for testing user interactions
• Direct access to component instance, state, and props
• Adapter system supports React 15, 16, and community adapters for 17+

Comparison with Similar Tools

• React Testing Library — Tests components through user-facing behavior rather than implementation details; the current React team recommendation
• Jest — Test runner and assertion library; often used alongside Enzyme or React Testing Library
• Cypress Component Testing — Runs component tests in a real browser with visual feedback
• Vitest — Fast Vite-native test runner; pairs with Testing Library for React component tests

FAQ

Q: Is Enzyme still maintained? A: Enzyme has limited maintenance. The React team recommends React Testing Library for new projects. Enzyme remains functional for existing codebases on React 16 and earlier.

Q: Does Enzyme work with React 18? A: There is no official adapter for React 18. Community forks exist but may not cover all features. Projects on React 18+ should consider migrating to React Testing Library.

Q: What is the difference between shallow and mount? A: shallow() renders only the component itself with placeholder children, making tests faster and more isolated. mount() renders the full component tree including children and lifecycle methods.

Q: Can I use Enzyme with Jest? A: Yes. Enzyme handles rendering and traversal while Jest provides the test runner, assertions, and mocking infrastructure.

Sources

• https://github.com/enzymejs/enzyme
• https://enzymejs.github.io/enzyme/