停止测试库的巨大错误输出

Question

我喜欢 testing-library，在 React 项目中经常使用它，现在我正尝试在 Angular 项目中使用它 - 但我一直在与巨大的问题作斗争错误输出，包括渲染的 HTML 文本。这不仅通常没有帮助（我找不到元素，这里是 HTML，它不是）；但如果您运行处于调试模式，它通常会在有趣的行之前被截断。

我只是将它添加为标准 Angular Karma+Jasmine 设置的库。

如果 HTML 输出导致我的控制台 window 长时间假脱机，我敢肯定你会说我正在测试的组件太大了，但我有很多集成测试在 Protractor 中，它们 SO SLOW :(.

Answer 1

我假设你运行在你的项目中使用 rtl 开玩笑。

我个人不会关闭它，因为它可以帮助我们，但每个人都有办法，所以如果你有你的理由，那就很公平。

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 打印，我不确定，因为我还没有尝试过，但是如果你查看我链接的文档，它说

"Prevent tests from printing messages through the console."

现在，如果上述方法不起作用，您几乎肯定会禁用除 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

Here is the doc

更新 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 
 },

The callstack can also be removed

Answer 2

您可以通过使用 config 设置 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/773 by https://github.com/wyze。

Answer 3

我认为最好的解决方案是使用 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 or setupFilesAfterEnv 配置选项将其运行全局设置。

停止测试库的巨大错误输出

Stop huge error output from testing-library

react-testing-library

angular-testing-library