Render Result
The render method usually returns an object that has a few properties:
…queries
Whenever a render method is called it returns the queries from the DOM Testing Library with the first argument bound to the baseElement which is defaulted to be document.body.
Example
const {getByLabelText, queryAllByTestId} = render(<Test/>);
container
The render method essentially wraps the DOM tree created out of the component in the method in a container. As this is a DOM node it is basically a div element. Thus, just like a normal DOM Node, we can use container.querySelector to inspect the children wrapped and returned by the render method.
However, this must be avoided when using a query for rendered elements. As the other queries are more resilient to changes made to the component we are testing.
baseElement
Let’s say we need to test render where we test something outside the container div. Here we can simply use When we don’t mention the baseElement the default value is set to document.body. However, we can change it in the options of render.
debug
When we are creating a prettyDOM for a particular component in the render method, we can use a shortcut returned by the render function itself. This is the debug property that acts like a simple wrapper around prettyDOM which is exposed and comes from the testing library.
Example
Import React from 'react'
Import {render} from '@testing-library/react'
const {debug} = render(<Test/>);
debug();
//<div>
// <div>Hello</div>
//</div>
rerender
Sometimes the components we are testing are taking parameters that may need to be updated. In cases like these, we need to re-render our components with the updated props and then test the components and their renders.
Example
import {render} from '@testing-library/react'
const {rerender} = render(<Test number = {30}/>)
rerender(<Test number = {50}/>) //rerenders the same component with different props
unmount
In many cases where we use a lot of event handlers, we eventually clear it up after a certain condition is met. In scenarios like these, the component that has been rendered as of now has to be unmounted. Another case can be when we need to check what happens when a particular component is removed from the page. This can be done using the unmount function and helps in mitigating memory leaks that may occur in the above cases.
Example
import {render} from '@testing-library/react'
const {container, unmount} = render(<Test/>)
unmount()
//the component has been unmounted
asFragment
When this function is called it returns a DocumentFragment of our rendered component. This is used when we need to check how our component reacts to particular events all while avoiding live bindings.
Frequently Asked Questions
1. What is prettyDOM?
Ans: PrettyDOM is a helper function that can be used to print a readable representation of the DOM tree of a node.
2. Difference between Enzyme and React testing library.
Ans: While Enzyme allows you to access the internal working of the component rendered the testing library doesn't give any such access to the implementation details.
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.
Conclusion
In this blog, we discussed the different methods as a result of using the render function of the React testing library on a component.
You may want to learn more about react testing utilities 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!
306+ registered