react-test-renderer

What is react-test-renderer?

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.

What are react-test-renderer's main functionalities?

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

Other packages similar to react-test-renderer

enzyme

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

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.

README

react-test-renderer

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://facebook.github.io/jest/blog/2016/07/27/jest-14.html.

Changelog

16.9.0 (August 8, 2019)

React

• Add <React.Profiler> API for gathering performance measurements programmatically. (@bvaughn in #15172)
• Remove unstable_ConcurrentMode in favor of unstable_createRoot. (@acdlite in #15532)

React DOM

• Deprecate old names for the UNSAFE_* lifecycle methods. (@bvaughn in #15186 and @threepointone in #16103)
• Deprecate javascript: URLs as a common attack surface. (@sebmarkbage in #15047)
• Deprecate uncommon "module pattern" (factory) components. (@sebmarkbage in #15145)
• Add support for the disablePictureInPicture attribute on <video>. (@eek in #15334)
• Add support for onLoad event for <embed>. (@cherniavskii in #15614)
• Add support for editing useState state from DevTools. (@bvaughn in #14906)
• Add support for toggling Suspense from DevTools. (@gaearon in #15232)
• Warn when setState is called from useEffect, creating a loop. (@gaearon in #15180)
• Fix a memory leak. (@paulshen in #16115)
• Fix a crash inside findDOMNode for components wrapped in <Suspense>. (@acdlite in #15312)
• Fix pending effects from being flushed too late. (@acdlite in #15650)
• Fix incorrect argument order in a warning message. (@brickspert in #15345)
• Fix hiding Suspense fallback nodes when there is an !important style. (@acdlite in #15861 and #15882)
• Slightly improve hydration performance. (@bmeurer in #15998)

React DOM Server

• Fix incorrect output for camelCase custom CSS property names. (@bedakb in #16167)

React Test Utilities and Test Renderer

• Add act(async () => ...) for testing asynchronous state updates. (@threepointone in #14853)
• Add support for nesting act from different renderers. (@threepointone in #16039 and #16042)
• Warn in Strict Mode if effects are scheduled outside an act() call. (@threepointone in #15763 and #16041)
• Warn when using act from the wrong renderer. (@threepointone in #15756)

ESLint Plugin: React Hooks

• Report Hook calls at the top level as a violation. (gaearon in #16455)