testing-library / testing-library/user-event
userEvent.type not working in v14
Nobody has claimed this yet.
- 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:
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
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
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