如何通过反应测试获取完整的html

Question

我正在运行反应测试并运行：

expect(screen.queryByTestId(id)).not.toBeInTheDocument();

我的测试失败了，堆栈跟踪返回了 html，这非常有帮助。

但是，它会裁剪 html，因此对于任何合理的网站来说，它只在标题中真正有用。有没有办法让错误消息不裁剪 HTML？

基本上，它显示与

screen.debug

相同，但我想显示与

screen.debug(undefined, Infinity);

相同

Answer 1

我会尽力帮助您，如果它不起作用，请告诉我，为了在您提到的 Jest 错误消息中展示 HTML 输出，您提到它失败了，为什么不利用 @ 的 toHaveHTML 匹配器的好处测试库/jest-dom 包。

为了执行此操作，您需要首先安装此软件包：

npm install --save-dev @testing-library/jest-dom

其次，您必须使用以下代码在测试文件中导入 toHaveHTML 匹配器：

import '@testing-library/jest-dom/extend-expect';

之后，您可以使用此代码在您的expect语句中使用toHaveHTML匹配器

expect(screen.queryByTestId(id)).not.toHaveHTML();

通过这种方法，我希望它会在您的 Jest 错误消息中显示 HTML 输出，如果您仍然有问题，请更详细地说明您的问题，我会尽力在这方面帮助您。

Answer 2

您可以使用

jest-dom

包并通过以下匹配器开始将当前组件归零。

expect(screen.getByTestId('your-container-component').toContainHTML('whatever');

由于

'whatever'

或任何其他字符串都会失败，因此它将显示包含的 HTML。请注意，这不是美化的。