React Render and Render Options

Render Options

Now that we know how to use the render method to render components and append them to document.body, we can move ahead to learn about the render options that we can use while invoking the render methods.

These options are a second argument other than the component to be rendered and define the way our render method will work.

container

When we use the render method on any component by default the component is rendered as a div and is appended to the document.body thus the react component has a default container. However, we can also provide our own HTMLElement to be used as a container using the container option.

Example

Let’s take an example of an input field named input, here we need to render a component Username:

const input = document.createElement('input');

const {container} = render(<Username/>, {
	container: document.body.appendChild(input),
});

baseElement

This option is what is printed when we use debug() and for the base element of the queries, thus it points to the value of the container, i.e to the container if specified or to the document. body as a default value.

hydrate

If this option is set to true, then it will render with ReactDOM.hydrate.This is helpful while working with server-side rendering and using ReactDOM.hydrate to mount our components.

legacyRoot

When we are working with legacy apps like React 17, it is better to enable this option by setting it as true. However, we don't need to use this when using concurrent features like ReactDOMClient.createRoot.

wrapper

Sometimes we need a wrapper to be rendered around the inner element. Thus, we can use the wrapper option with a React component as the wrapper for creating reusable custom render functions for the same data.

queries

When we use this query we can simply bind the queries to the component.

Example

For example, a function to traverse the table contents

import * as tableQueries from 'my-table-query-library';
import {queries} from '@testing-library/react';

const {getByRowColumn, getByText} = render(<MyTable/>, {
	queries: {...queries, ...tableQueries},
});

Frequently Asked Questions

1. What are Legacy Apps?

Ans: Legacy apps are basically applications based on outdated technologies but something that if replaced may hamper day-to-day operations.

2. What is ReactDOM.hydrate?

Ans: ReactDOM.hydrate is a method similar to the render method, the only difference being that it is used to hydrate a container where the HTML contents were rendered by ReactDOMServer.

3. What is a DOM Tree?

Ans: A DOM(Document Object Model) tree is basically a representation of all the objects in the XML or HTML document in the form of nodes that are connected to each other to form a tree-like structure.

4. What is a Virtual DOM?

Ans: A Virtual DOM is an ideal copy of the actual DOM which is kept in memory and synced with the real DOM every time a change occurs, thus making it comparatively faster.

Conclusions

In this blog, we discussed the render method of the react-testing library and the different options available with it.

You may want to learn more about the render result here. We hope that this blog has helped you enhance your knowledge regarding render functions in the React testing library. Do upvote our blog to help other ninjas grow.

Learning never stops, and to feed your quest to learn and become more skilled, head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, read interview experiences, and much more.!

Happy Learning!