CODEWITHSUNDEEP
javascriptreactjsjestjsreact-testing-library
Amit Chauhan
Amit Chauhan

Reputation: 6879

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

});

enter image description here

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

Upvotes: 219

Views: 207872

Answers (12)

rrebase
rrebase

Reputation: 4219

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

Upvotes: 198

Alan P.
Alan P.

Reputation: 3123

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 goodiTerm2 scrollback lines iTerm2:

Upvotes: 2

Daher
Daher

Reputation: 1441

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

Upvotes: 12

Menelaos Kotsollaris
Menelaos Kotsollaris

Reputation: 5506

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!

Upvotes: 3

nvh95
nvh95

Reputation: 632

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

Jest Preview debug react testing library

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

Upvotes: 21

ayooluwa alfonso
ayooluwa alfonso

Reputation: 116

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

Upvotes: 7

labs
labs

Reputation: 1227

Another option

screen.debug(undefined, Infinity);

Upvotes: 107

png
png

Reputation: 1130

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.

Upvotes: 7

Haryono
Haryono

Reputation: 2822

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)

Upvotes: 177

Sunil Kumar Singh
Sunil Kumar Singh

Reputation: 331

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

Upvotes: 2

Billie Angelov
Billie Angelov

Reputation: 41

This worked for me

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

screen.debug(debug(), 20000);

Upvotes: 4

Heinrich Filter
Heinrich Filter

Reputation: 6158

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:

Upvotes: 43

Related Questions