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

I am using react jest with react testing library to test my component. I am facing a weird issue. I am usng debug return 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 dev and closing tags for parents are missing.

Solution 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=10000 yarn test

Source: https://github.com/testing-library/dom-testing-library/blob/master/src/pretty-dom.js#L24

Solution 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)  

Solution 3:

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()