Render
Enzyme is one of the best testing libraries for React Components testing using unit testing principles. Render Function in Enzyme is one of the most popular ways to render React components as static HTML and analyze the resulting HTML structure similar to that of a React Tree.
The render function returns a CheerioWrapper around the rendered HTML of the single node’s subtree of the resultant React tree structure created using the render function.
Cheerio is one of the most popular tools that can be used to parse HTML and XML in Node.js. Thus, here in this render function, we will be taking the return of the function as a CheerioWrapper as we will be using the third-party API to traverse through the HTML Tree.
Cheerio parses a markup and provides an API for manipulating the resulting data structure, i.e., the React tree in our case. Therefore we can call this function the Static Rendering API.
Thus, render acts as a way to test static JSX and HTML renders in your application when used alongside the concepts of unit testing and Cheerio as a third-party parsing and traversal library for HTML. This usage of a third-party Cheerio for parsing and traversing HTML sets render apart from the mount and shallow testing of React components.
Cheerio makes the parsing and traversing of HTML a much less hassle than when we need to test a React component. Here, we can take CheerioWrapper analogous to ReactWrapper and ShallowWrapper constructors.
Example
First, we create a React component, for example, Foo here, which will contain the component that we will use to render on and test if we can access the React tree in the way we need to.
Program
import React from "react";
export default class Foo extends React.Component {
componentDidMount() {
console.log("Foo mount");
}
render() {
return <h1>Hello Foo</h1>;
}
}
Then we create a test suite that contains the tests we need to run on our component. Here, we will be running a single test to check the length of the particular component using a chai assertion style.
import {render} from 'enzyme';
describe('<Foo/>', ()=>{
it('renders three `.foo-bar`.s', ()=>{
const wrapper = render(<Foo/>);
expect(wrapper.find('.foo-bar')).to.have.length(3);
})
})
Output
When we run the tests we are able to successfully pass the test in the suite as we are able to access the structure in the wrapper returned by render function.
FAQs
1. When should we use static rendering?
Ans: The most appropriate sites to use static rendering is when the sites don’t need multiple requests to the server, in which case it would have no effect. This makes sure that the server doesn’t create additional browser-to-server requests.
2. What is prerendering?
Ans: Prerendering is when a client-side application is run during the build time to capture its initial state as a static HTML.
3. Does Static rendering increase SEO?
Ans: As the non-Static rendered sites are also accessible by google, there is not much difference in using Static Rendering in SEO.
4. Can we use render in functional components?
Ans: When we use a functional version, we can get a simple JSX value similar to the component rendering engine.
Key Takeaways
In this blog, we discussed Static Rendering and using the render function from Enzyme to test the React structure of the wrapper returned by the render.
You may want to learn more about rendering mechanism here, or about ShallowWrapper rendering here.
Check out this problem - Duplicate Subtree In Binary Tree
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!
34+ registered 
