Component Testing with Enzyme

Pascual Vila
Frontend Instructor.
Enzyme is a JavaScript testing utility for React that makes it easier to assert, manipulate, and traverse your React component trees. Developed by Airbnb, it provides an intuitive API for shallow rendering, full rendering, and static rendering, allowing you to test components at different levels of depth.
Enzyme test example (Shallow Rendering):
{`// MyComponent.js
import React from 'react';
function MyComponent({ name }) {
return Hello, {name}!
;
}
export default MyComponent;
// MyComponent.test.js
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
describe(' ', () => {
it('renders a h1 with the name prop', () => {
const wrapper = shallow( );
expect(wrapper.find('h1').text()).toEqual('Hello, World!');
});
});`}
Shallow rendering is ideal for testing components in isolation, without worrying about the behavior of their child components.