Test fails when using userEvent.type for an input element of type 'number'

Hello, I recently updated the versions for the following dependencies, and I’m now encountering an issue when using userEvent.type to type a number: “@testing-library/jest-dom”: “^5.11.1”, // Used to be 4.2.4 “@testing-library/react”: “^10.4.7”, // Used to be 9.5.0 “@testing-library/user-event”: “^12.0.13”, //Used to be 11.4.2

Here are all of the dependencies in my project: “@testing-library/jest-dom”: “^5.11.1”, “@testing-library/react”: “^10.4.7”, “@testing-library/user-event”: “^12.0.13”, “prop-types”: “^15.7.2”, “react”: “^16.13.1”, “react-dom”: “^16.13.1”, “react-scripts”: “3.4.1”, “react-test-renderer”: “^16.13.1”

Here’s the test that is failing:

let mockCallback;
beforeEach(() => {
  mockCallback = jest.fn();
  render(<CreateProfileForm label='+' callback={mockCallback}/>);
});

it('weight input gets updated as user types in weight', async () => {
  const weightInput = screen.getByLabelText('Weight(lb)');
  await userEvent.type(weightInput, '200');
  expect(weightInput).toHaveAttribute('value', '200');
});

The test fails because the weight input box was not updated:

    expect(element).toHaveAttribute("value", "200") // element.getAttribute("value") === "200"

    Expected the element to have attribute:
      value="200"
    Received:
      value=""

      38 |   const weightInput = screen.getByLabelText('Weight(lb)');
      39 |   await userEvent.type(weightInput, '200');
    > 40 |   expect(weightInput).toHaveAttribute('value', '200');
         |                       ^
      41 | });

The ‘weightInput’ element is of type ‘number’. The issue however, does not occur when using userEvent.type for an input of type ‘text’.

[robertaird]

I ran into this same issue, and managed to get it working by setting { delay: 1 } as the third argument. Probably not ideal, but it’ll do for now

[maariyadiminsky]

@kentcdodds Correct me if I’m wrong but userEvent still does not handle onChange. For example, I have a input with type number and userEvent.click wouldn’t work for me. I had to resort to using fireEvent.

userEvent uses fireEvent under the code, yet I don’t see any fireEvent.change within userEvent when checking the code. Will there be an update supporting this or maybe I’m just not seeing another way to use userEvent?

I’m my case I’m using findByLabelText but I’ve also tested with getByLabelText as shown here, yet it still doesn’t work.

This is what I have for now, but it would be great to use userEvent instead as I’m using it everywhere else.

const newEvent = {
 ...someDateHere,
  price: 70
};

const priceInput = await findByLabelText('Price');

// doesn't work, a float is expected in Apollo. I wonder if this is related.
// errors is result = ""
// userEvent.type(priceInput, newEvent.price); 

fireEvent.change(priceInput, { target: { value: newEvent.price }}); // works perfect
expect(priceInput.value).toBe(`${newEvent.price}`);

Thanks so much 🙏🏻