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运行它们会有所帮助。

调试未定义的jest快照

1 个答案: