Full DOM Rendering

Mount

The mount method renders the full DOM and includes the child components of the parent component that we are running the tests. This method is more suitable when there are components that directly interfere with DOM API or the lifecycle methods of React. The syntax for the mount method is:

mount(node[, options]) => ReactWrapper

The mount method includes multiple arguments that have different usage and implementations.

Arguments

• node (ReactElement): The node you are going to render
• options (Object [optional]): The basic options.
• options.context: (Object [optional]): The context that will pass into the component
• options.attachTo: (DOMElement [optional]): DOM Element to which the component will attach.
• options.childContextTypes: (Object [optional]): Merged contextTypes for all of the wrapper’s children.
• options.wrappingComponent: (ComponentType [optional]): A component that renders as a parent of the node. you can use it to provide context to the node, among other things. It is worth noting that wrappingComponent must render its children.
• options.wrappingComponentProps: (Object [optional]): Initial props to pass to the wrappingComponent if specified.

Returns

• ReactWrapper: The wrapper instance around the output that renders.

Example

So far, we have explored a large number of methods and arguments available in the Wrapper API and the Mount method. Now we will see the implementation of some methods and arguments with the help of an example.

This example will test an increment and decrement button application and its components using the Mocha testing framework, Enzyme, and React. The code for the application looks something like this:

Program:

//App.js
import React, { Component } from 'react';
import axios from 'axios';

export const doIncrement = prevState => ({
 counter: prevState.counter + 1,
});

export const doDecrement = prevState => ({
 counter: prevState.counter - 1,
});

class App extends Component {
 constructor() {
   super();

   this.state = {
     counter: 0,
     asyncCounters: null,
   };

   this.onIncrement = this.onIncrement.bind(this);
   this.onDecrement = this.onDecrement.bind(this);
 }

 componentDidMount() {
   axios
     .get('http://mydomain/counter')
     .then(counter => this.setState({ asyncCounters: counter }))
     .catch(error => console.log(error));
 }

 onIncrement() {
   this.setState(doIncrement);
 }

 onDecrement() {
   this.setState(doDecrement);
 }

 render() {
   const { counter } = this.state;

   return (
     <div>
       <h1>My Counter</h1>
       <Counter counter={counter} />

       <button type="button" onClick={this.onIncrement}>
         Increment
       </button>

       <button type="button" onClick={this.onDecrement}>
         Decrement
       </button>
     </div>
   );
 }
}

export const Counter = ({ counter }) => <p>{counter}</p>;

export default App;

You can also try this code with Online Javascript Compiler

Run Code

Now we can write our test code to test the components of this application. This test suite will perform four tests, checking the increment/decrement component, props, and component mount.

Program:

//App.spec.js
import React from 'react';
import axios from 'axios';
import sinon from 'sinon';
import { mount } from 'enzyme';
import App, { doIncrement, doDecrement, Counter } from './App';

describe('App Component', () => {
 const result = [3, 5, 9];
 const promise = Promise.resolve(result);

 before(() => {
   sinon
     .stub(axios, 'get')
     .withArgs('http://mydomain/counter')
     .returns(promise);
 });

 after(() => {
   axios.get.restore();
 });
  it('passes all props to Counter wrapper', () => {
   const wrapper = shallow(<App />);
  
   // We use .find to find node that matches counter.
   let counterWrapper = wrapper.find(Counter);

   // We use props to match the components props.
   expect(counterWrapper.props().counter).to.equal(0);

   // we set state of our counter component.
   wrapper.setState({ counter: -1 });

   counterWrapper = wrapper.find(Counter);
   expect(counterWrapper.props().counter).to.equal(-1);
 });

 // we test the increpement and decrement components of the app.
 it('increments the counter', () => {
   const wrapper = shallow(<App />);

   wrapper.setState({ counter: 0 });
   wrapper.find('button').at(0).simulate('click');

   expect(wrapper.state().counter).to.equal(1);
 });

 it('decrements the counter', () => {
   const wrapper = shallow(<App />);

   wrapper.setState({ counter: 0 });
   wrapper.find('button').at(1).simulate('click');

   expect(wrapper.state().counter).to.equal(-1);
 });

 // we use mount to check if the component mounts.
 it('calls componentDidMount', () => {
   sinon.spy(App.prototype, 'componentDidMount');

   const wrapper = mount(<App />);
   expect(App.prototype.componentDidMount.calledOnce).to.equal(true);
 });
});

You can also try this code with Online Javascript Compiler

Run Code

Output:

FAQs

1. What is shallow rendering?

Ans: Shallow rendering lets you render a component a level deeper and assert facts about the render method of shallow returns without worrying about the child components' behavior, which did not instantiate or render.

2. What is the difference between jest and enzyme?

Ans:

3. What is mounting and unmounting in React?

Ans: React JS's primary purpose is to find methods to modify the DOM to match what the components want to be rendered on the screen.

React does so by mounting, i.e., adding nodes to the DOM, unmounting, which is removing nodes from the DOM, and making changes to nodes already in the DOM, which is called updating.

4. When is render called in React?

Ans: The render() method is not user callable. It is part of the React component lifecycle's part. Generally, React calls it at various app stages when the React component instantiates for the first time or a new update to the component state. Render doesn't take any arguments and returns a JSX.

Key Takeaways

This article extensively discussed Full DOM Rendering API Reference and Mounting and their implementation in React JS using Enzyme and Mocha. We learned about all the methods of the React Wrapper API and the concepts, arguments, and returns of the Mount methods in Enzyme. Through our example, we also implemented many of these methods and arguments.

There is a lot more to explore here. If you are interested in testing with Mocha or Jest and React JS, check out our introductory articles like  Introduction to Mocha, Mocha Assertions, and Basics of React. We hope that this blog has helped you enhance your knowledge regarding Mocha and Chai. If you would like to learn more, head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, read interview experiences, and much more. Do upvote our blog to help other ninjas grow. Happy Coding!