react-testing-library: some portion of debug's output is not visible

Question

I am using react jest with react testing library to test my component. I am facing a weird issue. I am using debug, returned by render from testing-library.

test('component should work', async () => {
  const { findByText, debug } = render(<MyComponent />);
  const myElement = await findByText(/someText/i);
  debug();

});

As you can see in the screenshot there are incomplete divs and closing tags for parents are missing.

Mainis

have you tried increasing the DEBUG_PRINT_LIMIT as mentioned in here – Tureen

@Tureen no luck with DEBUG_PRINT_LIMIT, still same issue. – Mainis

You should be able to do so by doing: screen.debug(myComponent, Infinity); note: you can specify "undefined" instead of "myComponent" to debug the whole document. – Cockup

Answer 1

You need to change the value of DEBUG_PRINT_LIMIT env variable (default is 7000).

For example, run your tests with: DEBUG_PRINT_LIMIT=100000 yarn test

Source: https://github.com/testing-library/dom-testing-library/blob/2653fd934f33ce19377c98029efe3e983a1c602b/src/pretty-dom.js#L50

Wang

If this isn't working for others, note that this limit is characters to print and not lines – Subreption

Answer 2

I am using this version: "@testing-library/react": "^11.0.4"

able to do just like below, we can change 300000 as the max length of output.

debug(undefined, 300000)  

Twelfthtide

debug(undefined, 300000) – Dimity

@J.Munson why undefined? – Balloon

To make typescript happy, basically. But in general, undefined is the standard way of omitting a parameter in Javascript. – Dimity

where (file) do you call this? – Allseed

answered below by @labs – Elementary

Answer 3

Another option

screen.debug(undefined, Infinity);

Taranto

Answer 4

The second argument of the debug() function can be used to set maxLengthToPrint.

E.g. to print everything in myElement using the recommended screen approach:

import {render, screen} from '@testing-library/react'

render(<MyComponent />);
const myElement = await screen.findByText(/someText/i);

const maxLengthToPrint = 100000
screen.debug(myElement, maxLengthToPrint);

See:

• Api docs for debug() in render results
• Api docs for screen.debug()

Eldwon

logged in just to upvote this answer... the others didn't explain how or where to call screen.debug(undefined, Infinity);, I thought we needed to pass undefined there since there was no explanation. – Telegraphese

Answer 5

You can use Jest Preview (https://github.com/nvh95/jest-preview) to view your app UI when testing in a browser, instead of HTML in the terminal, just by 2 lines of code:

import { debug } from 'jest-preview';

describe('App', () => {
  it('should work as expected', () => {
    render(<App />);
    debug();
  });
});

It works great with jest and react-testing-library.

• Introduction: https://www.jest-preview.com/docs/getting-started/intro
• Installation guide: https://www.jest-preview.com/docs/getting-started/installation

Annotation

very interesting – Ginzburg

it does not work for react native, uses jsdom and document – Senghor

Wow neat✨. For those getting started, note you must also run jest-preview server for this to work. – Heirdom

Answer 6

Since the DOM size can get really large, you can set the limit of DOM content to be printed via environment variable DEBUG_PRINT_LIMIT. The default value is 7000. You will see ... in the console, when the DOM content is stripped off, because of the length you have set or due to default size limit. Here's how you might increase this limit when running tests:

DEBUG_PRINT_LIMIT=10000 npm test

Here more about debuggin on documentation

Taggart

This worked out for me, just put this code before my test DEBUG_PRINT_LIMIT=10000 pnpm test "file path" – Football

Answer 7

If none of the other answers work for you, make sure it's not your terminal limit. For example VS Code only keeps 5000 lines in buffer. Try Mac OS terminal.

Criseyde

Answer 8

This worked for me:

debug(undefined, 300000);

It will give you the markeup of whatever you passed into render() as:

import {render, screen} from '@testing-library/react'

render(<MyComponent />);

You can read about more ways to help you with printing out the results, including prettifying the resulting markup at:

API doc for debug

Identify

I added screen for this to work as I needed: screen.debug(undefined, 300000); – Football

Answer 9

This worked for me

const history = createMemoryHistory()
const { debug } = renderWithRedux(
    <Router history={history}>
        <SideBar />
    </Router>
, state);

screen.debug(debug(), 20000);

Radiator

Answer 10

By default RTL doesn't show comments, <script /> and <style /> tags. In my case I needed to test for a commented node in the DOM.

If you want your tests to include all the nodes, you can use prettyDOM like this:

// render DOM with a commented node
const html = {__html: '<!--this is a commented DOM element-->'};
const element = <div dangerouslySetInnerHTML={html} />;
const { container } = render(element);

// This is what tells RLT to print all nodes!
const prettyfiedDOM = prettyDOM(container, undefined, { filterNode: () => true}) || '';

expect(prettyfiedDOM.includes('<!--this is a commented DOM element-->')).toBeTruthy();

Notice that the filterNode function always returns true, which tells RTL to print all DOM nodes, and hence you can test comments, styles, tags, etc. You can read more on prettyDOM source code and configure your desired behavior of DOM filtering.

View the live demo here

Hope that helps!

Swearword

Answer 11

Adding on top of answer by @Haryono

Also make sure you don't have silent flag set in scripts

"test": "jest --config jest.config.js --silent";

Removing silent flag should work.

Note: I think silent flag supresses warnings and debug outputs

Hinkel

Answer 12

Also be sure your terminal allows you to scroll back that far. In iTerm2, I had my "Scrollback lines" set to 1000. Changed it to "Unlimited scrollback" and now life is good iTerm2:

Sheff

So glad I don't have a mac – Limes