61

I'm trying to simulate a keyDown event, specifically for Enter, keyCode: 13. I've tried a number of different ways of doing this, but none of them are working. I've also looked online and it seems like this feature is either buggy or not working in the current version of Enzyme. Does anyone know definitively if this feature works, and if so, what is the proper syntax for simulating an enter, or other types of key events? Thanks!

This is what I have currently, and it's not working:

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

My current Enzyme version is 2.4.1

5
  • That should work. Are you using shallow or mount?
    – ZekeDroid
    Aug 15, 2016 at 18:33
  • @ZekeDroid is there any sure way to verify that it's working? My test of whether it's working or not involves checking if a new component is created, and in this case, that's not happening. Also, I've had issues with both sinon and chai's spy utilities in enzyme, so I haven't been able to use those to verify user events.
    – reectrix
    Aug 15, 2016 at 18:58
  • I would add an onChange event to your input field and console.log every event. Then run your test and see if you get the keyDown event
    – ZekeDroid
    Aug 15, 2016 at 19:18
  • Where are these simulate-able events documented? The airbnb docs only mention 'click', not e.g., keypress or keyDown[sic]. Are they borrowed from the WebAPI somewhere?
    – pgblu
    Nov 8, 2017 at 16:10
  • This works with enzyme 3.1.0 using mount. Event name is keydown Feb 8, 2018 at 17:02

8 Answers 8

84

Instead of using a keyCode, I used a key, in the case of 'Enter', using mount:

wrapper.find('input').simulate('keypress', {key: 'Enter'})
6
  • It worked for me, and to clarify, I am using Enzyme with Jest. Mar 29, 2017 at 19:15
  • 7
    oh I got the problem. "keyPress" should be "keypress". Worked for me!!
    – pritesh
    Mar 31, 2017 at 22:13
  • 9
    I struggled with this, but remembered I was using the keyDown event instead of keyPress. Good to keep that in mind if you're stuck.
    – Matt Dell
    May 3, 2017 at 13:30
  • 4
    it sucks that there's nothing about this in the official docs!
    – blankface
    Apr 19, 2018 at 2:04
  • 5
    This will not work with onKeyDown, you need to use .simulate('keydown', { key: 'Enter' }); that is if your check is if (e.key === 'Enter') Feb 25, 2020 at 12:00
26

I'm using 'shallow' mount (Enzyme 3.7.0 with Jest 23.6.0). This work for me:

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

Simulate solution is deprecated

Enzyme simulate is supposed to be removed in version 4. Main maintainer is suggesting directly invoking prop functions. One solution is to directly test that invoking those props does the right thing; or you can mock out instance methods, test that the prop functions call them and unit test the instance methods.

You could call key down for example

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

or

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

Information about deprecation: https://github.com/airbnb/enzyme/issues/2173

1
  • Thanks for giving that deprecation context!
    – Rey
    Oct 9, 2019 at 14:10
10
wrapper.find('input').simulate('keydown');

It worked for me...

1
const wrapper = mount(<App />);
const input = wrapper.find('input');
input.props().onKeyDown({key: 'Enter'});
  • Enzyme 3.9.0
  • React 16.8.6
1
  • 1
    Code-only answers are generally frowned upon on this forum. Please edit your answer to include a description of what your code does and how it will solve OP's problems.
    – mypetlion
    May 23, 2019 at 21:40
1

It actually depends on the implementation. If you've used something like this in your implementation:

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

you would simulate the event in your test like this:

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

Hope it helps :-).

1

This solution is working perfectly:

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

If you try to simulate a Event while shallowing an Element you could mock the document.addEventListener method:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.