如何在jest中隐藏React-Error-Boundary控制台错误

9lowa7mx  于 2023-11-15  发布在  Jest
关注(0)|答案(1)|浏览(134)

从错误边界上的react文档:
React 16会在开发中将渲染过程中发生的所有错误打印到控制台,即使应用程序意外地吞下了它们。
由于上述原因,我在运行测试时会收到大量不必要的控制台错误。有没有可能在Jest中隐藏这些错误,而不会嘲笑/监视console.error?

nvbavucw

nvbavucw1#

对。。保持测试输出干净总是一个好主意。没有嘲笑和间谍-不知道,但这是我的嘲笑间谍版本。
在这种情况下,有两个步骤。一个是很明显的:过滤控制台输出。在测试初始化文件,这是这样的:

"jest": {
"setupFilesAfterEnv": [
  "<rootDir>/jest/setupTests.js"
],

字符串
这是我的错误和警告过滤代码。

const warningPatterns = [
    /componentWillReceiveProps/,
    /The `css` function is deprecated/
];

const errorPatterns = [
    /Should be caught by ErrorBoundary/,
]

global.console = {
    ...global.console,
    warn: (...args) => {
        if (warningPatterns.some(pattern => args.some(line => 
            pattern.test(line)))) {
                return;
            }
        originalWarn(...args);
    },
    error: (...args) => {
        const canSkip = args.some(line => {
            return errorPatterns.some(pattern => {
                return pattern.test(line?.message || line);
            });
        });
        if (canSkip) {
            return;
        }
        originalError(...args);
     }
}


然后如果你有JSDOM,你必须模拟虚拟控制台。我更喜欢在测试中这样做,因为你可能没有太多的边界测试。

it('should catch Errors', () => {
    const virtualConsole = window._virtualConsole;
    const originalEmit = virtualConsole.emit;
    const emit = jest.spyOn(virtualConsole, 'emit');
    emit.mockImplementation(function (type, error) {
        // you may skip the type check
        if (type === 'jsdomError' && error.detail.message === 'Should be caught by ErrorBoundary') {
            return;
        }
        return originalEmit.call(this, type, error);
    });

    const { getByText } = render(() => throw new Error('Should be caught by ErrorBoundary'));
    expect(getByText('Should be caught by ErrorBoundary').toBeInTheDocument();
    emit.mockRestore();
});

相关问题