我喜欢testing-library，在 React 项目中使用了很多，我现在正尝试在 Angular 项目中使用它——但我一直在为巨大的错误输出而苦恼，包括 HTML 文本渲染。这不仅通常没有帮助（我找不到元素，这是 HTML 不是）；但如果您在调试模式下运行，它通常会在有趣的行之前被截断。
我只是将它作为一个库添加到标准 Angular Karma+Jasmine 设置旁边。
如果 HTML 输出导致我的控制台窗口长时间假脱机，我敢肯定你会说我正在测试的组件太大，但是我在 Protractor 中有很多集成测试，它们是 SO慢 :(.
【问题讨论】：
标签： react-testing-library angular-testing-library
我想说最好的解决方案是使用configure 方法并为getElementError 传递一个自定义函数，它可以满足您的需求。
您可以在此处阅读有关配置的信息：https://testing-library.com/docs/dom-testing-library/api-configuration
这方面的一个例子可能如下所示：
configure({
getElementError: (message: string, container) => {
const error = new Error(message);
error.name = 'TestingLibraryElementError';
error.stack = null;
return error;
},
});
然后，您可以将其放入任何单个测试文件中，或使用 Jest 的 setupFiles 或 setupFilesAfterEnv 配置选项使其全局运行。
【讨论】：
: string！
我假设您在项目中使用 rtl 运行 jest。
我个人不会关闭它，因为它可以帮助我们，但每个人都有办法，所以如果你有你的理由，那就够公平了。
1.如果您想禁用特定测试的错误，可以模拟console.error。
it('disable error example', () => {
const errorObject = console.error; //store the state of the object
console.error = jest.fn(); // mock the object
// code
//assertion (expect)
console.error = errorObject; // assign it back so you can use it in the next test
});
2。如果您想在所有测试中使其静音，您可以使用jest --silent CLI 选项。检查docs
上面甚至可能会禁用 rtl 完成的 DOM 打印，我不确定，因为我没有尝试过，但是如果你查看我链接的文档，它会说
“防止测试通过控制台打印消息。”
现在，如果上述方法不起作用，您几乎可以肯定除了 DOM 建议之外的所有内容都已禁用。在这种情况下，您可能会查看react-testing-library's 源代码并找出用于这些打印语句的内容。是console.log 吗？是console.warn 吗？当你得到它时，只需像上面的 选项 1 那样模拟它。
更新
经过一番挖掘，我发现所有testing-library DOM 打印都是建立在prettyDOM() 之上的；
虽然 prettyDOM() 无法禁用，但您可以将行数限制为 0，这样只会显示错误消息和消息下方的三个点 ...。
这是一个示例打印输出，我搞砸了：
TestingLibraryElementError: Unable to find an element with the text: Hello ther. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
...
您需要做的就是在执行测试套件之前传入一个环境变量，例如使用 npm 脚本，它看起来像：
DEBUG_PRINT_LIMIT=0 npm run test
更新 2：
根据 OP 的 FR on github，这也可以在不注入全局变量来限制 PrettyDOM 行输出的情况下实现（以防它在其他地方使用）。 getElementError 配置选项需要更改：
dom-testing-library/src/config.js
// called when getBy* queries fail. (message, container) => Error
getElementError(message, container) {
const error = new Error(
[message, prettyDOM(container)].filter(Boolean).join('\n\n'),
)
error.name = 'TestingLibraryElementError'
return error
},
【讨论】：
console.errorconsole.warn 等在任何地方都是一样的。用你拥有的工具模拟它不会起作用吗？
您可以通过 config.xml 设置 DOM 测试库消息构建功能来更改消息的构建方式。在我的 Angular 项目中，我将此添加到 test.js:
configure({
getElementError: (message: string, container) => {
const error = new Error(message);
error.name = 'TestingLibraryElementError';
error.stack = null;
return error;
},
});
这是在这里回答的：https://github.com/testing-library/dom-testing-library/issues/773https://github.com/wyze。
【讨论】：