test: migrate to Vitest fake timers, remove @testing-library/user-event, and resolve act warnings #3147

sukvvon · 2025-09-13T14:08:06Z

Related Bug Reports or Discussions

Fixes #

Summary

This PR migrates all tests from real timers to Vitest fake timers to improve test determinism and execution speed. The migration includes comprehensive updates across 33 test files, eliminates most React act warnings, and removes the @testing-library/user-event dependency in favor of fireEvent.

Key Changes

Migrate to Vitest fake timers - Add beforeEach(vi.useFakeTimers) and afterEach(vi.useRealTimers)
Replace userEvent with fireEvent - Use synchronous event simulation (userEvent uses real timers internally)
Replace Promise resolver pattern with setTimeout delays - Convert manual promise resolution to timer-controlled delays
Replace Testing Library async utilities - Switch from findByText/waitFor to getByText with explicit timer control
Add loading state assertions - Verify Suspense loading states during async transitions
Fix React act warnings - Wrap operations properly to eliminate console warnings

Why Replace `userEvent` with `fireEvent`?

userEvent uses real timers internally, conflicting with fake timers
fireEvent is synchronous and fully compatible with vi.useFakeTimers()
For state management testing, we need logic correctness, not interaction realism
Simpler, faster, and one less dependency

`fireEvent` Pattern (Simple Rule)

Use await act(() => fireEvent.click(...)) when immediately checking Suspense loading state.

Otherwise use plain fireEvent.click(...).

Examples

With Suspense (need act):

await act(() => fireEvent.click(screen.getByText('button')))
expect(screen.getByText('loading')).toBeInTheDocument() // ← checking loading right after
await act(() => vi.advanceTimersByTimeAsync(100))
expect(screen.getByText('result')).toBeInTheDocument()

Without Suspense (plain fireEvent):

fireEvent.click(screen.getByText('button')) // ← no loading check needed
expect(screen.getByText('count: 1')).toBeInTheDocument()

Pro tip: When in doubt, try plain fireEvent first. If the test fails or shows act warnings, wrap with await act().

Statistics

Files changed: 33 test files + package.json
Lines changed: +2,249 / -2,229 (net +20)
Dependencies removed: @testing-library/user-event

Check List

pnpm run fix for formatting and linting code and docs

vercel · 2025-09-13T14:08:10Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
jotai	Ready	Preview	Comment	Nov 5, 2025 5:25pm

codesandbox-ci · 2025-09-13T14:08:39Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

pkg-pr-new · 2025-09-13T14:09:01Z

More templates

npm i https://pkg.pr.new/jotai@3147

commit: 1442388

github-actions · 2025-09-13T14:10:09Z

Preview in LiveCodes

Latest commit: 1442388
Last updated: Nov 5, 2025 5:24pm (UTC)

Playground	Link
React demo	https://livecodes.io?x=id/BFT2XY2NG

See documentations for usage instructions.

…ByText' with 'getByText', and add fake timers

…ByText' with 'getByText', and remove 'waitFor'

…t' with 'getByText', add fake timer, and remove 'waitFor'

…icrotask delay

…dencies test

dai-shi · 2025-11-02T11:58:52Z

I feel like I'm talking to AI. My review is not comprehensive, and I need to count on you @sukvvon human to review all tests follow what I suggested.

sukvvon · 2025-11-02T13:08:39Z

@dai-shi

I feel like I'm talking to AI. My review is not comprehensive, and I need to count on you @sukvvon human to review all tests follow what I suggested.

I understand. Thank you for sharing your thoughts.

…estore microtask delay" This reverts commit 278abe2.

…timer advancement in bail test

…rtions(6)' in setSelf timing test

dai-shi

As I felt like I might overlook something, I reviewed abortable.test.tsx and async.test.tsx again.

dai-shi · 2025-11-05T08:17:57Z

