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 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.

have you tried increasing the `DEBUG_PRINT_LIMIT` as mentioned in [here](https://testing-library.com/docs/dom-testing-library/api-helpers#debugging) — uday, Jan 16 '20 at 06:28

rrebase · Answer 1 · 2020-10-15T20:05:41.680

35

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#L22

edited Oct 15 '20 at 20:05

answered Jul 08 '20 at 11:48

rrebase

1,519
1
11
21

score 16 · Answer 2 · edited Feb 05 '21 at 18:32

16

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)

edited Feb 05 '21 at 18:32

Pier-Luc Gendreau

11,989
4
51
60

answered Oct 14 '20 at 03:09

Haryono

700
8
10

1

`debug(undefined, 300000)` – J. Munson Feb 02 '21 at 17:35
@J.Munson why `undefined`? – byxor Feb 03 '21 at 18:10
To make typescript happy, basically. But in general, `undefined` is the standard way of omitting a parameter in Javascript. – J. Munson Feb 03 '21 at 20:20

score 4 · Answer 3 · answered Sep 01 '20 at 20:51

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:

score 1 · Answer 4 · answered Oct 08 '20 at 11:27

1

This worked for me

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

screen.debug(debug(), 20000);

answered Oct 08 '20 at 11:27

Billie Angelov

11
1

score 0 · Answer 5 · answered Dec 11 '20 at 06:02

0

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

answered Dec 11 '20 at 06:02

Sunil Kumar Singh

91
10

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

5 Answers5