@types/enzyme

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