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

Question

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

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

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

我当前的 Enzyme 版本是 2.4.1

Answer 1

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

它对我有用...

Answer 2

在 'Enter' 的情况下，我使用了一个密钥，而不是使用密钥代码，使用 mount：

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

Answer 3

我正在使用 'shallow' 安装（Enzyme 3.7.0 和 Jest 23.6.0）。这对我有用：

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

Answer 4

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

酵素 3.9.0
响应 16.8.6

Answer 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

Answer 6

这实际上取决于实现。如果您在实施中使用过类似的东西：

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

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

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

希望对您有所帮助:-)。

Answer 7

此解决方案运行良好：

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

Answer 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);

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

How do you simulate an keyDown enter event (or others) in Enzyme?

reactjs

enzyme