testing-library / testing-library/user-event

userEvent.type not working in v14

Open
#1,150 27 comments 33 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Reproduction example

zip file listed bellow

Prerequisites

please download this project demo and run it using npm install
react-testing-library-bug.zip

it has 2 tests:
1- testThatFails
2- testThatWorks

in thre first example, test fails because and can not type into coponent using userEvent.type:

image
code for failing test:


const ExampleThatFails = () => {
  const [state, dispatch] = useReducer(reducer, [
    {
      name: "Age",
      show: true,
      filterValueType: "integer",
      value: ["", ""],
      optionType: "exact",
      key: "age",
    }
  ]);

  return (
    <div>
      <FilterCombo filters={state} dispatch={dispatch} />
      <FilterItem dispatch={dispatch} idx={0} filter={state[0]} />
    </div>
  );
};

it.each(Array(100).fill(null))("ExampleThatFails", async () => {
  render(<ExampleThatFails />);

  const AgeFilterOption = screen.getAllByTestId("filter-item")[0];
  const AgeSelectBox = within(AgeFilterOption).getByRole("button", {
    name: "exact",
  });
  await userEvent.click(AgeSelectBox);
  const AllAgeOptions = within(AgeFilterOption).getAllByRole("option");

  await userEvent.click(AllAgeOptions[1]);

  const numberInputs = screen.getAllByRole("spinbutton");

  await userEvent.type(numberInputs[0], "12333");
  expect(numberInputs[0]).toHaveDisplayValue("12333");
},10000);


code for working test:


const ExampleThatWorks = () => {
  const [state, dispatch] = useReducer(reducer, [
    {
      name: "Age",
      show: true,
      filterValueType: "integer",
      value: ["", ""],
      optionType: "between",
      key: "age",
    }
  ]);

  return (
    <div>
      <FilterItem dispatch={dispatch} filter={state[0]} idx={0} />
    </div>
  );
};

it.each(Array(100).fill(null))("ExampleThatWorks", async () => {

  render(<ExampleThatWorks />);

  const numberInputs = screen.getAllByRole("spinbutton");
  await userEvent.type(numberInputs[0], "12333");
  expect(numberInputs[0]).toHaveDisplayValue("12333");
},10000);

Expected behavior

expected to pass all tests on v14

Actual behavior

testThatFails fails in v14, but when using v13.5 it works properly
testTahtWorks passes on both versions

User-event version

14.1.1(actually all v14 dists act the same)

Environment
{
  "name": "userevent-react",
  "keywords": [],
  "description": "",
  "private": true,
  "dependencies": {
    "@headlessui/react": "1.7.16",
    "@testing-library/jest-dom": "5.16.3",
    "@testing-library/react": "14.0.0",
    "@testing-library/user-event": "^14.1.1",
    "jest": "29.5.0",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-scripts": "^5.0.1"
  },
  "devDependencies": {
    "husky": "^4.2.3",
    "jest-environment-jsdom": "^29.6.2",
    "lint-staged": "^10.0.8",
    "prettier": "^1.19.1",
    "ts-jest": "^29.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "format": "prettier --write \"**/*.+(js|json|css|md|mdx|html)\""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Additional context

No response

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

Run the attached React demo with npm install and compare the failing testThatFails case against testThatWorks under user-event 14.1.1 and 13.5. Inspect the repeated input interaction and existing v14 behavior; done means the failing case passes consistently in v14 without breaking the working case.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
testing-qa
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.