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	Dec 1, 2025 8:39am

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: e513fe3

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

Preview in LiveCodes

Latest commit: e513fe3
Last updated: Dec 1, 2025 8:39am (UTC)

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

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'

dai-shi · 2025-11-30T02:51:44Z

In Jotai's case, it doesn't really matter. fire-event may be slightly better here for performance reasons since it's only testing the library.

Got it now. Thanks for your tip.

dai-shi

Finally, I reviewed all files. Hope I don't miss anything. If I do, hope you can cover it.

dai-shi · 2025-11-30T03:29:14Z

tests/react/useAtomValue.test.tsx

-  const asyncAtom = atom(async () => 42)
+  const asyncAtom = atom(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 10))
+    return 42
+  })


Could you revert the change in this PR?
I only find it in this file, but please check all other files too.

@dai-shi Reverted to immediately-resolving async atom with vi.advanceTimersByTimeAsync(0) in useAtomValue.test.tsx (9125c21)

dai-shi · 2025-11-30T03:29:54Z

tests/react/useAtomValue.test.tsx

+  expect(screen.getByText('loading')).toBeInTheDocument()

-  expect(await screen.findByText('value: 42')).toBeInTheDocument()
+  await act(() => vi.advanceTimersByTimeAsync(10))


Though, this is a good addition to our tests. Let's do that after merging this PR.

It was fixed with 9125c21.

Let's do that after merging this PR

I agree with your opinion.

dai-shi · 2025-11-30T03:46:17Z

tests/react/vanilla-utils/loadable.test.tsx

-  // we need a small delay to reproduce the issue
-  await new Promise((r) => setTimeout(r, 10))


It doesn't feel valid to remove this. It means to remove the entire spec. Would it be possible for you to try reverting #1481 temporary on your end locally and learn how to reproduce the issue?

@dai-shi Restored the 10ms delay using fake timer: await act(() => vi.advanceTimersByTimeAsync(10)) (25e2ba6)

dai-shi · 2025-11-30T03:50:39Z

tests/vanilla/store.test.tsx

-      await new Promise((r) => setTimeout(r))
+      await Promise.resolve()


This changes the behavior. Can you revert?

@dai-shi Reverted to await new Promise((resolve) => setTimeout(resolve)) (363e28a)

dai-shi · 2025-11-30T03:51:45Z

tests/vanilla/store.test.tsx

    get(countDerivedAtom)
    set(countAtom, 2)
  })
+


Could you remove changes that only add new lines? It makes the diff bigger.

@dai-shi These blank lines improve readability by separating logical sections. I'd prefer to keep them if possible.

Well, you might have noticed that my preference is fewer lines. Anyway, it's just stylistic. I will change them later if I want to.

dai-shi · 2025-11-30T03:55:28Z

tests/vanilla/utils/unwrap.test.ts

-    await store.get(asyncAtom)
-
+    await vi.advanceTimersByTimeAsync(100)


I'm not sure if it's testing the same thing, but should be fine.

It was fixed with f674996

dai-shi · 2025-11-30T03:56:54Z

tests/vanilla/utils/unwrap.test.ts

-    store.set(syncAtom, Promise.resolve(2))
+    store.set(
+      syncAtom,
+      new Promise<number>((resolve) => setTimeout(() => resolve(2), 100)),
+    )


I saw this kind of changes many times, but I wonder if we could simply do vi.advanceTimersByTimeAsync(0), instead of changing the atom definition. What do you think?

Reverted to Promise.resolve() with vi.advanceTimersByTimeAsync(0) in unwrap.test.ts and loadable.test.ts (f674996)

…thout 'setTimeout'

…d use 'advanceTimersByTimeAsync(0)'

…illa store test

…erve macrotask behavior

…r for infinite loop test (pmndrs#1481)

dai-shi

I'm not surprised if I missed anything, but let's merge this for now.
Thanks for your contribution!

dai-shi · 2025-12-01T08:37:26Z

tests/vanilla/store.test.tsx

    get(countDerivedAtom)
    set(countAtom, 2)
  })
+


Well, you might have noticed that my preference is fewer lines. Anyway, it's just stylistic. I will change them later if I want to.

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

vercel bot deployed to Preview November 27, 2025 17:23 View deployment

Merge branch 'main' into test/migrate-to-vitest-fake-timer

046d08b

vercel bot deployed to Preview November 30, 2025 02:38 View deployment

restore the test order

0261de3

vercel bot deployed to Preview November 30, 2025 03:27 View deployment

dai-shi reviewed Nov 30, 2025

View reviewed changes

vercel bot deployed to Preview November 30, 2025 08:39 View deployment

test(react/useAtomValue): revert async atom to immediately resolve wi…

9125c21

…thout 'setTimeout'

sukvvon force-pushed the test/migrate-to-vitest-fake-timer branch from 1a34580 to 9125c21 Compare November 30, 2025 08:40

vercel bot deployed to Preview November 30, 2025 08:41 View deployment

test(vanilla/utils/{loadable,unwrap}): revert to 'Promise.resolve' an…

f674996

…d use 'advanceTimersByTimeAsync(0)'

vercel bot deployed to Preview November 30, 2025 08:59 View deployment

test(vanilla/utils/unwrap): remove unnecessary 'act' wrapper from van…

19b0fd0

…illa store test

vercel bot deployed to Preview November 30, 2025 09:07 View deployment

test(vanilla/store): revert 'Promise.resolve' to 'setTimeout' to pres…

363e28a

…erve macrotask behavior

vercel bot deployed to Preview November 30, 2025 09:22 View deployment

vercel bot deployed to Preview November 30, 2025 09:27 View deployment

test(react/vanilla-utils/loadable): restore 10ms delay with fake time…

25e2ba6

…r for infinite loop test (pmndrs#1481)

sukvvon force-pushed the test/migrate-to-vitest-fake-timer branch from 65ab804 to 25e2ba6 Compare November 30, 2025 09:29

vercel bot deployed to Preview November 30, 2025 09:30 View deployment

Merge branch 'main' into test/migrate-to-vitest-fake-timer

4dbf7fb

vercel bot deployed to Preview November 30, 2025 09:51 View deployment

sukvvon requested a review from dai-shi November 30, 2025 09:54

chore: empty commit

dbf8b5e

vercel bot deployed to Preview November 30, 2025 10:28 View deployment

Merge branch 'main' into test/migrate-to-vitest-fake-timer

e513fe3

vercel bot deployed to Preview December 1, 2025 08:39 View deployment

dai-shi approved these changes Dec 1, 2025

View reviewed changes

dai-shi merged commit 08d0a85 into pmndrs:main Dec 1, 2025
45 checks passed

		// we need a small delay to reproduce the issue
		await new Promise((r) => setTimeout(r, 10))

		await new Promise((r) => setTimeout(r))
		await Promise.resolve()

		await store.get(asyncAtom)

		await vi.advanceTimersByTimeAsync(100)

Uh oh!

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

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 30, 2025

Uh oh!

dai-shi left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sukvvon Nov 30, 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dai-shi left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 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 30, 2025 •

edited

Loading