Skip to content

Commit 1c953e2

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

File tree

1 file changed

+88
-115
lines changed

1 file changed

+88
-115
lines changed

‎tests/react/onmount.test.tsx‎

Lines changed: 88 additions & 115 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,32 +254,23 @@ 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 () => {
298-
let resolve = () => {}
299271
const countAtom = atom(
300272
async () => {
301-
await new Promise<void>((r) => (resolve = r))
273+
await new Promise<void>((resolve) => setTimeout(resolve, 100))
302274
return 0
303275
},
304276
() => {},
@@ -327,28 +299,28 @@ it('mount/unmount test with async atom', async () => {
327299
)
328300
}
329301

330-
await act(async () => {
302+
await act(() =>
331303
render(
332-
<>
333-
<Suspense fallback="loading">
334-
<Display />
335-
</Suspense>
336-
</>,
337-
)
338-
})
304+
<Suspense fallback="loading">
305+
<Display />
306+
</Suspense>,
307+
),
308+
)
309+
310+
expect(screen.getByText('loading')).toBeInTheDocument()
311+
312+
await act(() => vi.advanceTimersByTimeAsync(100))
339313

340-
expect(await screen.findByText('loading')).toBeInTheDocument()
341-
resolve()
342-
await screen.findByText('count: 0')
314+
expect(screen.getByText('count: 0')).toBeInTheDocument()
343315
expect(onMountFn).toHaveBeenCalledTimes(1)
344316
expect(onUnMountFn).toHaveBeenCalledTimes(0)
345317

346-
await userEvent.click(screen.getByText('button'))
318+
fireEvent.click(screen.getByText('button'))
347319
expect(onMountFn).toHaveBeenCalledTimes(1)
348320
expect(onUnMountFn).toHaveBeenCalledTimes(1)
349321
})
350322

351-
it('subscription usage test', async () => {
323+
it('subscription usage test', () => {
352324
const store = {
353325
count: 10,
354326
listeners: new Set<() => void>(),
@@ -393,32 +365,30 @@ it('subscription usage test', async () => {
393365
</StrictMode>,
394366
)
395367

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

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

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

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

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

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

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

421-
it('subscription in base atom test', async () => {
391+
it('subscription in base atom test', () => {
422392
const store = {
423393
count: 10,
424394
listeners: new Set<() => void>(),
@@ -460,13 +430,13 @@ it('subscription in base atom test', async () => {
460430
</StrictMode>,
461431
)
462432

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

465-
await userEvent.click(screen.getByText('button'))
466-
expect(await screen.findByText('count: 11')).toBeInTheDocument()
435+
fireEvent.click(screen.getByText('button'))
436+
expect(screen.getByText('count: 11')).toBeInTheDocument()
467437

468-
await userEvent.click(screen.getByText('button'))
469-
expect(await screen.findByText('count: 12')).toBeInTheDocument()
438+
fireEvent.click(screen.getByText('button'))
439+
expect(screen.getByText('count: 12')).toBeInTheDocument()
470440
})
471441

472442
it('create atom with onMount in async get', async () => {
@@ -508,24 +478,27 @@ it('create atom with onMount in async get', async () => {
508478
)
509479
}
510480

511-
await act(async () => {
481+
await act(() =>
512482
render(
513483
<StrictMode>
514484
<Suspense fallback="loading">
515485
<Counter />
516486
</Suspense>
517487
</StrictMode>,
518-
)
519-
})
488+
),
489+
)
520490

521491
// FIXME this is not working
522-
//await screen.findByText('count: 1')
492+
// await screen.findByText('count: 1')
523493

524-
expect(await screen.findByText('count: 10')).toBeInTheDocument()
494+
await act(() => vi.advanceTimersByTimeAsync(0))
495+
expect(screen.getByText('count: 10')).toBeInTheDocument()
525496

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

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

0 commit comments

Comments
 (0)