The debug command is not printing the entire component.

[felipediogo]

• react-testing-library version: 9.2.0
• react version: 16.8.1
• node version: 11.6.0
• npm (or yarn) version: 6.9.0

Relevant code or config:

it("should render the component", async () => {
    const { debug, getByTestId } = render(
      <Component
        navigate={() => {}}
        location={{ search: "" }}
        setError={() => {}}
        setException={() => {}}
      />
    );
    await wait();
    debug();
});

What you did:

I'm just testing a component and doing a debug of the component

What happened:

The debug that was printed was just half of what I was expecting.

Reproduction:

Problem description:

The Debug is not printing the entire component, I think it is probably something related to the terminal.

Suggested solution:

[alexkrolick]

Output is truncated

https://testing-library.com/docs/dom-testing-library/api-helpers#debugging

Set the env var DEBUG_PRINT_LIMIT to increase the limit

[felipediogo]

Thanks mate!

[eric-burel]

It should ideally be an option of the debug() command instead. For googlers: the limit is in number of chars, not lines, the default is 7000. So you may need smth like "20000" for instance

[dnorth]

Wow it took me so long to realize that my output was getting truncated... I was very confused as to why my component wasn't rendering properly. and now that i've realized it I agree with @eric-burel that this should be an option of debug().

[danawoodman]

I would argue that the default should be extremely high (or set to infinity) as setting an env var to increase this is strange and not intuitive. At least an optional param as @eric-burel mentions would be a big step forward.

[dnorth]

So as I was looking over this again, I realized that debug() is built on top of prettyDom and DOES have optional parameters including one for maxLength.

So if you do screen.debug(null, 20000) then it will print as expected, based on the documentation of that function.

[maciejmyslinski]

a neat trick is to use screen.debug(null, Infinity).

[larsenwork]

FWIW it's

screen.debug(undefined, Infinity)

if you want to use correct types 😄

[evanjmg]

still doesn't work in some cases

[mrossiml]

This work for me:

screen.debug(undefined, Infinity, { highlight: false });

Note: if I do not put the "highlight: false" it does not print everything and it is cut off

I took it from this page:
https://blog.logrocket.com/using-react-testing-library-debug-method/

[bell-matthew]

This work for me:

screen.debug(undefined, Infinity, { highlight: false });

Note: if I do not put the "highlight: false" it does not print everything and it is cut off

I took it from this page: https://blog.logrocket.com/using-react-testing-library-debug-method/

Even using this command or the one above it my output is still cutoff. I think it's due to the async nature of my test and the fact that the next line is errorring for not being able to find the element, and the test is failing before the entire output is written? Not sure but I'm getting a ... at the end out my debug output before the error so it must be truncating the output still right?

[bell-matthew]

Okay confirmed. The truncated output was due to my screen.findAllByText() failing the test before the screen.debug() output was able to finish. I'm not super familiar with JS async stuff but there ought to be some way to make the screen.debug() block until it's finished writing to console, or have some kind of timed delay after the call to ensure the buffer is flushed to output?