使用测试库进行测试时，无法捕获React组件内部引发的错误

Question

要测试的组件

function ShopStatsConsumer({ shopId, shopName }) {
return (
<ShopStatsContext.Consumer>
{(context) => {
if (!(context || {}).state) {
throw new Error('ERROR');
}
return <ShopStats context={context} shopId={shopId} shopName={shopName} />;
}}
</ShopStatsContext.Consumer>
);
}

因果报应测试，测试库

it('throws error when not rendered inside a <ShopStatsProvider />', function () {
const renderConsumer = () => {
render(<ShopStatsConsumer {...props} />);
};
expect(renderConsumer).to.throw();
});

结果

未通过测试：✖未在内部呈现时引发错误Chrome无头87.0.4272.0(Mac OS 11.0.0(错误：未捕获错误：错误。。。

Answer 1

我怀疑它不能像React文档中所说的那样工作，因为throws()的工作方式与try/catch类似，只能处理命令式代码。

相比之下，<ShopStatsConsumer />是命令式代码。。。