jestjsreact-testing-libraryreact-testing

React Jest test not working for number input

I'm writing a test that checks the input of 2 fields, one is type text and the other is type number.

I can grab the text input without issue and test it:

textInput = getAllByPlaceholderText('name');
userEvent.type(textInput[0], 'username');

This works perfectly when I check the test with screen.debug();

But the number input is very different.

numInput = getAllByRole('spinbutton');
userEvent.type(numInput[0], '1');

This doesnt change the value when checking the debugger. I've been searching online for an answer but failed to find anything, could someone help? I'm guessing the userEvent needs changing but since any actual users can simply type into this box should .type still work?

Solution

  • Ok I think I found out.

    It seems that in vanillajs/html "onchange" DOES NOT FIRE when you type a value in an .

    BUT it does fire when you click on the little arrows to increase and decrease the number.

    Sandbox: https://codesandbox.io/s/onchange-on-input-number-8c2tqc

    So it seems that userEvent work a bit the same way and does not trigger a change event when you type a value in an input value that has the type "number".

    That is probably why it's not reflected in the JSDOM when you use screen.debug() (probably because it uses the official MDN specification )

    Still, it seems that it is taken into account and react actually trigger the onChange behind the scene. But you won't see it with the screen.debug()