Thought leadership from the most innovative tech companies, all in one place.

How to Print the Entire Component Using screen.debug() in React Testing Library

By David Salazar on 2022-08-31

I love React Testing Library and if you’re here, you probably love it too.

But when we’re testing a component with many lines of JSX and trying to print it, React Testing Library will not show the entire component.

Problem

// Problem 🔴screen.debug()

Solution ✅

Luckily, the solution to this problem is straightforward, the following command will print the whole component in the console.

screen.debug(undefined, Infinity);

Source


LinkedIn logo for sharing a link
Twitter logo for sharing a linkReddit logo for sharing a link


Continue Learning

Best Practices for Documenting React Components

React continues to grow more complex with each release, and it has become crucial for React-based dev teams to create effective internal documentation. Let’s explore how we can do just that, making documentation not only less painful, but also joyful to engage with.

React Query vs SWR

Which one should you choose for your next project?

How You Can Serve React Build Folder From an Express Endpoint

A guide on how to serve a React build folder from an Express endpoint.

Build a Simple React Login Form using Event Handlers and React Hook

A simple beginner-friendly React login form tutorial using the onChange and onSubmit event handlers and the useState hook.

Build a landing page for your SaaS app using React, Chakra UI and Typescript

I created the exact same app in React and Svelte. Here are the differences.

React vs Svelte. Finally, a side-by-side code comparison! Because you've heard the fuss about Svelte, and now you want to know what the hype is all about.