javascript - 为什么 useState 不在单元测试(Jest、Enzyme)中重新渲染组件？

Question

我在 Jest 中重新渲染 Enzyme-wrapped 组件时遇到问题。我花了一些时间来缩小问题的范围，但它似乎是 useState 和 Enzyme 的问题。

我有一个带有按钮的组件。单击该按钮会调用 setState() 函数来更新组件状态并重新呈现。例如:

// ...
<Drawer
  classes={{ paper: classes.drawer }}
  anchor="right"
  open={showInfoDrawer}
  variant={mobile() ? 'temporary' : 'persistent'}
  onClose={() => {
    console.log('closing'); // to check onClose simulation works
    setShowInfoDrawer(false);
  }}
  >
  // rest of component...
</Drawer>
// ...

在此示例中，setShowInfoDrawer() 是 useState() Hook 的一部分，作为 prop 从父组件传递下来。

当我运行测试时(参见下面的示例)，点击模拟似乎有效，但组件没有重新呈现。

test('should close ActivityInfoDrawer', () => {
  expect(wrappedActivityInfoDrawer.find(Drawer)).toHaveLength(1);
  const wrappedDrawer = wrappedActivityInfoDrawer.find(Drawer);
  // @ts-ignore
  act(() => wrappedDrawer.props().onClose()); // Logs "Clicked..."
  wrappedActivityInfoDrawer.update();
  expect(wrappedActivityInfoDrawer.find(Drawer)).toHaveLength(0); // Fails
  });

我做了一些研究，似乎有一段时间 Enzyme 不支持 useState，但地址在这个 PR 中，看起来它是与版本 3.11.0 一起发布的，甚至可能是 3.10.0(我使用的是最新的 3.11.0)。

我做错了什么？是因为 setShowInfoDrawer() 来自父组件吗？如果是这样，我该如何让它发挥作用？

Answer 1

好吧，我明白了。事后看来，这是很明显的。我需要将此测试作为对父组件(即打开抽屉并具有 useState() Hook 的组件)的测试，而不是作为一个单元运行测试抽屉组件本身。