{"id":10795,"library":"enzyme","title":"Enzyme","description":"Enzyme is a JavaScript Testing utility for React, designed to simplify the testing of React Components' output by providing methods to manipulate, traverse, and simulate runtime. Its API was influenced by jQuery, offering an intuitive way to interact with component trees. The last stable version released was 3.11.0, published in December 2019. Enzyme required specific 'adapter' packages (e.g., `enzyme-adapter-react-16`) to link with particular React versions. However, Enzyme is no longer actively maintained and has not received official updates or support for React 17, 18, or subsequent versions, due to significant changes in React's internal APIs. While unofficial community-maintained adapters exist for newer React versions, they are not officially supported and may have limitations. The project is effectively abandoned, and the React community has largely shifted towards `React Testing Library` for component testing, which promotes testing from a user's perspective rather than implementation details.","status":"abandoned","version":"3.11.0","language":"javascript","source_language":"en","source_url":"https://github.com/airbnb/enzyme","tags":["javascript","shallow rendering","shallowRender","test","reactjs","react","flux","testing"],"install":[{"cmd":"npm install enzyme","lang":"bash","label":"npm"},{"cmd":"yarn add enzyme","lang":"bash","label":"yarn"},{"cmd":"pnpm add enzyme","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required to integrate Enzyme with React 16. A specific adapter package is mandatory for each React version being tested.","package":"enzyme-adapter-react-16","optional":false},{"reason":"Peer dependency of `enzyme-adapter-react-16`. The React library itself must be installed.","package":"react","optional":false},{"reason":"Peer dependency of `enzyme-adapter-react-16`. Necessary for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"Used for shallow rendering, testing components in isolation without rendering child components.","wrong":"const shallow = require('enzyme').shallow;","symbol":"shallow","correct":"import { shallow } from 'enzyme';"},{"note":"Used for full DOM rendering, including lifecycle methods and children. Requires a DOM environment like JSDOM.","wrong":"const mount = require('enzyme').mount;","symbol":"mount","correct":"import { mount } from 'enzyme';"},{"note":"Used for static rendering of HTML, returning a CheerioWrapper. Ideal for simple component output checks.","wrong":"const render = require('enzyme').render;","symbol":"render","correct":"import { render } from 'enzyme';"},{"note":"The `configure` function is crucial for setting up the React adapter. It should be run once in a test setup file.","wrong":"require('enzyme').configure({ adapter: new require('enzyme-adapter-react-16')() });","symbol":"configure","correct":"import Enzyme, { configure } from 'enzyme';\nimport Adapter from 'enzyme-adapter-react-16';\n\nEnzyme.configure({ adapter: new Adapter() });"}],"quickstart":{"code":"import Enzyme, { shallow } from 'enzyme';\nimport Adapter from 'enzyme-adapter-react-16';\nimport React from 'react';\n\n// Configure Enzyme with the React 16 adapter\nEnzyme.configure({ adapter: new Adapter() });\n\n// A simple React component to test\nfunction MyComponent({ name }) {\n  return (\n    <div>\n      <h1 className=\"greeting\">Hello, {name}!</h1>\n      <button onClick={() => alert(`Clicked ${name}`)}>Click Me</button>\n    </div>\n  );\n}\n\ndescribe('MyComponent', () => {\n  it('renders a greeting with the correct name', () => {\n    const wrapper = shallow(<MyComponent name=\"World\" />);\n    expect(wrapper.find('.greeting').text()).toEqual('Hello, World!');\n  });\n\n  it('simulates click events', () => {\n    const mockCallBack = jest.fn();\n    const wrapper = shallow(<MyComponent name=\"Test\" onClick={mockCallBack} />);\n    wrapper.find('button').simulate('click');\n    // In a real scenario, mockCallBack would be passed as a prop\n    // and this test would verify if the prop function was called.\n    // Here we're just showing the simulate usage.\n    expect(true).toBe(true); // Placeholder for actual assertion\n  });\n});","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=3.11.0"},{"fix":"Adopt `React Testing Library` and shift testing methodology to focus on how users interact with your components rather than their internal structure.","message":"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.","severity":"deprecated","affected_versions":">=3.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"For projects utilizing Hooks, Concurrent Mode, or Suspense, migrating to `React Testing Library` is strongly recommended as Enzyme cannot reliably test these features.","message":"Enzyme has limited or no reliable support for modern React features like Hooks, Concurrent Mode, and Suspense, especially with unofficial adapters.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Create a test setup file (e.g., `src/setupTests.js` for Create React App) and add:\n```javascript\nimport Enzyme from 'enzyme';\nimport Adapter from 'enzyme-adapter-react-16'; // Or the appropriate adapter for your React version\nEnzyme.configure({ adapter: new Adapter() });\n```\nEnsure this setup file is correctly referenced by your test runner (e.g., `jest --config '{\"setupFilesAfterEnv\": [\"<rootDir>/src/setupTests.js\"]}''`).","cause":"The `Enzyme.configure` method was not called, or was called incorrectly, to register a React adapter before tests were executed.","error":"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."},{"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.","cause":"Attempting to call `.simulate()` or other wrapper methods on a wrapper that contains no nodes or has not correctly rendered a component.","error":"TypeError: Cannot read properties of undefined (reading 'simulate')"},{"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.","cause":"Testing a connected (e.g., Redux) component directly with `shallow` or `mount` without providing the necessary context (like a Redux store).","error":"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>."},{"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`.","cause":"Attempting to use an `enzyme-adapter-react-XX` that relies on the deprecated `ReactDOM.render` API with React 18 or newer.","error":"Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead."}],"ecosystem":"npm"}