Skip to content

Commit 9643b35

Browse files
sukvvonsukvvon
committed
test(react/onmount): replace 'userEvent' with 'fireEvent', 'findByText' with 'getByText', add fake timer, and remove 'waitFor'
1 parent c871edf commit 9643b35

File tree

1 file changed

+87
-113
lines changed

1 file changed

+87
-113
lines changed

‎tests/react/onmount.test.tsx‎

Lines changed: 87 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
import { StrictMode, Suspense, useState } from 'react'
2-
import { act, render, screen, waitFor } from '@testing-library/react'
3-
import userEventOrig from '@testing-library/user-event'
4-
import { expect, it, vi } from 'vitest'
2+
import { act, fireEvent, render, screen } from '@testing-library/react'
3+
import { afterEach, beforeEach, expect, it, vi } from 'vitest'
54
import { useAtom } from 'jotai/react'
65
import { atom } from 'jotai/vanilla'
76

8-
const userEvent = {
9-
click: (element: Element) => act(() => userEventOrig.click(element)),
10-
}
7+
beforeEach(() => {
8+
vi.useFakeTimers()
9+
})
10+
11+
afterEach(() => {
12+
vi.useRealTimers()
13+
})
1114

12-
it('one atom, one effect', async () => {
15+
it('one atom, one effect', () => {
1316
const countAtom = atom(1)
1417
const onMountFn = vi.fn(() => {})
1518
countAtom.onMount = onMountFn
@@ -24,21 +27,17 @@ it('one atom, one effect', async () => {
2427
)
2528
}
2629

27-
render(
28-
<>
29-
<Counter />
30-
</>,
31-
)
30+
render(<Counter />)
3231

33-
expect(await screen.findByText('count: 1')).toBeInTheDocument()
32+
expect(screen.getByText('count: 1')).toBeInTheDocument()
3433
expect(onMountFn).toHaveBeenCalledTimes(1)
3534

36-
await userEvent.click(screen.getByText('button'))
37-
expect(await screen.findByText('count: 2')).toBeInTheDocument()
35+
fireEvent.click(screen.getByText('button'))
36+
expect(screen.getByText('count: 2')).toBeInTheDocument()
3837
expect(onMountFn).toHaveBeenCalledTimes(1)
3938
})
4039

41-
it('two atoms, one each', async () => {
40+
it('two atoms, one each', () => {
4241
const countAtom = atom(1)
4342
const countAtom2 = atom(1)
4443
const onMountFn = vi.fn(() => {})
@@ -65,30 +64,23 @@ it('two atoms, one each', async () => {
6564
)
6665
}
6766

68-
render(
69-
<>
70-
<Counter />
71-
</>,
72-
)
67+
render(<Counter />)
68+
69+
expect(screen.getByText('count: 1')).toBeInTheDocument()
70+
expect(screen.getByText('count2: 1')).toBeInTheDocument()
7371

74-
await waitFor(() => {
75-
expect(screen.getByText('count: 1')).toBeInTheDocument()
76-
expect(screen.getByText('count2: 1')).toBeInTheDocument()
77-
})
7872
expect(onMountFn).toHaveBeenCalledTimes(1)
7973
expect(onMountFn2).toHaveBeenCalledTimes(1)
8074

81-
await userEvent.click(screen.getByText('button'))
82-
await waitFor(() => {
83-
expect(screen.getByText('count: 2')).toBeInTheDocument()
84-
expect(screen.getByText('count2: 2')).toBeInTheDocument()
85-
})
75+
fireEvent.click(screen.getByText('button'))
76+
expect(screen.getByText('count: 2')).toBeInTheDocument()
77+
expect(screen.getByText('count2: 2')).toBeInTheDocument()
8678

8779
expect(onMountFn).toHaveBeenCalledTimes(1)
8880
expect(onMountFn2).toHaveBeenCalledTimes(1)
8981
})
9082

91-
it('one derived atom, one onMount', async () => {
83+
it('one derived atom, one onMount', () => {
9284
const countAtom = atom(1)
9385
const countAtom2 = atom((get) => get(countAtom))
9486
const onMountFn = vi.fn(() => {})
@@ -103,17 +95,14 @@ it('one derived atom, one onMount', async () => {
10395
)
10496
}
10597

106-
render(
107-
<>
108-
<Counter />
109-
</>,
110-
)
98+
render(<Counter />)
99+
100+
expect(screen.getByText('count: 1')).toBeInTheDocument()
111101

112-
expect(await screen.findByText('count: 1')).toBeInTheDocument()
113102
expect(onMountFn).toHaveBeenCalledTimes(1)
114103
})
115104

116-
it('mount/unmount test', async () => {
105+
it('mount/unmount test', () => {
117106
const countAtom = atom(1)
118107

119108
const onUnMountFn = vi.fn()
@@ -139,22 +128,18 @@ it('mount/unmount test', async () => {
139128
)
140129
}
141130

142-
render(
143-
<>
144-
<Display />
145-
</>,
146-
)
131+
render(<Display />)
147132

148133
expect(onMountFn).toHaveBeenCalledTimes(1)
149134
expect(onUnMountFn).toHaveBeenCalledTimes(0)
150135

151-
await userEvent.click(screen.getByText('button'))
136+
fireEvent.click(screen.getByText('button'))
152137

153138
expect(onMountFn).toHaveBeenCalledTimes(1)
154139
expect(onUnMountFn).toHaveBeenCalledTimes(1)
155140
})
156141

157-
it('one derived atom, one onMount for the derived one, and one for the regular atom + onUnMount', async () => {
142+
it('one derived atom, one onMount for the derived one, and one for the regular atom + onUnMount', () => {
158143
const countAtom = atom(1)
159144
const derivedAtom = atom(
160145
(get) => get(countAtom),
@@ -189,26 +174,22 @@ it('one derived atom, one onMount for the derived one, and one for the regular a
189174
)
190175
}
191176

192-
render(
193-
<>
194-
<Display />
195-
</>,
196-
)
177+
render(<Display />)
197178

198179
expect(derivedOnMountFn).toHaveBeenCalledTimes(1)
199180
expect(derivedOnUnMountFn).toHaveBeenCalledTimes(0)
200181
expect(onMountFn).toHaveBeenCalledTimes(1)
201182
expect(onUnMountFn).toHaveBeenCalledTimes(0)
202183

203-
await userEvent.click(screen.getByText('button'))
184+
fireEvent.click(screen.getByText('button'))
204185

205186
expect(derivedOnMountFn).toHaveBeenCalledTimes(1)
206187
expect(derivedOnUnMountFn).toHaveBeenCalledTimes(1)
207188
expect(onMountFn).toHaveBeenCalledTimes(1)
208189
expect(onUnMountFn).toHaveBeenCalledTimes(1)
209190
})
210191

211-
it('mount/unMount order', async () => {
192+
it('mount/unMount order', () => {
212193
const committed: number[] = [0, 0]
213194
const countAtom = atom(1)
214195
const derivedAtom = atom(
@@ -273,29 +254,22 @@ it('mount/unMount order', async () => {
273254

274255
expect(committed).toEqual([0, 0])
275256

276-
await userEvent.click(screen.getByText('button'))
277-
await waitFor(() => {
278-
expect(committed).toEqual([1, 0])
279-
})
257+
fireEvent.click(screen.getByText('button'))
258+
expect(committed).toEqual([1, 0])
280259

281-
await userEvent.click(screen.getByText('derived atom'))
282-
await waitFor(() => {
283-
expect(committed).toEqual([1, 1])
284-
})
260+
fireEvent.click(screen.getByText('derived atom'))
261+
expect(committed).toEqual([1, 1])
285262

286-
await userEvent.click(screen.getByText('derived atom'))
287-
await waitFor(() => {
288-
expect(committed).toEqual([1, 0])
289-
})
263+
fireEvent.click(screen.getByText('derived atom'))
264+
expect(committed).toEqual([1, 0])
290265

291-
await userEvent.click(screen.getByText('button'))
292-
await waitFor(() => {
293-
expect(committed).toEqual([0, 0])
294-
})
266+
fireEvent.click(screen.getByText('button'))
267+
expect(committed).toEqual([0, 0])
295268
})
296269

297270
it('mount/unmount test with async atom', async () => {
298271
let resolve = () => {}
272+
299273
const countAtom = atom(
300274
async () => {
301275
await new Promise<void>((r) => (resolve = r))
@@ -327,28 +301,28 @@ it('mount/unmount test with async atom', async () => {
327301
)
328302
}
329303

330-
await act(async () => {
304+
await act(() =>
331305
render(
332-
<>
333-
<Suspense fallback="loading">
334-
<Display />
335-
</Suspense>
336-
</>,
337-
)
338-
})
306+
<Suspense fallback="loading">
307+
<Display />
308+
</Suspense>,
309+
),
310+
)
311+
312+
expect(screen.getByText('loading')).toBeInTheDocument()
313+
314+
await act(async () => resolve())
339315

340-
expect(await screen.findByText('loading')).toBeInTheDocument()
341-
resolve()
342-
await screen.findByText('count: 0')
316+
expect(screen.getByText('count: 0')).toBeInTheDocument()
343317
expect(onMountFn).toHaveBeenCalledTimes(1)
344318
expect(onUnMountFn).toHaveBeenCalledTimes(0)
345319

346-
await userEvent.click(screen.getByText('button'))
320+
fireEvent.click(screen.getByText('button'))
347321
expect(onMountFn).toHaveBeenCalledTimes(1)
348322
expect(onUnMountFn).toHaveBeenCalledTimes(1)
349323
})
350324

351-
it('subscription usage test', async () => {
325+
it('subscription usage test', () => {
352326
const store = {
353327
count: 10,
354328
listeners: new Set<() => void>(),
@@ -393,32 +367,30 @@ it('subscription usage test', async () => {
393367
</StrictMode>,
394368
)
395369

396-
expect(await screen.findByText('count: 10')).toBeInTheDocument()
370+
expect(screen.getByText('count: 10')).toBeInTheDocument()
397371

398-
act(() => {
399-
store.inc()
400-
})
401-
expect(await screen.findByText('count: 11')).toBeInTheDocument()
372+
act(() => store.inc())
402373

403-
await userEvent.click(screen.getByText('button'))
404-
expect(await screen.findByText('N/A')).toBeInTheDocument()
374+
expect(screen.getByText('count: 11')).toBeInTheDocument()
405375

406-
await userEvent.click(screen.getByText('button'))
407-
expect(await screen.findByText('count: 11')).toBeInTheDocument()
376+
fireEvent.click(screen.getByText('button'))
377+
expect(screen.getByText('N/A')).toBeInTheDocument()
408378

409-
await userEvent.click(screen.getByText('button'))
410-
expect(await screen.findByText('N/A')).toBeInTheDocument()
379+
fireEvent.click(screen.getByText('button'))
380+
expect(screen.getByText('count: 11')).toBeInTheDocument()
411381

412-
act(() => {
413-
store.inc()
414-
})
415-
expect(await screen.findByText('N/A')).toBeInTheDocument()
382+
fireEvent.click(screen.getByText('button'))
383+
expect(screen.getByText('N/A')).toBeInTheDocument()
416384

417-
await userEvent.click(screen.getByText('button'))
418-
expect(await screen.findByText('count: 12')).toBeInTheDocument()
385+
act(() => store.inc())
386+
387+
expect(screen.getByText('N/A')).toBeInTheDocument()
388+
389+
fireEvent.click(screen.getByText('button'))
390+
expect(screen.getByText('count: 12')).toBeInTheDocument()
419391
})
420392

421-
it('subscription in base atom test', async () => {
393+
it('subscription in base atom test', () => {
422394
const store = {
423395
count: 10,
424396
listeners: new Set<() => void>(),
@@ -460,13 +432,13 @@ it('subscription in base atom test', async () => {
460432
</StrictMode>,
461433
)
462434

463-
expect(await screen.findByText('count: 10')).toBeInTheDocument()
435+
expect(screen.getByText('count: 10')).toBeInTheDocument()
464436

465-
await userEvent.click(screen.getByText('button'))
466-
expect(await screen.findByText('count: 11')).toBeInTheDocument()
437+
fireEvent.click(screen.getByText('button'))
438+
expect(screen.getByText('count: 11')).toBeInTheDocument()
467439

468-
await userEvent.click(screen.getByText('button'))
469-
expect(await screen.findByText('count: 12')).toBeInTheDocument()
440+
fireEvent.click(screen.getByText('button'))
441+
expect(screen.getByText('count: 12')).toBeInTheDocument()
470442
})
471443

472444
it('create atom with onMount in async get', async () => {
@@ -508,24 +480,26 @@ it('create atom with onMount in async get', async () => {
508480
)
509481
}
510482

511-
await act(async () => {
483+
await act(() =>
512484
render(
513485
<StrictMode>
514486
<Suspense fallback="loading">
515487
<Counter />
516488
</Suspense>
517489
</StrictMode>,
518-
)
519-
})
490+
),
491+
)
520492

521493
// FIXME this is not working
522-
//await screen.findByText('count: 1')
494+
// await screen.findByText('count: 1')
523495

524-
expect(await screen.findByText('count: 10')).toBeInTheDocument()
496+
expect(screen.getByText('count: 10')).toBeInTheDocument()
525497

526-
await userEvent.click(screen.getByText('button'))
527-
expect(await screen.findByText('count: 11')).toBeInTheDocument()
498+
await act(() => fireEvent.click(screen.getByText('button')))
499+
await act(() => vi.advanceTimersByTimeAsync(100))
500+
expect(screen.getByText('count: 11')).toBeInTheDocument()
528501

529-
await userEvent.click(screen.getByText('button'))
530-
expect(await screen.findByText('count: 12')).toBeInTheDocument()
502+
await act(() => fireEvent.click(screen.getByText('button')))
503+
await act(() => vi.advanceTimersByTimeAsync(100))
504+
expect(screen.getByText('count: 12')).toBeInTheDocument()
531505
})

0 commit comments

Comments
 (0)