@types/react-test-renderer

What is @types/react-test-renderer?

The @types/react-test-renderer package provides TypeScript type definitions for react-test-renderer, which is a React package for rendering components to pure JavaScript objects without depending on the DOM or a native mobile environment. This is particularly useful for testing React components in a more isolated environment. The type definitions allow developers to use react-test-renderer in TypeScript projects with the benefits of type checking and autocompletion.

What are @types/react-test-renderer's main functionalities?

Rendering React components to JSON

This feature allows you to render a React component and convert it to a JSON representation, which can be used for snapshot testing or analyzing the component's structure.

import TestRenderer from 'react-test-renderer';
import MyComponent from './MyComponent';

const testRenderer = TestRenderer.create(<MyComponent />);
const testInstance = testRenderer.toJSON();
console.log(testInstance);

Inspecting the output

This feature enables you to inspect the output of the rendered component, such as finding elements by type or props and checking their properties.

import TestRenderer from 'react-test-renderer';
import MyComponent from './MyComponent';

const testRenderer = TestRenderer.create(<MyComponent />);
const testInstance = testRenderer.root;
console.log(testInstance.findByType('button').props);

Updating the state and props of the component

This feature allows you to update the state and props of the component within the test renderer environment, enabling you to test the component's behavior in response to state and prop changes.

import TestRenderer from 'react-test-renderer';
import MyComponent from './MyComponent';

const testRenderer = TestRenderer.create(<MyComponent />);
const testInstance = testRenderer.root;
testInstance.findByType(MyComponent).instance.setState({ someState: 'new value' });
testRenderer.update(<MyComponent someProp='new value' />);

Other packages similar to @types/react-test-renderer

enzyme

Enzyme is a JavaScript testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output. It provides more granular manipulation of components compared to react-test-renderer, such as simulating events and shallow rendering.

react-testing-library

React Testing Library is a set of helpers that let you test React components without relying on their implementation details. It focuses on testing components as the user would use them, which is a different philosophy compared to react-test-renderer's more structural approach.

README

Installation

npm install --save @types/react-test-renderer

Summary

This package contains type definitions for react-test-renderer (https://facebook.github.io/react/).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-test-renderer/v16.

Additional Details

• Last updated: Mon, 18 Sep 2023 19:05:36 GMT
• Dependencies: @types/react
• Global values: none

Credits

These definitions were written by Arvitaly, Lochbrunner, John Reilly, John Gozde, Jessica Franco, and Dhruv Jain.