react-test-renderer
Advanced tools
The react-test-renderer package is designed for testing React components in a more efficient and lightweight manner. It provides a renderer that can be used to render React components into pure JavaScript objects without depending on the DOM or a native mobile environment. This makes it ideal for testing components in isolation from the browser or any other external environment.
Rendering components to JSON
This feature allows you to render a React component and generate a JSON output of the rendered component. This is useful for snapshot testing, where you can compare the current version of the component with a previously stored snapshot.
import React from 'react';
import renderer from 'react-test-renderer';
const component = renderer.create(<MyComponent />);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();Testing component output
This feature enables testing of the component's output. You can inspect the rendered component to verify that it has the expected props, state, or behavior. This is useful for ensuring that your component behaves correctly under various conditions.
import React from 'react';
import renderer from 'react-test-renderer';
const component = renderer.create(<MyComponent prop='value' />);
const instance = component.root;
expect(instance.props.prop).toBe('value');Interacting with component instances
This feature allows you to interact with the component instances directly. You can simulate events or call methods on the component instance and then re-render. This is useful for testing the component's behavior in response to user interactions or lifecycle events.
import React from 'react';
import renderer from 'react-test-renderer';
class MyComponent extends React.Component {
state = { clicked: false };
handleClick = () => {
this.setState({ clicked: true });
};
render() {
return (<button onClick={this.handleClick}>Click me</button>);
}
}
const component = renderer.create(<MyComponent />);
const button = component.root.findByType('button');
button.props.onClick();
expect(component.toJSON()).toMatchSnapshot();Enzyme is a popular testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output. Unlike react-test-renderer, Enzyme allows you to simulate events and provides a more jQuery-like API for selecting elements. However, it requires an adapter to work with different versions of React.
React Testing Library is a set of helpers that let you test React components without relying on their implementation details. This approach encourages better testing practices by focusing on the behavior of components rather than their internal structure. It's more aligned with user interaction compared to react-test-renderer, which is more about rendering components to JSON for snapshot testing.
react-test-renderer (DEPRECATED)react-test-renderer is deprecated and no longer maintained. It will be removed in a future version. As of React 19, you will see a console warning when invoking ReactTestRenderer.create().
This library creates a contrived environment and its APIs encourage introspection on React's internals, which may change without notice causing broken tests. It is instead recommended to use browser-based environments such as jsdom and standard DOM APIs for your assertions.
The React team recommends @testing-library/react as a modern alternative that uses standard APIs, avoids internals, and promotes best practices.
The React team recommends @testing-library/react-native as a replacement for react-test-renderer for native integration tests. This React Native testing-library variant follows the same API design as described above and promotes better testing patterns.
This package provides an experimental React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.
Essentially, this package makes it easy to grab a snapshot of the "DOM tree" rendered by a React DOM or React Native component without using a browser or jsdom.
Documentation: https://reactjs.org/docs/test-renderer.html
Usage:
const ReactTestRenderer = require('react-test-renderer');
const renderer = ReactTestRenderer.create(
<Link page="https://www.facebook.com/">Facebook</Link>
);
console.log(renderer.toJSON());
// { type: 'a',
// props: { href: 'https://www.facebook.com/' },
// children: [ 'Facebook' ] }
You can also use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: https://jestjs.io/blog/2016/07/27/jest-14.html.
19.1.0 (March 28, 2025)
An Owner Stack is a string representing the components that are directly responsible for rendering a particular component. You can log Owner Stacks when debugging or use Owner Stacks to enhance error overlays or other development tools. Owner Stacks are only available in development builds. Component Stacks in production are unchanged.
useId to use valid CSS selectors, changing format from :r123: to «r123». #32001href attribute is an empty string #31783getHoistableRoot() didn’t work properly when the container was a Document #32321<!-- -->) as a DOM container. #32250<script> and <template> tags to be nested within <select> tags. #31837exports field to package.json for use-sync-external-store to support various entrypoints. #25231unstable_prerender, a new experimental API for prerendering React Server Components on the server #31724registerServerReference in client builds to handle server references in different environments. #32534FAQs
React package for snapshot testing.
The npm package react-test-renderer receives a total of 4,152,819 weekly downloads. As such, react-test-renderer popularity was classified as popular.
We found that react-test-renderer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious Ruby gems typosquat Fastlane plugins to steal Telegram bot tokens, messages, and files, exploiting demand after Vietnam’s Telegram ban.
Research
Security News
Socket uncovered four malicious npm packages that exfiltrate up to 85% of a victim’s Ethereum or BSC wallet using obfuscated JavaScript.
Security News
TC39 advances 9 JavaScript proposals, including Array.fromAsync, Error.isError, and Explicit Resource Management, which are now headed into the ECMAScript spec.