Skip to content

Commit 5a0345a

Browse files
sukvvonsukvvon
committed
test(react/vanilla-utils/atomWithDefault): replace 'userEvent' with 'fireEvent', 'findByText' with 'getByText', add fake timer, and remove 'waitFor'
1 parent 1e1686e commit 5a0345a

File tree

1 file changed

+67
-77
lines changed

1 file changed

+67
-77
lines changed

‎tests/react/vanilla-utils/atomWithDefault.test.tsx‎

Lines changed: 67 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
import { StrictMode, Suspense } from 'react'
2-
import { act, render, screen, waitFor } from '@testing-library/react'
3-
import userEventOrig from '@testing-library/user-event'
4-
import { expect, it } 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
import { RESET, atomWithDefault } from 'jotai/vanilla/utils'
87

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

13-
it('simple sync get default', async () => {
16+
it('simple sync get default', () => {
1417
const count1Atom = atom(1)
1518
const count2Atom = atomWithDefault((get) => get(count1Atom) * 2)
1619

@@ -34,23 +37,22 @@ it('simple sync get default', async () => {
3437
</StrictMode>,
3538
)
3639

37-
expect(await screen.findByText('count1: 1, count2: 2')).toBeInTheDocument()
40+
expect(screen.getByText('count1: 1, count2: 2')).toBeInTheDocument()
3841

39-
await userEvent.click(screen.getByText('button1'))
40-
expect(await screen.findByText('count1: 2, count2: 4')).toBeInTheDocument()
42+
fireEvent.click(screen.getByText('button1'))
43+
expect(screen.getByText('count1: 2, count2: 4')).toBeInTheDocument()
4144

42-
await userEvent.click(screen.getByText('button2'))
43-
expect(await screen.findByText('count1: 2, count2: 5')).toBeInTheDocument()
45+
fireEvent.click(screen.getByText('button2'))
46+
expect(screen.getByText('count1: 2, count2: 5')).toBeInTheDocument()
4447

45-
await userEvent.click(screen.getByText('button1'))
46-
expect(await screen.findByText('count1: 3, count2: 5')).toBeInTheDocument()
48+
fireEvent.click(screen.getByText('button1'))
49+
expect(screen.getByText('count1: 3, count2: 5')).toBeInTheDocument()
4750
})
4851

4952
it('simple async get default', async () => {
5053
const count1Atom = atom(1)
51-
let resolve = () => {}
5254
const count2Atom = atomWithDefault(async (get) => {
53-
await new Promise<void>((r) => (resolve = r))
55+
await new Promise<void>((resolve) => setTimeout(resolve, 100))
5456
return get(count1Atom) * 2
5557
})
5658

@@ -80,25 +82,25 @@ it('simple async get default', async () => {
8082
)
8183
})
8284

83-
expect(await screen.findByText('loading')).toBeInTheDocument()
84-
resolve()
85-
expect(await screen.findByText('count1: 1, count2: 2')).toBeInTheDocument()
85+
expect(screen.getByText('loading')).toBeInTheDocument()
86+
await act(() => vi.advanceTimersByTimeAsync(100))
87+
expect(screen.getByText('count1: 1, count2: 2')).toBeInTheDocument()
8688

87-
await userEvent.click(screen.getByText('button1'))
88-
expect(await screen.findByText('loading')).toBeInTheDocument()
89-
resolve()
90-
expect(await screen.findByText('count1: 2, count2: 4')).toBeInTheDocument()
89+
await act(() => fireEvent.click(screen.getByText('button1')))
90+
expect(screen.getByText('loading')).toBeInTheDocument()
91+
await act(() => vi.advanceTimersByTimeAsync(100))
92+
expect(screen.getByText('count1: 2, count2: 4')).toBeInTheDocument()
9193

92-
await userEvent.click(screen.getByText('button2'))
93-
resolve()
94-
expect(await screen.findByText('count1: 2, count2: 5')).toBeInTheDocument()
94+
await act(() => fireEvent.click(screen.getByText('button2')))
95+
await act(() => vi.advanceTimersByTimeAsync(100))
96+
expect(screen.getByText('count1: 2, count2: 5')).toBeInTheDocument()
9597

96-
await userEvent.click(screen.getByText('button1'))
97-
resolve()
98-
expect(await screen.findByText('count1: 3, count2: 5')).toBeInTheDocument()
98+
await act(() => fireEvent.click(screen.getByText('button1')))
99+
await act(() => vi.advanceTimersByTimeAsync(100))
100+
expect(screen.getByText('count1: 3, count2: 5')).toBeInTheDocument()
99101
})
100102

101-
it('refresh sync atoms to default values', async () => {
103+
it('refresh sync atoms to default values', () => {
102104
const count1Atom = atom(1)
103105
const count2Atom = atomWithDefault((get) => get(count1Atom) * 2)
104106

@@ -123,29 +125,28 @@ it('refresh sync atoms to default values', async () => {
123125
</StrictMode>,
124126
)
125127

126-
expect(await screen.findByText('count1: 1, count2: 2')).toBeInTheDocument()
128+
expect(screen.getByText('count1: 1, count2: 2')).toBeInTheDocument()
127129

128-
await userEvent.click(screen.getByText('button1'))
129-
expect(await screen.findByText('count1: 2, count2: 4')).toBeInTheDocument()
130+
fireEvent.click(screen.getByText('button1'))
131+
expect(screen.getByText('count1: 2, count2: 4')).toBeInTheDocument()
130132

131-
await userEvent.click(screen.getByText('button2'))
132-
expect(await screen.findByText('count1: 2, count2: 5')).toBeInTheDocument()
133+
fireEvent.click(screen.getByText('button2'))
134+
expect(screen.getByText('count1: 2, count2: 5')).toBeInTheDocument()
133135

134-
await userEvent.click(screen.getByText('button1'))
135-
expect(await screen.findByText('count1: 3, count2: 5')).toBeInTheDocument()
136+
fireEvent.click(screen.getByText('button1'))
137+
expect(screen.getByText('count1: 3, count2: 5')).toBeInTheDocument()
136138

137-
await userEvent.click(screen.getByText('Refresh count2'))
138-
expect(await screen.findByText('count1: 3, count2: 6')).toBeInTheDocument()
139+
fireEvent.click(screen.getByText('Refresh count2'))
140+
expect(screen.getByText('count1: 3, count2: 6')).toBeInTheDocument()
139141

140-
await userEvent.click(screen.getByText('button1'))
141-
expect(await screen.findByText('count1: 4, count2: 8')).toBeInTheDocument()
142+
fireEvent.click(screen.getByText('button1'))
143+
expect(screen.getByText('count1: 4, count2: 8')).toBeInTheDocument()
142144
})
143145

144146
it('refresh async atoms to default values', async () => {
145147
const count1Atom = atom(1)
146-
let resolve = () => {}
147148
const count2Atom = atomWithDefault(async (get) => {
148-
await new Promise<void>((r) => (resolve = r))
149+
await new Promise<void>((reslove) => setTimeout(reslove, 100))
149150
return get(count1Atom) * 2
150151
})
151152

@@ -176,45 +177,35 @@ it('refresh async atoms to default values', async () => {
176177
)
177178
})
178179

179-
expect(await screen.findByText('loading')).toBeInTheDocument()
180-
await waitFor(() => {
181-
resolve()
182-
expect(screen.getByText('count1: 1, count2: 2')).toBeInTheDocument()
183-
})
180+
expect(screen.getByText('loading')).toBeInTheDocument()
181+
await act(() => vi.advanceTimersByTimeAsync(100))
182+
expect(screen.getByText('count1: 1, count2: 2')).toBeInTheDocument()
184183

185-
await userEvent.click(screen.getByText('button1'))
186-
await screen.findByText('loading')
187-
await waitFor(() => {
188-
resolve()
189-
expect(screen.getByText('count1: 2, count2: 4')).toBeInTheDocument()
190-
})
184+
await act(() => fireEvent.click(screen.getByText('button1')))
185+
expect(screen.getByText('loading')).toBeInTheDocument()
186+
await act(() => vi.advanceTimersByTimeAsync(100))
187+
expect(screen.getByText('count1: 2, count2: 4')).toBeInTheDocument()
191188

192-
await userEvent.click(screen.getByText('button2'))
193-
await waitFor(() => {
194-
resolve()
195-
expect(screen.getByText('count1: 2, count2: 5')).toBeInTheDocument()
196-
})
189+
await act(() => fireEvent.click(screen.getByText('button2')))
190+
await act(() => vi.advanceTimersByTimeAsync(100))
191+
expect(screen.getByText('count1: 2, count2: 5')).toBeInTheDocument()
197192

198-
await userEvent.click(screen.getByText('button1'))
199-
await waitFor(() => {
200-
resolve()
201-
expect(screen.getByText('count1: 3, count2: 5')).toBeInTheDocument()
202-
})
193+
await act(() => fireEvent.click(screen.getByText('button1')))
194+
await act(() => vi.advanceTimersByTimeAsync(100))
195+
expect(screen.getByText('count1: 3, count2: 5')).toBeInTheDocument()
203196

204-
await userEvent.click(screen.getByText('Refresh count2'))
205-
await waitFor(() => {
206-
resolve()
207-
expect(screen.getByText('count1: 3, count2: 6')).toBeInTheDocument()
208-
})
197+
await act(() => fireEvent.click(screen.getByText('Refresh count2')))
198+
expect(screen.getByText('loading')).toBeInTheDocument()
199+
await act(() => vi.advanceTimersByTimeAsync(100))
200+
expect(screen.getByText('count1: 3, count2: 6')).toBeInTheDocument()
209201

210-
await userEvent.click(screen.getByText('button1'))
211-
await waitFor(() => {
212-
resolve()
213-
expect(screen.getByText('count1: 4, count2: 8')).toBeInTheDocument()
214-
})
202+
await act(() => fireEvent.click(screen.getByText('button1')))
203+
expect(screen.getByText('loading')).toBeInTheDocument()
204+
await act(() => vi.advanceTimersByTimeAsync(100))
205+
expect(screen.getByText('count1: 4, count2: 8')).toBeInTheDocument()
215206
})
216207

217-
it('can be set synchronously by passing value', async () => {
208+
it('can be set synchronously by passing value', () => {
218209
const countAtom = atomWithDefault(() => 1)
219210

220211
const Counter = () => {
@@ -232,7 +223,6 @@ it('can be set synchronously by passing value', async () => {
232223

233224
expect(screen.getByText('count: 1')).toBeInTheDocument()
234225

235-
await userEvent.click(screen.getByRole('button', { name: 'Set to 10' }))
236-
226+
fireEvent.click(screen.getByRole('button', { name: 'Set to 10' }))
237227
expect(screen.getByText('count: 10')).toBeInTheDocument()
238228
})

0 commit comments

Comments
 (0)