Question

我构建了一个模态组件，并在ModalContainer组件中添加了ESC keydown行为，如下所示：

componentDidMount() {
  window.addEventListener('keydown', this.handleKeyDown);
}

handleKeyDown(event) {
  if (event.keyCode !== 27) return;
  this.props.hideAuthModal();
  window.removeEventListener('keydown', this.handleKeyDown);
}

这正如预期的那样正常。

我在尝试测试此行为时遇到的问题是我没有使用酶模拟keydown事件的元素，因为事件绑定到window。

我也不确定我在container组件中使用此方法的方法是否理想，因为此container组件还包含与Redux的连接，所以我不是我确定我应该按照我正在做的方式测试这个组件。

所以我的主要问题是：

我应该（理想情况下）把这个keydown事件处理程序（方法）放在哪里？我该如何实施呢？
我如何测试按下按键时是否会使用jest + enzyme调用正确的方法？
我是否应该使用此容器组件来管理我的Modal组件的状态和Redux道具？
我不太确定容器/无状态组件的使用情况，所以我也在这里问：我是否应该始终将容器组件中的所有状态管理和方法与表示组件分开，仅使用它收到道具并显示数据？

编辑：

正如@Jackyef所说，我可以将keydown事件绑定到我的模态组件的最外层div，以在测试时模拟事件。但是我仍然需要其他问题的答案。那会是更正确的做法吗？

Answer 1

您可以将onKeyPress处理程序附加到最外面的div并在那里处理您的逻辑。这样，您可以在测试时模拟按键。

放置的位置以及如何在模态组件中测试ESC keydown

1 个答案: