用玩笑测试 React 中 SVG 元素的无效值错误答案

【问题标题】：Test for invalid value errors for SVG Elements in React with jest用玩笑测试 React 中 SVG 元素的无效值错误
【发布时间】：2018-10-07 02:45:52
【问题描述】：

为了测试我的 react 应用程序，我试图捕获所有抛出或写入控制台的错误。

如果像 <p> 这样的普通 HTML 元素具有像 <p color={false}></p> 这样的无效属性，react 会在 console.error 上打印一个错误，我可以这样测试（我正在使用带有酶的玩笑）：

it("renders without error", () => {

    jest.spyOn(console, "error");

    mount(<p color={true}>asdf</p>);

    expect(console.error).toHaveBeenCalled();
});

现在，如果我想测试 SVG 元素中的无效值，如下所示：

<svg>
    <rect width={-1}/>
</svg>

我的测试不起作用，因为错误不是使用 console.error 打印的，而且我无法理解打印的内容。

要重现错误，可以检查此小提琴上的控制台输出：https://jsfiddle.net/uu1j4ksa/

关于如何测试此类错误有什么好的想法吗？

【问题讨论】：

你可以试试jest.spyOn(global.console, "error");
对我不起作用。 jest.spyOn(console, "error"); 和 jest.spyOn(global.console, "error"); 有什么不同？
global.console是在模块上下文中使用的那个，另一个是来自测试本身的那个。顺便说一句，它应该是global.console = {error: jest.fn()}，然后是expect(global.console.error).toHaveBeenCalled()

标签： javascript reactjs unit-testing svg jestjs

【解决方案1】：

您可以在模块中设置控制台以通过 global 上下文进行测试

global.console = {error: jest.fn(), log: jest.fn()}

测试看起来像这样：

expect(global.console.error).toHaveBeenCalled()

【讨论】：