Registry / testing / react-shallow-renderer

react-shallow-renderer

library16.15.0jsnpmunverified

React Shallow Renderer provides a utility for unit testing React components by rendering them "one level deep." This means it asserts facts about a component's `render` method output without instantiating or rendering child components, and crucially, without requiring a DOM environment. The current stable version is 16.15.0, with the last significant update in October 2020. While historically useful for isolating component logic, React's official documentation for React 19 explicitly recommends against shallow rendering, urging developers to migrate to `@testing-library/react` or `@testing-library/react-native` for more robust and maintainable tests that focus on user behavior rather than implementation details. The package has not seen active development recently, making it a lower-level alternative compared to libraries like Enzyme, which offers a more feature-rich API over similar shallow rendering functionality.

testing

npm install react-shallow-renderer

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-SHALLOW-REND

react-shallow-renderer

testingjavascriptv16.15.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ShallowRenderer

✓ import ShallowRenderer from 'react-shallow-renderer';

✗ const ShallowRenderer = require('react-shallow-renderer');

The package converted to ES modules in v16.13.0. CommonJS `require` syntax will cause runtime errors in modern environments.

Demonstrates basic shallow rendering of a component and accessing its top-level output and props for testing.

import ShallowRenderer from 'react-shallow-renderer'; import React from 'react'; function Subcomponent(props) { return <span>Sub: {props.foo}</span>; } function MyComponent() { return ( <div> <span className="heading">Title</span> <Subcomponent foo="bar" /> </div> ); } // In your test file: const renderer = new ShallowRenderer(); renderer.render(<MyComponent />); const result = renderer.getRenderOutput(); console.log('Rendered output type:', result.type); console.log('Rendered output props:', result.props); // Example assertions (requires a testing framework like Jest) // expect(result.type).toBe('div'); // expect(result.props.children).toEqual([ // <span className="heading">Title</span>, // <Subcomponent foo="bar" />, // ]);

Debug

Known issues

deprecatedReact's official documentation for React 19 strongly recommends against using shallow rendering for new projects and advises migrating existing tests to React Testing Library (`@testing-library/react`) for more maintainable and user-centric tests.

fix

Consider rewriting tests using `@testing-library/react` or `@testing-library/react-native` which focus on testing components from a user's perspective, without relying on implementation details.

affects: >=16.15.0

breakingStarting with v16.13.0, the package converted to ES modules. This is a breaking change for CommonJS users who will encounter errors if still using `require()` syntax.

fix

Update all imports from `const ShallowRenderer = require('react-shallow-renderer');` to `import ShallowRenderer from 'react-shallow-renderer';`.

affects: >=16.13.0

breakingVersion 16.13.1 removed the `module` field from `package.json`. This may affect some bundlers or tooling that relied on this field for module resolution.

fix

Ensure your bundler (e.g., Webpack, Rollup) is configured to correctly resolve ES modules from `package.json`'s `main` field or implicit ES module resolution rules.

affects: >=16.13.1

gotchaShallow rendering does not support React `refs`. Attempts to access `this.refs` on a shallowly rendered component will result in `undefined` values and runtime errors.

fix

If testing components that rely on `refs` (e.g., for direct DOM manipulation or imperative calls), shallow rendering is not suitable. Consider using `mount` from Enzyme or a full DOM rendering solution like React Testing Library with `@testing-library/react` which provides utilities for interacting with the rendered DOM.

affects: All versions

Errors

Common errors & fixes

TypeError: ShallowRenderer is not a constructor

Attempting to use `require('react-shallow-renderer')` after the package converted to ES modules in v16.13.0, or incorrect named import.

fix

Switch to ES module import syntax: `import ShallowRenderer from 'react-shallow-renderer';`

TypeError: Cannot read property 'value' of undefined

Trying to access a `ref` (e.g., `this.refs.myInput.value`) on a component that has been shallowly rendered. Shallow rendering does not instantiate actual DOM nodes or support refs.

fix

Shallow rendering is incompatible with `refs`. If your test requires interacting with `refs`, you must use a full DOM rendering solution (e.g., Enzyme's `mount` or React Testing Library) that simulates a browser environment. Alternatively, refactor your component to avoid direct ref usage in the logic being tested.

Upgrade

Version history

16.15.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for rendering React components.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/NMinhNguyen/react-shallow-renderer ↗

packagehttps://www.npmjs.com/package/react-shallow-renderer ↗

homepagehttps://reactjs.org/ ↗