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

admin管理员组

文章数量:1128410

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.

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.

• javascript
• reactjs
• jestjs
• react-testing-library

Share Improve this question Follow edited Jun 20, 2023 at 6:49 Vikramaditya 5,57477 gold badges3636 silver badges4646 bronze badges asked Jan 16, 2020 at 5:54 Amit ChauhanAmit Chauhan 6,85922 gold badges2525 silver badges3838 bronze badges 3

• 7 have you tried increasing the DEBUG_PRINT_LIMIT as mentioned in here – uday Commented Jan 16, 2020 at 6:28
• 1 @uday no luck with DEBUG_PRINT_LIMIT, still same issue. – Amit Chauhan Commented Jan 16, 2020 at 8:14
• 1 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. – Daniel Peña Commented Dec 9, 2021 at 16:08

Add a comment  | 

12 Answers 12

Sorted by: Reset to default 194

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

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)  

Another option

screen.debug(undefined, Infinity);

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

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

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

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.

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

This worked for me

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

screen.debug(debug(), 20000);

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!

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

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:

本文标签： javascriptreacttestinglibrary some portion of debug39s output is not visibleStack Overflow