Issues testing keyboard events with BlueprintJS NumericInput

[j5bot]

• react-testing-library version: 6.0.0
• react version: 16.8.1
• node version: 8.14.0
• npm (or yarn) version: yarn 1.12.3

Relevant code or config:

    fireEvent.keyPress(input, generateKeyEvent(input));
    expect(input.value).toBe("203");
    expect(onValueChange.mock.calls.length).toBe(1);

What you did:

Trying to fire a keyPress event on a BlueprintJS NumericInput's input element.

What happened:

Component's onValueChange handler is not triggered.

Reproduction:

https://codesandbox.io/s/w20nqx93pk

Problem description:

I am unable to test simulated user behavior when interacting with my components which leverage BlueprintJS NumericInput component.

Suggested solution:

It is possible this is happening because of the way that the BlueprintJS component handles events. I have opened an issue with them as well, here. Other than that component's event handling, I have come across descriptions of issues with triggering keyboard events in the browser.

[kentcdodds]

The tests in the codesandbox are passing. What am I missing?

[j5bot]

I’m away from my computer but if I recall a bunch of the tests are asserting that the event handlers are not triggered. I guess that was a bad idea :) my apologies for the confusion. The .not.toBe(“203”) should fail and the mock call length should be 1 and cause those assertions to fail. My latest attempts to figure out the problem seemed to show that the events being sent are set ‘isTrusted’: false, with no other parameters such as key, etc. In the browser world that happens for security reasons.

…

On Fri, Mar 29, 2019 at 3:56 PM Kent C. Dodds ***@***.***> wrote: The tests in the codesandbox are passing. What am I missing? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#336 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAJvGwO1cX65rvzbDIRPjsRit316ymm1ks5vbm_qgaJpZM4cSzvu> .

[alexkrolick]

https://github.com/jsdom/jsdom/blob/master/Changelog.md#1320

The isTrusted property is set by JSDOM in 13.2.0 - can you try adding jest-environment-jsdom-thirteen or pinning the resolution of jsdom to 13+ and see if this still is an issue?

[j5bot]

Thanks for the tip, @alexkrolick but I can't seem to get the keyboard event sent by fireEvent to have isTrusted: true and trigger the keypress event as if it were a user action.

I found this, which seems to put a nail in the coffin of trying to test the effects of keyboard events: jsdom/jsdom#2102

"No, there are no user actions in jsdom."

While keyboard event listeners will be triggered, the event will not act like a user typing and change the value of an input, and will not trigger a change event handler.

If you can get the keyboard event to actually send isTrusted: true and trigger events as user actions, I would love to see the code.

[kentcdodds]

This is honestly really unfortunate.

I think you could get around this by running your tests in Karma (and react-testing-library should work there), but then you wont be able to use Jest ☹

Either way there's nothing we can do about this in react-testing-library I think, so I'll close this.

[weyert]

I would suggest to the user-event-npm which handles this all tad bit better. Have a look what we are doing there to try to get reasonable close to how typing in the browser behaves, definitely not perfect, though: https://github.com/Gpx/user-event/blob/68af3552d21d33d600d62239f97da1e2d76ce5e9/src/index.js#L166