CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-enzyme-adapter-react-16

React 16.x adapter for Enzyme testing library that enables shallow rendering, full DOM mounting, and static markup rendering of React components.

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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)

Install with Tessl CLI

npx tessl i tessl/npm-enzyme-adapter-react-16
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/enzyme-adapter-react-16@1.15.x
Publish Source
CLI
Badge
tessl/npm-enzyme-adapter-react-16 badge