Enzyme React 16 Adapter

Common errors

• Invariant Violation: Adapter not found.

  cause Enzyme was imported but not configured with an adapter.
  fix You must call `Enzyme.configure({ adapter: new Adapter() });` at the beginning of your test setup file (e.g., `setupTests.js` or `setupFilesAfterEnv` in Jest).

• Cannot read properties of undefined (reading 'configure')

  cause The `Enzyme` object was not correctly imported or is undefined when attempting to call `configure`.
  fix Ensure `import Enzyme from 'enzyme';` is present and correctly resolved by your module system. Verify `enzyme` is installed as a dependency.

• TypeError: Cannot read properties of undefined (reading 'simulate')

  cause This often occurs when trying to simulate events on a component rendered with `shallow` that itself contains a DOM element or component which is not directly rendered by the parent (e.g., trying to simulate click on a child component's internal button). `shallow` rendering only renders the component one level deep, not its children's internals. Or it may indicate the element you are trying to simulate on doesn't exist.
  fix For simulating interactions that require the full component tree, use `mount` instead of `shallow`. Alternatively, ensure the element you are selecting exists within the shallowly rendered component's immediate output, or use `dive()` to interact with the internals of a direct child. Remember `mount` requires a DOM environment (like JSDOM).

Warnings

• breaking Enzyme v3 introduced breaking changes from v2, particularly around how adapters are configured and internal API changes due to React 16's updated reconciler. Projects upgrading from Enzyme 2.x or React versions prior to 16 must consult the migration guide.
  Fix: Refer to the official Enzyme migration guide for upgrading from v2 to v3, and ensure `enzyme-adapter-react-16` is installed and correctly configured.
• gotcha This adapter is strictly for React 16. Using it with other React versions (e.g., React 15, 17, 18) will lead to compatibility issues or errors. Each major React version typically requires its specific Enzyme adapter.
  Fix: Ensure you install and configure the correct `enzyme-adapter-react-X` package corresponding to your project's React version. For React 17, an unofficial adapter like `@wojtekmaj/enzyme-adapter-react-17` exists, and for React 18, `@cfaester/enzyme-adapter-react-18` is an unofficial option, but a full migration to React Testing Library is generally recommended for newer React versions.
• deprecated The Enzyme library and its adapters are no longer actively maintained for recent React versions (React 17, 18+). It has fallen behind changes in React's internal implementation (e.g., Hooks, Suspense, Concurrent Mode), leading to incomplete support and a generally stalled development. The community has largely moved to React Testing Library as the de-facto standard for React component testing.
  Fix: For new projects or when migrating existing tests, strongly consider adopting React Testing Library, which focuses on user-centric testing and aligns better with modern React practices. For existing Enzyme test suites, consider a phased migration strategy.

Install

• npm install enzyme-adapter-react-16 npm
• yarn add enzyme-adapter-react-16 yarn
• pnpm add enzyme-adapter-react-16 pnpm

Imports

• Enzyme
  wrong:

  const Enzyme = require('enzyme');

  correct:

  import Enzyme from 'enzyme';

  ESM import is preferred in modern setups. Ensure your test environment supports ES modules, or use CommonJS require if necessary, typically with Babel/Webpack configuration.
• Adapter
  wrong:

  const Adapter = require('enzyme-adapter-react-16');

  correct:

  import Adapter from 'enzyme-adapter-react-16';

  This specific adapter is for React 16. If you are using a different React version, you must import the corresponding adapter (e.g., `enzyme-adapter-react-17`).
• configure
  wrong:

  configure({ adapter: new Adapter() });

  correct:

  Enzyme.configure({ adapter: new Adapter() });

  The `configure` method is a static method of the `Enzyme` object and must be called on it.

Quickstart

This quickstart demonstrates how to configure Enzyme with `enzyme-adapter-react-16` and then write a basic shallow rendering test for a React 16 functional component, asserting on its rendered output and prop updates. It assumes a test runner like Jest is set up.

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import React from 'react';
import { shallow } from 'enzyme';

// Configure Enzyme with the React 16 adapter
Enzyme.configure({ adapter: new Adapter() });

// A simple React component for testing
const MyComponent = ({ name }) => <h1>Hello, {name}!</h1>;

describe('MyComponent', () => {
  it('renders a greeting with the provided name', () => {
    const wrapper = shallow(<MyComponent name="World" />);
    expect(wrapper.find('h1').text()).toEqual('Hello, World!');
  });

  it('updates the greeting when props change', () => {
    const wrapper = shallow(<MyComponent name="Initial" />);
    expect(wrapper.find('h1').text()).toEqual('Hello, Initial!');
    wrapper.setProps({ name: 'Updated' });
    expect(wrapper.find('h1').text()).toEqual('Hello, Updated!');
  });
});