testing-library / testing-library/user-event
number input does not trigger form submit on hitting enter
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.3k
- Forks
- 258
- PR merge metrics
- No merged PRs in 30d
Description
@testing-library/reactversion:13.4.0- Testing Framework and version:
jestversion29.1.1 - DOM Environment:
29.1.1
Relevant code or config:
My form component
import "./styles.css";
import { ReactElement, HTMLInputTypeAttribute } from "react";
export type Props = {
onChange?: (e: any) => void;
onSubmit?: (e: any) => void;
inputType?: HTMLInputTypeAttribute;
};
export default function App({
onChange,
onSubmit,
inputType
}: Props): ReactElement {
return (
<form className="App" onSubmit={onSubmit}>
<input type={inputType} onChange={onChange} data-testid="input" />
</form>
);
}
and my test cases
import App from "./App";
import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
describe("test app", () => {
test("submits form for text input", async () => {
const onSubmit = jest.fn();
const { getByTestId } = render(
<App onSubmit={onSubmit} inputType="text" />
);
const inputEl = getByTestId("input");
await userEvent.type(inputEl, "[Enter]");
expect(onSubmit.mock.calls.length).toBe(1);
});
test("submits form for number type input", async () => {
const onSubmit = jest.fn();
const { getByTestId } = render(
<App onSubmit={onSubmit} inputType="number" />
);
const inputEl = getByTestId("input");
await userEvent.type(inputEl, "[Enter]");
expect(onSubmit.mock.calls.length).toBe(1);
});
});
1st test case is success, but 2nd fails.
What you did:
I was testing a form that had onSubmit method and a single input as a child. On triggering enter for text input gets form submitted but it does not work in the same way for from type number
What happened:
form's onSubmit function does not get called
Reproduction:
https://codesandbox.io/s/react-testing-library-number-input-submit-5zpsvm
Problem description:
- Form's onSubmit method does not get invoked when number input gets enter keypress
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox and the displayed App component and test cases, then run the two form-submission tests in a local reproduction. Done means pressing Enter in a number input invokes the form's onSubmit handler in the same way as the text-input case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, testing-qa
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100