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

ReactjsEnzyme

Reactjs Problem Overview


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

Reactjs Solutions


Solution 1 - Reactjs

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

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

Solution 2 - Reactjs

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

Solution 3 - Reactjs

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

Solution 4 - Reactjs

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

It worked for me...

Solution 5 - Reactjs

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

Solution 6 - Reactjs

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 :-).

Solution 7 - Reactjs

This solution is working perfectly:

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

Solution 8 - Reactjs

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionreectrixView Question on Stackoverflow
Solution 1 - ReactjsalexfigtreeView Answer on Stackoverflow
Solution 2 - ReactjsBrian HoView Answer on Stackoverflow
Solution 3 - ReactjsBlackView Answer on Stackoverflow
Solution 4 - ReactjsThomas JohnView Answer on Stackoverflow
Solution 5 - ReactjsEcliptic RickView Answer on Stackoverflow
Solution 6 - ReactjsAleksandar GrbicView Answer on Stackoverflow
Solution 7 - ReactjsAbhijith SasikumarView Answer on Stackoverflow
Solution 8 - ReactjsLukas HeiligenbrunnerView Answer on Stackoverflow