Can't dispatch KeyboardEvent in Jsdom

Hi, I’m using jsdom in my unit test, and I need test mouse event and keyboard event. Code like this will trigger click event I bind to “svg” element.

var event = new window.MouseEvent("click");
document.querySelector('svg').dispatchEvent(event);

But code like this will not trigger keydown event I bind to document or body, why?

var event = new window.KeyboardEvent("keydown", {key: "z", char: "z", keyCode: 90});
document.dispatchEvent(event);

It will work in browser, but not work in jsdom. where I was wrong?

[spen]

A re-jig of @i8-pi’s example worked for me! I thought I’d post for anybody else who finds their way to this issue 😁

const onEscapeSpy = spy();
const wrapper = mount( <CloseOnEscape onEscape={ onEscapeSpy } /> );
const event = new window.KeyboardEvent( 'keydown', { keyCode: 27 } );
document.dispatchEvent( event );

expect( onEscapeSpy ).to.have.been.calledOnce;

Basically: create a new window.KeyboardEvent > dispatch that event on document > 👌

[ronen]

In case anybody (like me) finds this old issue because they’re trying to dispatch a keyboard event from a specific node but intending to handle it in the document with event.target set appropriately (which is how KeyboardEventHandler works ), there are two things to note:

• You need to specify bubbles: true in the event so that it will bubble to the document
• If you’re coming from enzyme, note that mount() does not put the component in the document, you need to specify attachTo: with a node that’s in the document (React will complain if you try to directly attach to document.body)

A re-jig of @spen’s code:

const onEscapeSpy = spy();
document.addEventListener( 'keydown', onEscapeSpy )

const root = document.createElement( 'div' );
document.body.appendChild( root );
const wrapper = mount( <MyComponent />, { attachTo: root } );

const event = new window.KeyboardEvent( 'keydown', { keyCode: 27, bubbles: true } );
const targetNode = wrapper.getDOMNode();
targetNode.dispatchEvent( event );

expect( onEscapeSpy ).to.have.been.calledOnce;
expect( spy.lastCall.lastArg.target ).to.equal( targetNode );