您如何在 Enzyme 中模拟 keyDown 输入事件（或其他事件）？答案

【问题标题】：How do you simulate an keyDown enter event (or others) in Enzyme?您如何在 Enzyme 中模拟 keyDown 输入事件（或其他事件）？
【发布时间】：2023-03-31 11:24:01
【问题描述】：

我正在尝试模拟一个keyDown 事件，专门针对 Enter，keyCode: 13。我已经尝试了许多不同的方法来做到这一点，但它们都不起作用。我也在网上查看过，似乎这个功能在当前版本的 Enzyme 中要么有问题，要么不起作用。有谁确切地知道此功能是否有效，如果有效，模拟输入或其他类型的关键事件的正确语法是什么？谢谢！

这是我目前拥有的，但它不起作用：

const input = wrapper.find('input');
input.simulate('keyDown', {keyCode: 13});

我目前的 Enzyme 版本是 2.4.1

【问题讨论】：

应该可以。您使用的是shallow 还是mount？
@ZekeDroid 是否有任何确定的方法来验证它是否正常工作？我对其是否正常工作的测试涉及检查是否创建了新组件，在这种情况下，这没有发生。此外，sinon 和 chai 在酶中的间谍实用程序都存在问题，因此我无法使用它们来验证用户事件。
我会在您的输入字段中添加一个onChange 事件并在每个事件中添加console.log。然后运行你的测试，看看你是否得到keyDown事件
这些可模拟事件记录在哪里？ airbnb 文档只提到“点击”，而不是例如 keypress 或 keyDown [sic]。它们是从某个地方的 WebAPI 借来的吗？
这适用于使用 mount 的酶 3.1.0。事件名称是keydown

标签： unit-testing reactjs frontend enzyme

【解决方案1】：

wrapper.find('input').simulate('keydown');

它对我有用...

【讨论】：

【解决方案2】：

我没有使用keyCode，而是使用了一个键，在'Enter'的情况下，使用mount：

wrapper.find('input').simulate('keypress', {key: 'Enter'})

【讨论】：

它对我有用，澄清一下，我正在使用 Enzyme 和 Jest。
哦，我遇到了问题。 “keyPress”应该是“keypress”。为我工作！
我为此苦苦挣扎，但记得我使用的是 keyDown 事件而不是 keyPress。如果您遇到困难，请记住这一点。
官方文档中没有这方面的内容真是糟透了！
这不适用于 onKeyDown，您需要使用.simulate('keydown', { key: 'Enter' });，即如果您的支票是if (e.key === 'Enter')

【解决方案3】：

我正在使用“浅”安装（Enzyme 3.7.0 和 Jest 23.6.0）。这对我有用：

const input = wrapper.find('input');
input.simulate('change', { target: { value: 'abcdefg'} });
input.simulate('keydown', { keyCode: 13 });

【讨论】：

这些键码常量从何而来？无法通过快速谷歌搜索找到
其实就是ASCII表中的索引号。根据 ASCII 表 (asciitable.com)，数字 13 代表回车（表示 ENTER 键）。有人提出同样的问题：stackoverflow.com/questions/6086686/keycode-13-is-for-which-key

【解决方案4】：

const wrapper = mount(<App />);
const input = wrapper.find('input');
input.props().onKeyDown({key: 'Enter'});

酶 3.9.0
反应 16.8.6

【讨论】：

在这个论坛上，纯代码的答案通常不受欢迎。请编辑您的答案，以包括对您的代码的作用以及它将如何解决 OP 的问题的描述。

【解决方案5】：

模拟解决方案已弃用

酶模拟应该在版本 4 中被删除。主要维护者建议直接调用 prop 函数。一种解决方案是直接测试调用这些道具是否正确；或者您可以模拟实例方法，测试 prop 函数是否调用它们并对实例方法进行单元测试。

例如，您可以调用 key down

wrapper.find('input').prop('onKeyDown')({ key: 'Enter' })

或

wrapper.find('input').props().onKeyDown({ key: 'Enter' })

关于弃用的信息：https://github.com/airbnb/enzyme/issues/2173

【讨论】：

感谢您提供弃用上下文！

【解决方案6】：

这实际上取决于实现。如果你在你的实现中使用过这样的东西：

if (event.charCode === 13) {
  // do something
}

您可以像这样在测试中模拟事件：

wrapper.find('input').simulate('keypress', { charCode: 13 });

希望它有所帮助:-)。

【讨论】：

【解决方案7】：

此解决方案运行良好：

wrapper.find('#id1').simulate('keyDown', {key: 'ArrowRight'});
wrapper.find('#id2').simulate('keyDown', {key: 'Enter'})

【讨论】：

【解决方案8】：

如果您尝试在浅化元素的同时模拟事件，您可以模拟 document.addEventListener 方法：

let events = [];
document.addEventListener = jest.fn((event, cb) => {
    events[event] = cb;
});

shallow(<YourElement/>);

// trigger the keypress event
events.keyup({key: 's'});

// your test expectations
expect(someMethod).toBeCalledTimes(1);

【讨论】：