React测试中如何让错误信息返回未截断的完整HTML

当你执行expect(screen.queryByTestId(id)).not.toBeInTheDocument();测试失败时，要让输出的HTML不被截断，达到screen.debug(undefined, Infinity)的效果，可通过以下方法实现：

全局配置Jest（推荐） #

在jest.config.js中添加testEnvironmentOptions配置，设置errorHtmlLength为Infinity：

module.exports = {
  // 其他现有配置
  testEnvironmentOptions: {
    errorHtmlLength: Infinity
  }
};

这会让Jest在输出测试失败的DOM内容时不再截断，完整展示所有节点。

单测试用例临时处理 #

如果只需要针对单个测试用例排查，可在断言前手动打印完整DOM：

screen.debug(undefined, Infinity);
expect(screen.queryByTestId(id)).not.toBeInTheDocument();

这种方式无需修改全局配置，适合临时调试。

内容的提问来源于stack exchange，提问作者Gabriel Furstenheim