shallow, mount & render

Three Rendering Modes

import { shallow, mount, render } from 'enzyme';

shallow(<UserCard user={user} />);  // renders 1 level deep, children stay as placeholders
mount(<UserCard user={user} />);    // full real (jsdom) DOM render, children included
render(<UserCard user={user} />);   // static HTML via Cheerio, no lifecycle/events

shallow() isolates the component from its children's implementation — a child's bug won't break the parent's test. It doesn't attach to a real DOM, so it can't be used for things needing genuine DOM behavior (focus, real event bubbling, layout). mount() attaches to a real jsdom DOM but is more expensive per test — reserve it for cases that actually need child integration or DOM behavior.

Finding & Reading Output

const wrapper = shallow(<UserCard user={user} />);

wrapper.find('.user-name');          // CSS-like selector
wrapper.find(Avatar);                // component selector
wrapper.find('[disabled]');          // prop selector

wrapper.text();    // rendered text, no tags
wrapper.html();    // full HTML markup
wrapper.props();   // props on the wrapped node
wrapper.hasClass('active');
wrapper.find('.error').exists();

Simulating Events

wrapper.find('button').simulate('click');
// dispatches React's synthetic event system directly — NOT a real
// browser DOM event, so genuine native event propagation isn't exercised