reactjs - Jest 测试通过，但未捕获错误并记录到控制台

Question

有没有一种方法可以在 Jest 中测试组件中的自定义错误，而不会在控制台中抛出 Uncaught Error ？

这里我有一个简单的按钮组件:

import React from 'react';

export default class Button extends React.Component {
    render() {

        if (!this.props.type) {
            throw new Error('Button requires a type prop');
        }

        return (
            <button className={`btn btn-${this.props.type}`}>Button</button>
        );
    }
}

当在不提供 type 属性的情况下使用组件时，我希望抛出自定义错误。我还有以下 Jest 测试:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from './button';

it('throws an error if the type prop is not defined', () => {
    const buttonType = undefined;
    const container = document.createElement('div');

    expect(() => {
        ReactDOM.render(<Button type={buttonType} />, container);
    }).toThrow('Button requires a type prop');
});

单元测试通过，但是控制台产生类似于以下内容的错误:

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Uncaught [Error: Button requires a type prop]

The above error occurred in the <Button> component:
in Button (at button.spec.js:20)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/docs/error-boundaries.html to learn more about error boundaries.

通常在 Jasmine 中，.toThrow() 匹配器会自动捕获错误并且不会进行日志记录。

我读过有关错误边界的内容，但这些似乎是在应用程序级别，而不是在组件级别。

我是否缺少一种更适合测试此问题的方法？

编辑:使用以下版本:

• react :16.2.0
• react-dom:16.2.0
• 开 Jest :22.2.2

Answer 1

我在 jsdom 的虚拟控制台中遇到了类似的问题，打印错误而不是抛出错误。据我所知，Jest 或任何其他测试框架都无法阻止代码打印到控制台。

我通过替换负责打印到控制台的监听器解决了这个问题。以下代码在 Jest 配置中的 setupFiles 中配置的文件中运行。

// There should be a single listener which simply prints to the 
// console. We will wrap that listener in our own listener.
const listeners = window._virtualConsole.listeners("jsdomError");
const originalListener = listeners && listeners[0];

window._virtualConsole.removeAllListeners("jsdomError");

window._virtualConsole.addListener("jsdomError", (error) => {
  if (error.type !== "not implemented" && originalListener) {
    originalListener(error);
  }
  // swallow
});

正如您所看到的，在我们的例子中，打印到控制台的错误(多次，因为它是副作用，而不是我们测试的主要目的)是“未实现”错误。所以这段代码只会吞掉这些类型的错误。

此解决方案并不理想，但它会使日志保持干净。

PS:如果您想降低吞下“真实”错误的风险，您可以在测试套件的 before 方法中使用此技巧，并使用 after 重置原始行为的方法。