React 16.x adapter for Enzyme testing library that enables shallow rendering, full DOM mounting, and static markup rendering of React components.
npx @tessl/cli install tessl/npm-enzyme-adapter-react-16@1.15.0Enzyme Adapter React 16 is a testing adapter that enables Enzyme (a JavaScript testing utility for React) to work with React version 16.x. It serves as a bridge between Enzyme's testing API and React 16's internal fiber architecture, allowing developers to mount, shallow render, and traverse React components for testing purposes.
npm install enzyme-adapter-react-16import Adapter from "enzyme-adapter-react-16";For CommonJS:
const Adapter = require("enzyme-adapter-react-16");import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
// Configure Enzyme to use React 16 adapter
Enzyme.configure({ adapter: new Adapter() });
// Now you can use Enzyme's testing methods
import { shallow, mount, render } from "enzyme";
import MyComponent from "./MyComponent";
// Shallow rendering
const wrapper = shallow(<MyComponent />);
// Full DOM rendering
const wrapper2 = mount(<MyComponent />);
// Static rendering
const wrapper3 = render(<MyComponent />);The adapter is built around several key components:
findCurrentFiberUsingSlowPath)detectFiberTags)Main ReactSixteenAdapter class that provides React 16.x compatibility for Enzyme.
/**
* ReactSixteenAdapter class - Main adapter for React 16.x compatibility
* Extends EnzymeAdapter to provide React 16-specific rendering capabilities
*/
class ReactSixteenAdapter extends EnzymeAdapter {
constructor();
}Usage:
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
// Create and configure adapter instance
const adapter = new Adapter();
Enzyme.configure({ adapter });Methods for creating different types of renderers for React components.
/**
* Creates mount renderer for full DOM rendering
* @param {object} options - Mount rendering options
* @returns {object} Mount renderer with render, unmount, getNode, simulateError, simulateEvent, batchedUpdates methods
*/
createMountRenderer(options);
/**
* Creates shallow renderer for component isolation testing
* @param {object} options - Shallow rendering options (optional, can include suspenseFallback)
* @returns {object} Shallow renderer with render, unmount, getNode, simulateError, simulateEvent, batchedUpdates, checkPropTypes methods
*/
createShallowRenderer(options = {});
/**
* Creates string renderer for static markup generation
* @param {object} options - String rendering options
* @returns {object} String renderer with render method
*/
createStringRenderer(options);
/**
* Factory method that creates appropriate renderer based on mode
* @param {object} options - Configuration object with mode property
* @returns {object} Renderer based on specified mode (mount/shallow/string)
*/
createRenderer(options);Utilities for converting between React elements and Enzyme's internal node representations.
/**
* Wraps element for Enzyme compatibility
* @param {ReactElement} element - React element to wrap
* @returns {object} Wrapped element
*/
wrap(element);
/**
* Converts RST node to JSX element
* @param {object} node - RST node object
* @returns {ReactElement|null} React element or null
*/
nodeToElement(node);
/**
* Converts React element to RST node
* @param {ReactElement} element - React element
* @returns {object} RST node representation
*/
elementToNode(element);
/**
* Converts node to host DOM node
* @param {object} node - RST node
* @param {boolean} supportsArray - Whether to support array returns (default: false)
* @returns {Element|Element[]|null} DOM node or array of DOM nodes
*/
nodeToHostNode(node, supportsArray = false);Methods for identifying and working with different React component types.
/**
* Gets display name of component node
* @param {object} node - Component node
* @returns {string|null} String display name or null
*/
displayNameOfNode(node);
/**
* Checks if element is valid React element
* @param {any} element - Element to validate
* @returns {boolean} Boolean indicating validity
*/
isValidElement(element);
/**
* Checks if object is valid element type
* @param {any} object - Object to validate
* @returns {boolean} Boolean indicating validity
*/
isValidElementType(object);
/**
* Checks if node is React Fragment
* @param {object} fragment - Node to check
* @returns {boolean} Boolean indicating if Fragment
*/
isFragment(fragment);
/**
* Checks if type is custom component
* @param {any} type - Component type
* @returns {boolean} Boolean indicating if custom component
*/
isCustomComponent(type);
/**
* Checks if type is Context Consumer
* @param {any} type - Component type
* @returns {boolean} Boolean indicating if Context Consumer
*/
isContextConsumer(type);
/**
* Checks if instance is custom component element
* @param {any} inst - Component instance
* @returns {boolean} Boolean indicating if custom component element
*/
isCustomComponentElement(inst);
/**
* Compares node type with target type
* @param {object} node - Node to check
* @param {any} matchingType - Type to match against
* @returns {boolean} Boolean indicating match result
*/
matchesElementType(node, matchingType);Methods for working with React Context API providers and consumers.
/**
* Gets Provider from Consumer component
* @param {object} Consumer - React Context Consumer
* @returns {object} Provider component
*/
getProviderFromConsumer(Consumer);Direct React integration utilities.
/**
* Creates React element
* @param {...any} args - Arguments passed to React.createElement
* @returns {ReactElement} React element
*/
createElement(...args);
/**
* Wraps node with wrapping component
* @param {object} node - Node to wrap
* @param {object} options - Wrapping options
* @returns {object} Object with RootFinder and wrapped node
*/
wrapWithWrappingComponent(node, options);react@^16.0.0-0 and react-dom@^16.0.0-0act() wrappingThe adapter handles various React 16 specific error scenarios:
useEffect and useLayoutEffect don't execute in shallow rendering due to React's shallow renderer limitationsuseCallback doesn't memoize in shallow rendering