testing-library / testing-library/user-event

number input does not trigger form submit on hitting enter

Open
#1,074 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

accuracy
Dominant language
TypeScript
Stars
2.3k
Forks
258
PR merge metrics
No merged PRs in 30d

Description

  • @testing-library/react version: 13.4.0
  • Testing Framework and version: jest version 29.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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.