or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

index.mddocs/

Enzyme Adapter React 16

Enzyme 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.

Package Information

  • Package Name: enzyme-adapter-react-16
  • Package Type: npm
  • Language: JavaScript (ES6/babel transpiled)
  • Installation: npm install enzyme-adapter-react-16

Core Imports

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

For CommonJS:

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

Basic Usage

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 />);

Architecture

The adapter is built around several key components:

  • ReactSixteenAdapter Class: Main adapter class that extends EnzymeAdapter and implements rendering strategies
  • Fiber Tree Navigation: Utilities for traversing React 16's fiber architecture (findCurrentFiberUsingSlowPath)
  • Fiber Tag Detection: Dynamic detection of React internal fiber constants (detectFiberTags)
  • Multiple Rendering Modes: Support for mount, shallow, and string rendering with React 16 specific optimizations
  • React 16 Feature Support: Handles Context API, Fragments, Portals, Suspense, Lazy components, and Hooks

Capabilities

Adapter Configuration

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 });

Renderer Creation

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);

Element and Node Manipulation

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);

Component Type Detection

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);

Context API Support

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);

React Integration

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 Version Compatibility

  • Supported Versions: React 16.0.0 and above
  • Peer Dependencies: Requires react@^16.0.0-0 and react-dom@^16.0.0-0
  • Feature Detection: Automatically detects and adapts to React 16.x minor version features
  • Version-Specific Features:
    • React 16.4+: Touch events and pointer events
    • React 16.5+: Auxiliary click events
    • React 16.6+: Context API improvements, Concurrent Mode
    • React 16.8+: Hooks support with automatic act() wrapping

React 16 Feature Support

  • Fiber Architecture: Full support for React 16's fiber reconciliation
  • Context API: Provider and Consumer component handling
  • Fragments: React.Fragment support
  • Portals: ReactDOM.createPortal support
  • Suspense: React.Suspense with fallback handling
  • Lazy Components: React.lazy with dynamic imports
  • Hooks: Compatible with React Hooks (with shallow rendering limitations)
  • Error Boundaries: getDerivedStateFromError and componentDidCatch support
  • Forward Refs: React.forwardRef support
  • Memoization: React.memo support

Error Handling

The adapter handles various React 16 specific error scenarios:

  • Fiber Tree Navigation Errors: Throws descriptive errors when fiber tree is corrupted
  • Unsupported Features: Clear error messages for unsupported operations (e.g., suspenseFallback in mount mode)
  • Version Compatibility: Automatic feature detection prevents version-specific errors
  • Component Lifecycle Errors: Proper error boundary simulation and reporting

Limitations

  • Shallow Rendering with Hooks: useEffect and useLayoutEffect don't execute in shallow rendering due to React's shallow renderer limitations
  • Hook Memoization: useCallback doesn't memoize in shallow rendering
  • Lazy Components: React.lazy is not supported in shallow rendering
  • Interactive Features: Some interactive features require specific React versions (16.4+ for touch events, 16.8+ for act wrapping)