tests/react/abortable.test.tsx

      render(
        <StrictMode>
-          <Suspense fallback="loading">
+          <Suspense fallback={<div>loading</div>}>


Is this change important? If so, can you create another PR? We would like to reduce diffs so that it reduces the human brain power for the review.
If you use AI coding assistant, asking them to reduce git diff -w output might be helpful.

@dai-shi Changed all Suspense fallback from <div>loading</div> to "loading" for simplicity. Also changed error.test.tsx from fallback={null} to fallback="loading" since null fallback doesn't provide meaningful loading state in 3f49240.

dai-shi · 2025-11-05T08:22:13Z

tests/react/abortable.test.tsx


-    await userEvent.click(screen.getByText('button'))
-    await userEvent.click(screen.getByText('toggle'))
+    expect(abortedCount).toBe(0)


Do we need this line? You can leave it if it's helpful.

@dai-shi Removed redundant abortedCount check before unmount in ffda141. The meaningful assertion is after unmount to verify abort didn't happen.

dai-shi · 2025-11-05T08:36:39Z

tests/react/async.test.tsx

  const asyncCountAtom = atom(
-    async (get) => get(countAtom),
+    async (get) => {
+      await new Promise<void>((resolve) => setTimeout(resolve, 100))


Actually "it" says "without setTimeout", so maybe we want to remove this and remove "loading" check if necessary.

https://github.com/pmndrs/jotai/blob/b6ada607bd928e54214ebb00c5ef0838f53dfe2e/tests/async.test.tsx is the original commit. We used setTimeout for the following test.

What do you think?

@dai-shi I agree with you. I removed in 1442388. Also removed loading assertions since there's no async delay.

dai-shi · 2025-11-05T08:37:33Z

tests/react/async.test.tsx

 it('async get and useEffect on parent', async () => {
  const countAtom = atom(0)
  const asyncAtom = atom(async (get) => {
+    await new Promise((resolve) => setTimeout(resolve, 100))


Maybe this too.

dai-shi · 2025-11-05T08:38:01Z

tests/react/async.test.tsx

+  expect(screen.getByText('loading')).toBeInTheDocument()
+  await act(() => vi.advanceTimersByTimeAsync(100))


Can remove this if we remove that.

tests/react/async.test.tsx

…'loading'

…re unmount

…nc atoms in useEffect tests

vercel bot deployed to Preview September 13, 2025 14:08 View deployment

test(react/useSetAtom): replace 'userEvent' with 'fireEvent'

93723d9

sukvvon force-pushed the test/migrate-to-vitest-fake-timer branch from bae4b43 to 93723d9 Compare September 13, 2025 14:09

vercel bot deployed to Preview September 13, 2025 14:09 View deployment

vercel bot deployed to Preview September 13, 2025 14:17 View deployment

sukvvon force-pushed the test/migrate-to-vitest-fake-timer branch from 5d220f5 to 80e3043 Compare September 13, 2025 14:20

vercel bot deployed to Preview September 13, 2025 14:21 View deployment

test(react/useAtomValue): replace 'userEvent' with 'fireEvent', 'find…

9c44611

…ByText' with 'getByText', and add fake timers

sukvvon force-pushed the test/migrate-to-vitest-fake-timer branch from 80e3043 to 9c44611 Compare September 13, 2025 14:24

vercel bot deployed to Preview September 13, 2025 14:24 View deployment

vercel bot deployed to Preview September 13, 2025 14:30 View deployment

test(react/provider): remove 'waitFor'

c93671a

sukvvon force-pushed the test/migrate-to-vitest-fake-timer branch from 0fc2d0e to c93671a Compare September 13, 2025 14:32

vercel bot deployed to Preview September 13, 2025 14:33 View deployment

vercel bot deployed to Preview September 13, 2025 14:44 View deployment

test(react/optimization): replace 'userEvent' with 'fireEvent', 'find…

c871edf

…ByText' with 'getByText', and remove 'waitFor'

sukvvon force-pushed the test/migrate-to-vitest-fake-timer branch from 4c297c0 to c871edf Compare September 13, 2025 14:46

vercel bot deployed to Preview September 13, 2025 14:47 View deployment

vercel bot deployed to Preview September 13, 2025 15:40 View deployment

sukvvon force-pushed the test/migrate-to-vitest-fake-timer branch from 9643b35 to 7f52e9e Compare September 13, 2025 15:42

vercel bot deployed to Preview September 13, 2025 15:42 View deployment

sukvvon force-pushed the test/migrate-to-vitest-fake-timer branch from 7f52e9e to 4d9a53c Compare September 13, 2025 15:50

vercel bot deployed to Preview September 13, 2025 15:50 View deployment

test(react/onmount): replace 'userEvent' with 'fireEvent', 'findByTex…

1c953e2

…t' with 'getByText', add fake timer, and remove 'waitFor'

sukvvon force-pushed the test/migrate-to-vitest-fake-timer branch from 4d9a53c to 1c953e2 Compare September 13, 2025 15:55

vercel bot deployed to Preview September 13, 2025 15:55 View deployment

test(react/dependency): remove setTimeout from asyncAtom to restore m…

278abe2

…icrotask delay

sukvvon force-pushed the test/migrate-to-vitest-fake-timer branch from a6cb1d9 to 278abe2 Compare November 2, 2025 04:08

vercel bot deployed to Preview November 2, 2025 04:08 View deployment

test(react/dependency): add initial loading assertion for async depen…

aaef034

…dencies test

vercel bot deployed to Preview November 2, 2025 04:15 View deployment

test(react/basic): replace FIXME with NOTE explaining no loading state

b8c465c

vercel bot deployed to Preview November 2, 2025 04:23 View deployment

sukvvon requested a review from dai-shi November 2, 2025 04:28

Revert "test(react/dependency): remove setTimeout from asyncAtom to r…

db138c3

…estore microtask delay" This reverts commit 278abe2.

vercel bot deployed to Preview November 2, 2025 14:00 View deployment

test(react/dependency): add loading assertion and remove unnecessary …

f8cf85e

…timer advancement in bail test

vercel bot deployed to Preview November 2, 2025 14:19 View deployment

test(react/async2): restore intermediate assertions with 'expect.asse…

f49290e

…rtions(6)' in setSelf timing test

vercel bot deployed to Preview November 2, 2025 15:07 View deployment

dai-shi reviewed Nov 5, 2025

View reviewed changes

test(react): simplify Suspense fallback from '<div>loading</div>' to …

3f49240

…'loading'

vercel bot deployed to Preview November 5, 2025 16:13 View deployment

test(react/abortable): remove redundant 'abortedCount' assertion befo…

ffda141

…re unmount

vercel bot deployed to Preview November 5, 2025 16:53 View deployment

vercel bot deployed to Preview November 5, 2025 17:05 View deployment

sukvvon force-pushed the test/migrate-to-vitest-fake-timer branch from e8b8c0b to 5eb44df Compare November 5, 2025 17:06

vercel bot deployed to Preview November 5, 2025 17:07 View deployment

sukvvon requested a review from dai-shi November 5, 2025 17:16

sukvvon force-pushed the test/migrate-to-vitest-fake-timer branch from 5eb44df to 4ab610b Compare November 5, 2025 17:21

vercel bot deployed to Preview November 5, 2025 17:21 View deployment

test(react/async): remove 'setTimeout' from immediately-resolving asy…

1442388

…nc atoms in useEffect tests

sukvvon force-pushed the test/migrate-to-vitest-fake-timer branch from 4ab610b to 1442388 Compare November 5, 2025 17:24

vercel bot deployed to Preview November 5, 2025 17:25 View deployment

		expect(screen.getByText('loading')).toBeInTheDocument()
		await act(() => vi.advanceTimersByTimeAsync(100))

Uh oh!

test: migrate to Vitest fake timers, remove @testing-library/user-event, and resolve act warnings #3147

Are you sure you want to change the base?

test: migrate to Vitest fake timers, remove @testing-library/user-event, and resolve act warnings #3147

Conversation

sukvvon commented Sep 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related Bug Reports or Discussions

Summary

Key Changes

Why Replace userEvent with fireEvent?

fireEvent Pattern (Simple Rule)

Examples

Statistics

Check List

Uh oh!

vercel bot commented Sep 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codesandbox-ci bot commented Sep 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Sep 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Sep 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Preview in LiveCodes

Uh oh!

dai-shi commented Nov 2, 2025

Uh oh!

sukvvon commented Nov 2, 2025

Uh oh!

dai-shi left a comment

Choose a reason for hiding this comment

Uh oh!

dai-shi Nov 5, 2025

Choose a reason for hiding this comment

Uh oh!

sukvvon Nov 5, 2025

Choose a reason for hiding this comment

Uh oh!

dai-shi Nov 5, 2025

Choose a reason for hiding this comment

Uh oh!

sukvvon Nov 5, 2025

Choose a reason for hiding this comment

Uh oh!

dai-shi Nov 5, 2025

Choose a reason for hiding this comment

Uh oh!

sukvvon Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dai-shi Nov 5, 2025

Choose a reason for hiding this comment

Uh oh!

dai-shi Nov 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sukvvon commented Sep 13, 2025 •

edited

Loading

Why Replace `userEvent` with `fireEvent`?

`fireEvent` Pattern (Simple Rule)

vercel bot commented Sep 13, 2025 •

edited

Loading

codesandbox-ci bot commented Sep 13, 2025 •

edited

Loading

pkg-pr-new bot commented Sep 13, 2025 •

edited

Loading

github-actions bot commented Sep 13, 2025 •

edited

Loading

sukvvon Nov 5, 2025 •

edited

Loading