I am using react testing library and by its conventions, elements should be accessed by getByRole.
When I had input type="text" the role was textarea which was fine.
Now I have input with type="number" and the error message suggests I use spinbutton as the role which works but it doesn't make sense to me.
Is there a different role for input with number type?
I am using react testing library and by its conventions, elements should be accessed by getByRole.
When I had input type="text" the role was textarea which was fine.
Now I have input with type="number" and the error message suggests I use spinbutton as the role which works but it doesn't make sense to me.
Is there a different role for input with number type?
- You can remove spin button Refer this stackoverflow./questions/3975769/… – rishabh tripathi Commented Jul 9, 2022 at 13:26
-
If you don’t want a spinbutton, it is quite likely that you are not using the correct input type. Is your input actually a (floating point) number? or does it merely consist of numbers? If it’s the latter, you would want to use
inputtype=numeric pattern=[0-9]*– Andy Commented Jul 11, 2022 at 8:25
2 Answers
Reset to default 11As per MDN on <input type="number">:
The implicit role for the element is spinbutton.
So as long as you didn't change the role by means of a role attribute, this is the correct role to use in getByRole('spinbutton').
An input number is like a counter, so it is spinning its values up and down by clicking in the spin buttons on the right side or the keyboard arrows, (even its pseudo elements are ::-webkit-inner-spin-button, ::-webkit-outer-spin-button).
If this is surprising to you, that input type might not be the right choice for the form control. The documentation reads further:
If spinbutton is not an important feature for your form control, consider not using type="number". Instead, use
inputmode="numeric"along with a pattern attribute that limits the characters to numbers and associated characters.
The number input has several accessibility and usability issues when used for anything that is not a floating point number.
Update (based on OP ment)
So would userEvent.type work on it since it is a spinbutton?
Yes it will work, here is a sandbox with a basic example
import { render, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import "@testing-library/jest-dom";
it("should type a number in input", () => {
const { getByRole } = render(<input type="number" />);
const input = getByRole("spinbutton");
userEvent.type(input, "123456");
waitFor(() => expect(input).toHaveValue("123456"));
});
I will show you how to fish. If you write this in test file
screen.logTestingPlaygroundURL();
this will generate a URL, if you paste this to the browser, you will see the rendered ponent on the page:
If you click on the element, it will generate the suggested query: