ReactJS: DOM Manipulation example with enzyme

DOM manipulation is a common task in web development, and it is no different when working with ReactJS. React provides a virtual representation of the DOM, making it easier to manage and update the UI. However, there are times when you need to interact directly with the actual DOM elements. In such cases, enzyme comes in handy.

Enzyme is a JavaScript testing utility for React that makes it easier to test React components’ output. It provides a set of methods and assertions to traverse, query, and manipulate React components’ output.

In this tutorial, we will explore how to use enzyme for DOM manipulation in ReactJS. We will cover some of the most common methods and techniques that enzyme provides.

Installation

To get started, you will need to install enzyme. Open your terminal and navigate to the root directory of your React project. Run the following command:

npm install --save enzyme enzyme-adapter-react-{react-version}

For example, if you are using React 16, you would run:

npm install --save enzyme enzyme-adapter-react-16

Configuration

After installing enzyme, you need to configure it to work with your React application. Create a setup file called setupTests.js in your project’s src directory.

// src/setupTests.js

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-{react-version}";

configure({ adapter: new Adapter() });

Replace {react-version} with the appropriate version number you are using.

Querying and asserting

Enzyme provides a range of methods to query and assert various aspects of React components. Here are a few examples:

find()

The find() method allows you to search for elements inside a component. It accepts a selector string or a component constructor.

import { shallow } from "enzyme";

const wrapper = shallow(<MyComponent />);

// Find an element by class name
const element = wrapper.find(".my-class");

// Find an element by data attribute
const element = wrapper.find("[data-testid='my-element']");

text()

The text() method returns the text content of a component. It can be useful for asserting the presence of certain text items.

import { shallow } from "enzyme";

const wrapper = shallow(<MyComponent />);

// Assert that a certain text is present
expect(wrapper.text()).toContain("Hello, World!");

simulate()

The simulate() method triggers an event on a component. It is useful for testing user interactions.

import { mount } from "enzyme";

const wrapper = mount(<MyComponent />);

// Simulate a button click
wrapper.find("button").simulate("click");

These are just a few examples of the many methods enzyme provides. Depending on your requirements, you can explore other methods like props(), state(), hasClass(), etc.

Modifying the DOM

In addition to querying and asserting, you can also use enzyme to modify the DOM. For example, you can update the properties of a component, set the state, or trigger events.

setProps()

The setProps() method allows you to update the properties of a component. It takes an object of new props as an argument.

import { mount } from "enzyme";

const wrapper = mount(<MyComponent name="John" age={25} />);

// Set new props
wrapper.setProps({ name: "Jane" });

setState()

The setState() method allows you to update the state of a component. It takes an object of new state values as an argument.

import { mount } from "enzyme";

const wrapper = mount(<MyComponent />);
const componentInstance = wrapper.instance();

// Set new state
componentInstance.setState({ isLoading: true });

instance()

The instance() method returns the instance of a component. It can be useful for accessing methods and properties of the component.

import { mount } from "enzyme";

const wrapper = mount(<MyComponent />);
const componentInstance = wrapper.instance();

// Access a component method
componentInstance.myMethod();

Conclusion

In this tutorial, we explored how to use enzyme for DOM manipulation in ReactJS. We learned how to install and configure enzyme, query and assert different aspects of components, and modify the DOM using enzyme’s methods.

Enzyme provides a powerful and convenient way to manipulate the DOM in React applications. It can be especially useful for testing and debugging purposes, as well as making interactive UI updates.

I hope this tutorial has been helpful in understanding DOM manipulation with enzyme in ReactJS. Feel free to explore the enzyme documentation for more information and examples.

Happy coding!