调试未定义的笑话快照答案

【问题标题】：debugging undefined jest snapshot调试未定义的笑话快照
【发布时间】：2017-07-21 19:14:12
【问题描述】：

我有一些我正在尝试测试的反应代码，如下所示：

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

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

我正在尝试从 react-router 向下传递位置，以便我可以访问页面中的查询参数及其组件。我有一个可用的快照（例如显示 DOM 等），但只要我添加这个新属性 wrapper 就会返回未定义。

我已经对此进行了调试，它似乎不再呈现 <MyPage ...> 了。我已经尝试将 <MyPage ...> 调用移动到它自己的变量中，但这也不起作用。最后，我还尝试将它从 mount 更改为 shallow （不知道那是做什么的）。我查看了文档，但似乎找不到任何说明如何判断它为什么不会渲染\安装的内容。

是否有任何工具、技术或方法来检测为什么已安装的页面\组件不呈现\安装？

编辑 1

在同事的帮助下，我发现了我的问题 - 问题是我使用的是 PropTypes.shape 而不是 PropTypes.shape()。我可以在本地重现它，但似乎没有一个在线沙盒工具可以让这变得简单。此外，事实上（使用无效的 PropType）它确实在开玩笑地默默地失败了。那么，有没有一种方法可以让我使用标准工具和技术检测到这一点？

【问题讨论】：

console.log(wrapper.html()) 和console.log(wrapper.debug()) 的输出是什么？如何导出<MyPage /> 组件？为什么你的测试需要<Provider ...>？你在测试connected 组件吗？你为什么不使用enzyme-to-json 来保存你的快照，或者你正在使用它，因为你在开玩笑地配置了snapshotSerializers？最后，您能否澄清一下以前对您有用的东西和现在不起作用的东西。
当我添加 html 或调试函数调用时，我得到了TypeError: Cannot read property 'html' of undefined。我没有导出<MyPage />，因为它是一个页面，而不是一个组件。我正在导出一个子组件，我试图将属性传递给它，就像export const MyAppComponent = connectToModel(MyAppComponentUI, stateToPropsConfig); 我正在使用提供程序将模拟数据传递给我的组件。
您能否在任何 REPL / javascript-sandbox 中发布一个示例（例如 repl.it/languages/jest），以便任何人都可以测试和理解您的问题，好吗？
@DHlavaty 我已经更新了问题，并进行了编辑。
你的节点版本是多少？至于无效的 PropTypes，React 本身会引发控制台错误，因此阅读 console.error 应该可以回答您的问题。以下是如何实现这一点的一些想法： 1. 将console.error 放入测试中。 2. 运行jest -i。 3. 添加这个：afterAll(done => { setTimeout(() => done(), 3000); });。 4. 降级到节点 6。

标签： javascript reactjs jestjs

【解决方案1】：

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

【讨论】：