Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Debugging tests
2.1.
Automatic Logging
2.2.
prettyDOM
2.3.
logRoles
3.
FAQs
4.
Key Takeaways
Last Updated: Mar 27, 2024
Easy

Debugging tests

Author Parth Jain
0 upvote

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
You can also try this code with Online Javascript Compiler
Run Code

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>
You can also try this code with Online Javascript Compiler
Run Code

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
You can also try this code with Online Javascript Compiler
Run Code

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
You can also try this code with Online Javascript Compiler
Run Code

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>
You can also try this code with Online Javascript Compiler
Run Code

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)
You can also try this code with Online Javascript Compiler
Run Code

Result:

navigation:
<nav />
--------------------------------------------------
list:
<ul />
--------------------------------------------------
listitem:
<li />
<li />
--------------------------------------------------

Refer to know about :  What is debugging

FAQs

  1. What is a testing library?
    The Testing Library family of libraries is a very lightweight solution for testing without all the implementation details. The principal utilities it provides involve querying for nodes similarly to how users would find them. In this way, the testing library helps ensure your tests give you confidence in your UI code.
  2. What is Automatic Logging in Testing Library?
    During testing, when a get call is invoked in a test case, The automatic logging feature allows printing the current state of the container.
  3. Who created the testing library?
    Testing Library was developed by Kent C. Dodds, a React educator and an open-source developer. 
  4. What is the prettyDOM function in Testing Library?
    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.
  5. What is a testing library?
    The @testing-library is a collection of packages that aids a programmer to test the UI components in an end-user-centric way.

Also see :  usb debugging

Key Takeaways

In this article, we have extensively discussed the Debugging Tests in Testing Library and its various features. If you are Preparing for interview and don't know where to start, we have got you covered, check out our expert curated courses on our website, You can also check out Coding Ninjas Studio to practice frequently asked interview problems. We hope that this blog has helped you enhance your knowledge regarding Debugging tests in testing library and if you would like to learn more, check out our articles. Do upvote our blog to help other ninjas grow. Happy Coding!”

Live masterclass