userEvent.type - Only typing in the first letter of my provided input on React 17

• @testing-library/user-event version: 12.6.0

• Testing Framework and version: Jest 26.6.3
• DOM Environment: jsdom 16.4.0

What you did: I set up a test to check the input value after typing with text of “Input”

What happened: The input value in the test was only set to “I”

Reproduction repository: https://codesandbox.io/s/peaceful-surf-fedc7?file=/src/App.spec.js

Problem description: The userEvent is not firing off completely and is only typing the first letter of my provided input on React 17. This is leading to cases where I can’t write complete tests currently. I am not totally sure if this will help but there are similar issues with fireEvent as well.

Suggested solution:

[ph-fritsche]

This one is tricky.

Remember variables are bound to their declaration. Properties are resolved when the expression is executed.

  const onChange = (event) => {
    setState((prevState) => ({
      ...prevState,
      // event is bound - event.target.value is resolved when the reducer is executed
      [event.target.name]: event.target.value
    }));
  };

  // this one works
  const onChange = (event) => {
    const value = event.target.value
    setState((prevState) => ({
      ...prevState,
      [event.target.name]: value
    }));
  };

Now React hooks are no language constructs and you can use them in any way, but I guess it doesn’t make life easier. While setState with a reducer works, I suggest you use useReducer for that.

  const [state, change] = useReducer(
    (prevState, newProps) => ({
      ...prevState,
      ...newProps
    }),
    {}
  );
  const onChange = (event) => {
    change({
      [event.target.name]: event.target.value
    });
  };

Regarding the issue, I think it should be closed as out of scope, but someone else should have a look at this first. While it does behave differently in the browser, the reasons lie deep down in how fireEvent creates the Event on an element controlled by React. I’m not sure there is an easy way to fix this.

[andreasdjs]

@ph-fritsche

I had the same problem and your solution saved the day for me, thank you! 👍

Like you wrote, the value had to be resolved before putting it inside the prevState thingy, like this: const { value } = event.target;