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

Question

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

@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 '16 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 '16 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 08 '17 at 16:10
This works with enzyme 3.1.0 using mount. Event name is `keydown` — Frozen Crayon, Feb 08 '18 at 17:02

score 84 · Accepted Answer · edited Sep 17 '17 at 11:36

84

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

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

edited Sep 17 '17 at 11:36

JoeTidee

24,754
25
104
149

answered Jan 20 '17 at 22:50

alexfigtree

1,516
14
16

It worked for me, and to clarify, I am using Enzyme with Jest. – alexfigtree Mar 29 '17 at 19:15
7

oh I got the problem. "keyPress" should be "keypress". Worked for me!! – pritesh Mar 31 '17 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 03 '17 at 13:30
4

it sucks that there's nothing about this in the official docs! – blankface Apr 19 '18 at 02: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')` – Julius Koronci Feb 25 '20 at 12:00
Official docs: https://github.com/enzymejs/enzyme/blob/master/docs/api/ReactWrapper/simulate.md – Mike Harrison Mar 20 '20 at 13:28

score 26 · Answer 2 · answered Dec 12 '18 at 01:30

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

answered Dec 12 '18 at 01:30

Brian Ho

391
4
7

where do these keycode constants come from? Couldn't find with a quick google search – Andy McCall Apr 20 '20 at 16:34
It is actually the index number in the ASCII table. Based on the ASCII table (http://www.asciitable.com/), number 13 represents Carriage Return (means ENTER key). Someone raised the same question at: https://stackoverflow.com/questions/6086686/keycode-13-is-for-which-key – Brian Ho Apr 20 '20 at 23:04

Black · Answer 3 · 2020-07-14T19:29:26.313

18

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

edited Jul 14 '20 at 19:29

answered Jul 26 '19 at 13:21

Black

9,541
3
54
54

Thanks for giving that deprecation context! – Rey Oct 09 '19 at 14:10

Thomas John · Answer 4 · 2020-02-26T20:41:22.867

10

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

It worked for me...

edited Feb 26 '20 at 20:41

answered Aug 19 '16 at 06:15

Thomas John

2,138
2
22
38

score 1 · Answer 5 · answered May 23 '19 at 21:15

1

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

Enzyme 3.9.0
React 16.8.6

answered May 23 '19 at 21:15

Ecliptic Rick

23
4

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 '19 at 21:40

score 1 · Answer 6 · answered Sep 09 '19 at 12:11

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

Abhijith Sasikumar · Answer 7 · 2020-12-06T10:50:06.013

1

This solution is working perfectly:

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

edited Dec 06 '20 at 10:50

answered Sep 24 '19 at 05:00

Abhijith Sasikumar

13,262
4
31
45

score 0 · Answer 8 · edited Aug 30 '22 at 01:15

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

edited Aug 30 '22 at 01:15

Penny Liu

15,447
5
79
98

answered Jan 25 '21 at 20:09

Lukas Heiligenbrunner

136
5

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

8 Answers8

Linked