Response-test-library: 调试输出的某些部分是不可见的

我使用了一个反应测试库来测试我的组件。 我面临一个奇怪的问题。我使用调试返回从测试库渲染。

test('component should work', async () => {
const { findByText, debug } = render(<MyComponent />);
const myElement = await findByText(/someText/i);
debug();


});

enter image description here

正如你在截图中看到的，有不完整的开发和父母的关闭标记丢失。

88283 次浏览
小开

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

小开

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:

小开

This worked for me

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


screen.debug(debug(), 20000);
小开

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)
小开

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

小开

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.

小开

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

小开

Another option

screen.debug(undefined, Infinity);

小开

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

小开

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.

小开

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!

小开

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


提交答案