{"id":13904,"library":"react-shallow-renderer","title":"React Shallow Renderer","description":"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.","status":"deprecated","version":"16.15.0","language":"javascript","source_language":"en","source_url":"https://github.com/NMinhNguyen/react-shallow-renderer","tags":["javascript","react","react-native","react-testing"],"install":[{"cmd":"npm install react-shallow-renderer","lang":"bash","label":"npm"},{"cmd":"yarn add react-shallow-renderer","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-shallow-renderer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for rendering React components.","package":"react","optional":false}],"imports":[{"note":"The package converted to ES modules in v16.13.0. CommonJS `require` syntax will cause runtime errors in modern environments.","wrong":"const ShallowRenderer = require('react-shallow-renderer');","symbol":"ShallowRenderer","correct":"import ShallowRenderer from 'react-shallow-renderer';"}],"quickstart":{"code":"import ShallowRenderer from 'react-shallow-renderer';\nimport React from 'react';\n\nfunction Subcomponent(props) {\n  return <span>Sub: {props.foo}</span>;\n}\n\nfunction MyComponent() {\n  return (\n    <div>\n      <span className=\"heading\">Title</span>\n      <Subcomponent foo=\"bar\" />\n    </div>\n  );\n}\n\n// In your test file:\nconst renderer = new ShallowRenderer();\nrenderer.render(<MyComponent />);\nconst result = renderer.getRenderOutput();\n\nconsole.log('Rendered output type:', result.type);\nconsole.log('Rendered output props:', result.props);\n\n// Example assertions (requires a testing framework like Jest)\n// expect(result.type).toBe('div');\n// expect(result.props.children).toEqual([\n//   <span className=\"heading\">Title</span>,\n//   <Subcomponent foo=\"bar\" />,\n// ]);","lang":"javascript","description":"Demonstrates basic shallow rendering of a component and accessing its top-level output and props for testing."},"warnings":[{"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.","message":"React'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.","severity":"deprecated","affected_versions":">=16.15.0"},{"fix":"Update all imports from `const ShallowRenderer = require('react-shallow-renderer');` to `import ShallowRenderer from 'react-shallow-renderer';`.","message":"Starting 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.","severity":"breaking","affected_versions":">=16.13.0"},{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=16.13.1"},{"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.","message":"Shallow rendering does not support React `refs`. Attempts to access `this.refs` on a shallowly rendered component will result in `undefined` values and runtime errors.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"search_vec":"'/react':87 '/react-native':92 '16.15.0':51 '19':73 '2020':59 'activ':113 'altern':122 'api':135 'assert':24 'behavior':103 'child':37 'compar':123 'compon':14,28,38,65 'crucial':40 'current':47 'deep':20 'detail':107 'develop':80,114 'document':70 'dom':44 'environ':45 'enzym':127 'explicit':74 'fact':25 'featur':133 'feature-rich':132 'focus':100 'function':140 'histor':61 'implement':106 'instanti':34 'isol':64 'javascript':141 'last':54 'level':19,121 'librari':86,91,125 'like':126 'logic':66 'lower':120 'lower-level':119 'maintain':97 'make':116 'mean':22 'method':31 'migrat':82 'nativ':145 'octob':58 'offer':129 'offici':69 'one':18 'output':32 'packag':109 'provid':7 'rather':104 'react':1,4,13,67,72,142,144,147 'react-nat':143 'react-test':146 'recent':115 'recommend':75 'render':3,6,16,30,36,78,139 'requir':42 'rich':134 'robust':95 'seen':112 'shallow':2,5,77,138 'signific':55 'similar':137 'stabl':48 'test':12,85,90,98,148 'testing-librari':84,89 'unit':11 'updat':56 'urg':79 'use':62 'user':102 'util':9 'version':49 'without':33,41","created_at":"2026-04-20T01:56:54.758322+00:00","updated_at":"2026-04-20T01:56:54.758322+00:00","problems":[{"fix":"Switch to ES module import syntax: `import ShallowRenderer from 'react-shallow-renderer';`","cause":"Attempting to use `require('react-shallow-renderer')` after the package converted to ES modules in v16.13.0, or incorrect named import.","error":"TypeError: ShallowRenderer is not a constructor"},{"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.","cause":"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.","error":"TypeError: Cannot read property 'value' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://reactjs.org/","github":"https://github.com/NMinhNguyen/react-shallow-renderer","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-shallow-renderer","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}