testing-library / testing-library/user-event
ArrowDown / ArrowUp events in "number" input fields do not trigger onChange
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.3k
- Forks
- 258
- PR merge metrics
- No merged PRs in 30d
Description
Reproduction example
https://codesandbox.io/s/eloquent-tristan-ixhpuv?file=/src/number.test.js
Prerequisites
- Create a
Numbercomponent with anonChangehandler that calls back to the container. - Create a test where
Numbercomponent is rendered with anonChangefunc created withjest.fn(). UseuserEventto click into the field and then simulate a down-arrow keyboard press.
For example:
test('the value can be changed with arrow up & down', async () => {
const initialValue = '7';
const minValue = '5';
const onChange = jest.fn();
render(<NumberField label={LABEL} value={initialValue} onChange={onChange} min={minValue} />);
const input = screen.getByRole('spinbutton');
await userEvent.click(input);
await userEvent.keyboard('{arrowdown}');
expect(onChange).toBeCalledWith('6');
})
Expected behavior
Expected behaviour is for the test to pass. Pressing the down arrow in a browser would cause the number value to reduce by 1 (assuming step=1).
Actual behavior
Upon running the tests, the test fails with the following result:
expect(jest.fn()).toBeCalledWith(...expected)
Expected: "6"
Number of calls: 0
> 64 | expect(onChange).toBeCalledWith('6');
| ^
65 | });
66 | });
User-event version
14.4.3
Environment
Testing Library framework: @testing-library/react@13.4.0
JS framework: react@18.2.0
Test environment: jest@27.5.1
DOM implementation: jsdom@16.7.0
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
Start with the linked CodeSandbox reproduction, especially src/number.test.js, and run the test using user-event 14.4.3. Trace the corresponding number-input keyboard handling in user-event and verify that ArrowDown and ArrowUp invoke onChange with the updated value, including the demonstrated expected value of "6".
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- testing-qa
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100