Enzyme

Common errors

• Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })` once at the top of your test suite before any tests run.

  cause The `Enzyme.configure` method was not called, or was called incorrectly, to register a React adapter before tests were executed.
  fix Create a test setup file (e.g., `src/setupTests.js` for Create React App) and add: ```javascript import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; // Or the appropriate adapter for your React version Enzyme.configure({ adapter: new Adapter() }); ``` Ensure this setup file is correctly referenced by your test runner (e.g., `jest --config '{"setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"]}''`).

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

  cause Attempting to call `.simulate()` or other wrapper methods on a wrapper that contains no nodes or has not correctly rendered a component.
  fix Verify that the selector used to find the element (`wrapper.find('button')`) is correct and that the component renders as expected. If using `shallow`, ensure the target element is directly rendered by the component being tested or use `.dive()` if interacting with a child component. Ensure you are not trying to simulate events on a non-interactive element or an element that doesn't exist.

• Invariant Violation: Could not find 'store' in the context of 'Connect(MyComponent)'. Either pass it as a prop to 'Connect(MyComponent)' or wrap it in a <Provider>.

  cause Testing a connected (e.g., Redux) component directly with `shallow` or `mount` without providing the necessary context (like a Redux store).
  fix When testing connected components, either shallow render the unconnected component directly, or `mount` the connected component wrapped in a `Provider` with a mock store. For `shallow` tests, use `shallow(<ConnectedComponent store={mockStore} />)` or `shallow(<ConnectedComponent />).dive()` to get to the underlying component if it's connected.

• Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead.

  cause Attempting to use an `enzyme-adapter-react-XX` that relies on the deprecated `ReactDOM.render` API with React 18 or newer.
  fix This warning indicates Enzyme's fundamental incompatibility with modern React rendering mechanisms. While unofficial adapters like `@cfaester/enzyme-adapter-react-18` attempt to bridge this, they are workarounds. The recommended fix is to migrate tests to `React Testing Library`.

Warnings

• breaking Enzyme is no longer officially maintained and has no official adapters for React versions 17, 18, or 19+. Attempting to use it with these versions without unofficial, community-maintained adapters will fail.
  Fix: Migrate testing suites to `React Testing Library` for modern React versions. If migration is not immediately feasible, consider using unofficial adapters (e.g., `@wojtekmaj/enzyme-adapter-react-17` or `@cfaester/enzyme-adapter-react-18`) with caution, as they are not guaranteed to be stable or fully compatible.
• deprecated Enzyme's philosophy of testing React components by directly accessing internal state and implementation details is now largely considered an anti-pattern. Modern React testing best practices, promoted by `React Testing Library`, focus on testing user-visible behavior.
  Fix: Adopt `React Testing Library` and shift testing methodology to focus on how users interact with your components rather than their internal structure.
• gotcha A correct `enzyme-adapter-react-XX` package must be installed and configured for the specific major version of React being used (e.g., `enzyme-adapter-react-16` for React 16). Forgetting this step or using the wrong adapter will result in runtime errors.
  Fix: Ensure `npm i --save-dev enzyme-adapter-react-XX` is run, and `Enzyme.configure({ adapter: new Adapter() })` is called in your test setup file, matching your React version.
• gotcha Enzyme has limited or no reliable support for modern React features like Hooks, Concurrent Mode, and Suspense, especially with unofficial adapters.
  Fix: For projects utilizing Hooks, Concurrent Mode, or Suspense, migrating to `React Testing Library` is strongly recommended as Enzyme cannot reliably test these features.

Install

• npm install enzyme npm
• yarn add enzyme yarn
• pnpm add enzyme pnpm

Imports

• shallow
  wrong:

  const shallow = require('enzyme').shallow;

  correct:

  import { shallow } from 'enzyme';

  Used for shallow rendering, testing components in isolation without rendering child components.
• mount
  wrong:

  const mount = require('enzyme').mount;

  correct:

  import { mount } from 'enzyme';

  Used for full DOM rendering, including lifecycle methods and children. Requires a DOM environment like JSDOM.
• render
  wrong:

  const render = require('enzyme').render;

  correct:

  import { render } from 'enzyme';

  Used for static rendering of HTML, returning a CheerioWrapper. Ideal for simple component output checks.
• configure
  wrong:

  require('enzyme').configure({ adapter: new require('enzyme-adapter-react-16')() });

  correct:

  import Enzyme, { configure } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  
  Enzyme.configure({ adapter: new Adapter() });

  The `configure` function is crucial for setting up the React adapter. It should be run once in a test setup file.

Quickstart

This quickstart demonstrates how to configure Enzyme with an adapter for React 16 and perform basic shallow rendering and event simulation on a functional React component.

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

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

// A simple React component to test
function MyComponent({ name }) {
  return (
    <div>
      <h1 className="greeting">Hello, {name}!</h1>
      <button onClick={() => alert(`Clicked ${name}`)}>Click Me</button>
    </div>
  );
}

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

  it('simulates click events', () => {
    const mockCallBack = jest.fn();
    const wrapper = shallow(<MyComponent name="Test" onClick={mockCallBack} />);
    wrapper.find('button').simulate('click');
    // In a real scenario, mockCallBack would be passed as a prop
    // and this test would verify if the prop function was called.
    // Here we're just showing the simulate usage.
    expect(true).toBe(true); // Placeholder for actual assertion
  });
});