@types/enzyme

What is @types/enzyme?

The @types/enzyme package provides TypeScript type definitions for Enzyme, a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output. It allows developers to write more robust and maintainable tests by providing a simpler way to simulate user interactions, manage component state, and inspect the rendered output. The type definitions ensure that TypeScript users can leverage Enzyme in a type-safe manner, benefiting from compile-time type checking and IntelliSense in their IDE.

What are @types/enzyme's main functionalities?

Shallow Rendering

Shallow rendering is useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behavior of child components. The code sample demonstrates how to perform a shallow render of a React component using Enzyme.

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

const wrapper = shallow(<MyComponent />);
console.log(wrapper.debug());

Full DOM Rendering

Full DOM rendering is ideal for use cases where you have components that may interact with DOM APIs, or require the full lifecycle to be executed (including componentDidMount, componentDidUpdate, etc.). This code sample shows how to mount a component in the DOM using Enzyme, allowing you to test component lifecycle and behavior.

import { mount } from 'enzyme';
import MyComponent from './MyComponent';

const wrapper = mount(<MyComponent />);
console.log(wrapper.debug());

Static Rendering

Static rendering is used to render the component to static HTML and analyze the resulting HTML structure. It's useful for generating HTML snapshots of components. The code sample illustrates how to statically render a component and log its text content.

import { render } from 'enzyme';
import MyComponent from './MyComponent';

const wrapper = render(<MyComponent />);
console.log(wrapper.text());

Other packages similar to @types/enzyme

@testing-library/react

Similar to Enzyme, React Testing Library is a very popular library for testing React components. Unlike Enzyme, React Testing Library focuses on testing components in a way that simulates actual user interactions more closely, encouraging better testing practices by relying on the component's output rather than its internal state or lifecycle methods.

react-test-renderer

This package provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. It's similar to Enzyme's static rendering but is officially maintained by the React team. It's useful for snapshot testing.

README

Installation

npm install --save @types/enzyme

Summary

This package contains type definitions for enzyme (https://github.com/airbnb/enzyme).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/enzyme.

Additional Details

• Last updated: Tue, 05 Dec 2023 16:38:07 GMT
• Dependencies: @types/cheerio, @types/react

Credits

These definitions were written by Marian Palkus, Cap3, Ivo Stratev, jwbay, huhuanming, MartynasZilinskas, Torgeir Hovden, Martin Hochel, Christian Rackerseder, Mateusz Sokoła, Braiden Cutforth, Erick Zhao, Jack Tomaszewski, and Jordan Harband.