调试未定义的jest快照

Question

我有一些反应代码,我试图测试,看起来像这样:

beforeEach(() => {
  wrapper = mount(
    <Provider store={store} >
      <MyPage params={params} location={location} />
    </Provider>
  );
});

test('renders My Page', () => {
  expect(wrapper).toMatchSnapshot();
});

我试图从react-router传递位置,这样我就可以访问我页面中的查询参数及其组件.我有一个适用的快照(例如显示DOM等),但是一旦我添加了这个新属性wrapper返回undefined.

我调试了它,它似乎<MyPage ...>根本不再渲染.我已经尝试将<MyPage ...>调用移动到它自己的变量中,但这也没有用.最后,我也尝试将它从mount更改为浅(不确定是什么).我查看了文档,我似乎无法找到任何指示我如何告诉它为什么不渲染\ mount的东西.

是否有任何工具,技术或手段来检测挂载页面\组件无法呈现\ mount的原因？

编辑1

在一位同事的帮助下,我发现了我的问题 - 问题是我用的是PropTypes.shape代替PropTypes.shape().我可以在本地重现这个,但是没有一个在线沙箱工具似乎能够简化这一点.而且,就像它(使用无效的PropType)一样,它确实在开玩笑中无声地失败.那么,有没有一种方法可以使用标准工具和技术检测到这一点？

Answer 1

解释一下我的评论，React 本身会抛出无效的 PropType 错误，因此阅读其控制台日志应该可以解决您的问题。正如您所指出的：如果您使用任何包装器进行测试，日志可能会被抑制，因此从裸 cli 运行它们会有所帮助。