react-testing-library：调试输出的某些部分不可见

Question

我正在使用 react jest 和 react 测试库来测试我的组件。我正面临一个奇怪的问题。我正在使用来自测试库的渲染进行调试返回。

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

});

正如您在屏幕截图中看到的那样，缺少父项的不完整开发和结束标签。

Answer 1

另外一个选择

screen.debug(undefined, Infinity);

Answer 2

您需要更改DEBUG_PRINT_LIMITenv 变量的值（默认为 7000）。

例如，运行您的测试： DEBUG_PRINT_LIMIT=10000 yarn test

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

Answer 3

我正在使用这个版本：“@testing-library/react”：“^11.0.4”

可以像下面那样做，我们可以改变 300000 作为输出的最大长度。

debug(undefined, 300000)  

Answer 4

在浏览器中测试时，您可以使用 Jest Preview ( https://github.com/nvh95/jest-preview ) 查看应用程序 UI，而不是在终端中查看 HTML，只需 2 行代码：

import { debug } from 'jest-preview';

describe('App', () => {
  it('should work as expected', () => {
    render(<App />);
    debug();
  });
});

jest它与和配合使用效果很好react-testing-library。

• 简介： https: //www.jest-preview.com/docs/getting-started/intro
• 安装指南：https ://www.jest-preview.com/docs/getting-started/installation

Answer 5

由于 DOM 大小可能变得非常大，因此您可以通过环境变量 DEBUG_PRINT_LIMIT 设置要打印的 DOM 内容的限制。默认值为 7000。当 DOM 内容由于您设置的长度或默认大小限制而被剥离时，您将在控制台中看到...。以下是运行测试时增加此限制的方法：

DEBUG_PRINT_LIMIT=10000 npm test

这里有更多关于文档中 debuggin 的信息

Answer 6

该debug()函数的第二个参数可用于设置maxLengthToPrint.

例如，myElement使用推荐的screen方法打印所有内容：

import {render, screen} from '@testing-library/react'

render(<MyComponent />);
const myElement = await screen.findByText(/someText/i);

const maxLengthToPrint = 100000
screen.debug(myElement, maxLengthToPrint);

看：

• debug()渲染结果中的Api 文档
• Api 文档 screen.debug()

Answer 7

如果其他答案都不适合您，请确保这不是您的终端限制。例如 VS Code 在缓冲区中仅保留 5000 行。尝试 Mac 操作系统终端。

Answer 8

这对我有用：

debug(undefined, 300000);

它将为您提供传递给 render() 的任何内容的标记，如下所示：

import {render, screen} from '@testing-library/react'

render(<MyComponent />);

您可以在以下位置阅读更多帮助您打印结果的方法，包括美化结果标记：

用于调试的 API 文档