Enzyme
Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components’ output. It allows you to extract and manipulate the components of your React tree in order to test them. This makes it easier to write comprehensive tests that cover all aspects of your component.
Features of Enzyme :
1. Component Rendering Testing : Enzyme allow developers to render React components within the testing environment. Also it provide methods to render components with specific props and states for testing different scenarios.
2. Virtual DOM Support: Enzyme implement a virtual DOM for simulating the component rendering process without manipulating the actual DOM. It enable efficient and isolated testing of components in a controlled environment.
3. Shallow Rendering: Enzyme support shallow rendering to focus on testing the target component without rendering its child components. It facilitate faster and more focused testing by isolating the behavior of the primary component.
4. DOM Manipulation: It allow developers to simulate user interactions such as clicks, input changes, and form submissions and also provide a way to inspect the virtual DOM after these interactions to verify the expected changes.
5. Querying and Assertions: Enyme implement functions to query the rendered components using selectors similar to CSS selectors. It also support assertions to validate the state, props, and structure of the components.
6. Asynchronous Testing: Enzyme support testing of components that involve asynchronous operations such as data fetching . It provide mechanisms to handle asynchronous code and ensure reliable testing results.
How to Use Enzyme Testing Library ?
To use Enzyme in your React project, you need to install it. Here is the npm command for installing Enzyme :
npm install --save enzyme enzyme-adapter-react-17 enzyme-to-json
Example :
Below is an example for creating and testing a simple react component named ToggleButton . The ToggleButton component switches between ‘ON’ and ‘OFF’ states when clicked. The test verifies that the initial state is ‘OFF’ and that it toggles to ‘ON’ after a click.
//App.js code
import React, { useState } from 'react';
const ToggleButton = () => {
const [isToggled, setToggle] = useState(false);
const handleClick = () => setToggle(!isToggled);
return (
<button onClick={handleClick}>
{isToggled ? 'ON' : 'OFF'}
</button>
);
};
export default ToggleButton;
//Index.js code
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx'
ReactDOM.createRoot(
document.querySelector('#root')
).render(<App />)
Output
- Console Output
Server is listening to port: 8000
- Browser Output:
Web Output of React Code for Creating a ToggleButtion after Clicking on it
let’s write a test for our ToggleButton :
// src/ToggleButton.test.js
import React from 'react';
import { shallow } from 'enzyme';
import ToggleButton from './ToggleButton';
describe('ToggleButton component', () => {
it('toggles between ON and OFF', () => {
const wrapper = shallow(<ToggleButton />);
// checking Initial States
expect(wrapper.text()).toBe('OFF');
// toggling a click on the button
wrapper.find('button').simulate('click');
// checking Updated States
expect(wrapper.text()).toBe('ON');
});
});
Output:
Terminal : Test result with Enzyme testing library
Difference between React Testing Library & Enzyme
In this article, we will learn about React Testing Library and Enzyme, along with discussing the significant distinction that differentiates between React Testing Library and Enzyme.
Let us first understand about React Testing Library and Enzyme