Unit testing 如何针对控制台错误测试Vue组件？

测试Vue/Js的概念对我来说是新概念，所以请耐心听我说。通常，如果存在与Vue组件相关的错误，我可以在浏览器控制台中看到它们

例如，如果我有一个Vue组件：

<template>
    <div>
        {{ number }}
    </div>
</template>

<script>
export default {}
</script>

但是，这不起作用，因为即使未定义“number”，它也将始终返回true。如何检查组件加载时是否没有控制台错误。

这不是错误而是警告，这就是组件呈现的原因

适当的测试策略是测试行为，因为框架不会引起警告并不意味着单元工作正常。具有完整代码覆盖率的套件不会导致此类警告

console.error调用可以被额外监视以加强测试，但在这种情况下，这是完全多余的：

spyOn(console, 'error');
const wrapper = mount(Component);
expect(wrapper.find('div').text()).toContain('123456'); // easier to do with a snapshot
expect(console.error).not.toHaveBeenCalled();

---

请注意，console和其他一些内置方法应小心监视和模拟，因为它们会干扰测试框架的错误报告。

测试这一点的一种方法是验证div是否包含任何数字的预期值。@tony19是的，这不是我想要的。我有一个特定的场景，我希望通过这种方式进行测试。

spyOn(console, 'error');
const wrapper = mount(Component);
expect(wrapper.find('div').text()).toContain('123456'); // easier to do with a snapshot
expect(console.error).not.toHaveBeenCalled();