Introduction
The @testing-library is a collection of packages that helps a developer test the UI-based components in an end-user-centric way.
This blog will help you understand the debugging tests in @testing-library.
Debugging tests
Automatic Logging
During testing, when a get call is invoked in a test case, The automatic logging feature allows printing the current state of the container.
Consider the code below as an example.
// <div>Hello Ninja!</div>
getByText(container, 'Goodbye Ninja!') // This will fail by throwing an error
The test case above will fail. However, it will print the state of the DOM under test.
The given test case is sure to fail in the code above as there is no such text available in the container. However, what's important is that the state of the container is printed and is available for the developer to see and debug.
Unable to find an element with the text: Goodbye Ninja!. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Here is the state of your container:
<div>
<div>
Hello Ninja!
</div>
</div>
This will work like a charm in the case of a small application. However, when it comes to an extensive application with thousands of lines of code in the DOM, it will become cumbersome to handle the DOM printed every time a test fails. To help rectify this issue, there is a feature that enables you to add a limit to how much of the DOM content will be visible in case a failure occurs.
The DEBUG_PRINT_LIMIT is a command that can be used to set the exact length of the DOM that is allowed to print. By default, DEBUG_PRINT_LIMIT has a limit of 7000, which can be altered easily.
DEBUG_PRINT_LIMIT=10000 npm test
This works on macOS/Linux only.
prettyDOM
Built on top of pretty-format, the prettyDOM function is used to print a readable representation of the DOM tree of a node. This can be useful while debugging a test.
It is defined as:
interface Options extends prettyFormat.OptionsReceived {
filterNode?: (node: Node) => boolean
}
function prettyDOM(
node: HTMLElement,
maxLength?: number,
options?: Options,
): string
It takes as an argument the root node to print out and a max length parameter that can be of use to limit the size of the string when it becomes too large.
The <style />, <script /> and the comment nodes are ignored by default. This behavior can also be configured by passing a custom filterNode function that returns true for every node that must be included in the output.
The filterNode function is used alongside the console.log to print out the DOM trees during tests for debugging purposes.
const div = document.createElement('div')
div.innerHTML = '<div><h1>Hello Ninja!</h1></div>'
console.log(prettyDOM(div))
// <div>
// <h1>Hello Ninja!</h1>
// </div>
logRoles
The logRoles function can be used to print a list of all implicit ARIA roles within a DOM tree of nodes. Each role contains a list of all of the nodes that match the role. This can be beneficial while finding ways to query the DOM under test with getByRole.
import {logRoles} from '@testing-library/dom'
const nav = document.createElement('nav')
nav.innerHTML = `
<ul>
<li>Courses</li>
<li>Articles</li>
</ul>`
logRoles(nav)
Result:
navigation:
<nav />
--------------------------------------------------
list:
<ul />
--------------------------------------------------
listitem:
<li />
<li />
--------------------------------------------------
Refer to know about : What is debugging