testing-library / testing-library/user-event
`userEvent.click()` fails when used with `vi.useFakeTimers()`, all available solutions are not working
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://stackblitz.com/edit/vitejs-vite-askvcq?file=src/__tests__/App.test.tsx
Prerequisites
Describe the bug
I have a React component which is a timer (minimal reproduction), that starts automatically after mounted, and there's a button to RESET the timer.
In the test, I'm using vi.useFakeTimers() and await vi.advanceTimersByTimeAsync(500) to test the timer segmentally.
However, I'm not able to use await user.click() to click the button.
This is a known issue with fake timers, however, none of the existing solutions works.
None of these works
const user = userEvent.setup({
advanceTimers: vi.advanceTimersByTime,
// advanceTimers: vi.advanceTimersByTimeAsync
// advanceTimers: vi.advanceTimersByTime.bind(vi)
// advanceTimers: vi.advanceTimersByTimeAsync.bind(vi)
// delay: null,
})
And I cannot use vi.useRealTimers() before clicking button, since it will break the fake timer to further test the component's reset functionality.
Those solutions above are all based on Jest since almost all resources on the internet are for Jest. But since I've never used Jest, so I'm not sure if it's working in Jest, and is this an issue with @testing-library/user-event or Vitest
Expected behavior
The button is successfully clicked
Actual behavior
It makes the test timed out
User-event version
14.0.0
Environment
System:
OS: Windows 10 10.0.22000
CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
Memory: 9.23GB / 31.69GB
Binaries:
Node: 16.18.0 - C:\Program Files\nodejs\node.EXE
npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22000.120.0), Chromium (112.0.1722.39)
Internet Explorer: 11.0.22000.120
npmPackages:
@vitejs/plugin-react: ^3.1.0 => 3.1.0
vite: ^4.2.1 => 4.2.1
vitest: ^0.30.1 => 0.30.1
@testing-library/jest-dom: ^5.16.5 => 5.16.5
@testing-library/react: ^14.0.0 => 14.0.0
@testing-library/user-event: ^14.4.3 => 14.4.3
jsdom: ^21.1.1 => 21.1.1
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
Additional context
Please also refer to https://github.com/vitest-dev/vitest/issues/3184
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 StackBlitz reproduction and the test using userEvent.setup, vi.useFakeTimers(), and vi.advanceTimersByTimeAsync(). Compare the listed timer configurations and the Vitest issue linked in the report. Done means the reset button click completes without timing out and the timer behavior remains testable with fake timers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100