Skip to content

Commit c5f372c

Browse files
cursoragentkentcdodds
cursoragent
and
kentcdodds
committed
test: apply browser-mode test cleanups
Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
1 parent c64152f commit c5f372c

File tree

7 files changed

+161
-196
lines changed

7 files changed

+161
-196
lines changed

‎app/components/calls/__tests__/submit-recording-form.test.browser.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -285,6 +285,8 @@ describe('RecordingForm', () => {
285285
mockUseRootData.mockReturnValue({
286286
requestInfo: { flyPrimaryInstance: null },
287287
})
288+
const fetchMock = vi.fn()
289+
vi.stubGlobal('fetch', fetchMock as unknown as typeof fetch)
288290
const createObjectURL = vi
289291
.spyOn(URL, 'createObjectURL')
290292
.mockReturnValue('blob:recording')
@@ -335,12 +337,14 @@ describe('RecordingForm', () => {
335337
await screen.getByLabelText('Title').fill('')
336338
await screen.getByRole('button', { name: 'Submit Recording' }).click()
337339
await expect.element(screen.getByText('Title is required')).toBeVisible()
340+
expect(fetchMock).not.toHaveBeenCalled()
338341
const describedBy = titleInput?.getAttribute('aria-describedby') ?? ''
339342
expect(describedBy).toContain(`${titleId}-error`)
340343
expect(describedBy).toContain(`${titleId}-countdown`)
341344
} finally {
342345
createObjectURL.mockRestore()
343346
revokeObjectURL.mockRestore()
347+
vi.unstubAllGlobals()
344348
}
345349
})
346350
})

‎content/blog/fix-the-not-wrapped-in-act-warning/__tests__/components.test.browser.jsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { render } from 'vitest-browser-react'
21
import { test, expect, vi } from 'vitest'
2+
import { render } from 'vitest-browser-react'
33
import { UsernameForm } from '../components.jsx'
44

55
vi.mock('../api')
@@ -52,15 +52,14 @@ test('calls updateUsername with the new username', async () => {
5252
await screen.getByLabelText(/username/i).fill(fakeUsername)
5353
await screen.getByRole('button', { name: /submit/i }).click()
5454

55-
await expect.element(screen.getByText(/saving/i)).toBeVisible()
55+
const saving = screen.getByText(/saving/i)
56+
await expect.element(saving).toBeVisible()
5657
await expect.poll(() => handleUpdateUsername.mock.calls[0]?.[0]).toBe(
5758
fakeUsername,
5859
)
5960

6061
defer.resolve()
61-
await expect
62-
.poll(() => document.body.textContent?.toLowerCase().includes('saving'))
63-
.toBe(false)
62+
await expect.poll(() => saving.query()).toBeNull()
6463
} finally {
6564
consoleError.mockRestore()
6665
}
@@ -88,8 +87,3 @@ test('calls updateUsername with the new username (with manual act and promise)',
8887
consoleError.mockRestore()
8988
}
9089
})
91-
92-
/*
93-
eslint
94-
no-console: "off"
95-
*/

‎content/blog/fix-the-not-wrapped-in-act-warning/__tests__/custom-hooks.test.browser.jsx‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,12 @@ function useCount() {
99
return { count, increment, decrement }
1010
}
1111

12-
test('increment and decrement updates the count', () => {
13-
return (async () => {
14-
const { result, act } = await renderHook(() => useCount())
12+
test('increment and decrement updates the count', async () => {
13+
const { result, act } = await renderHook(() => useCount())
1514

16-
expect(result.current.count).toBe(0)
17-
await act(() => result.current.increment())
18-
expect(result.current.count).toBe(1)
19-
await act(() => result.current.decrement())
20-
expect(result.current.count).toBe(0)
21-
})()
15+
expect(result.current.count).toBe(0)
16+
await act(() => result.current.increment())
17+
expect(result.current.count).toBe(1)
18+
await act(() => result.current.decrement())
19+
expect(result.current.count).toBe(0)
2220
})
23-
24-
/*
25-
eslint
26-
no-console: "off",
27-
no-func-assign: "off"
28-
*/

‎content/blog/fix-the-not-wrapped-in-act-warning/__tests__/timers.test.browser.jsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,10 @@ test.skip('polling backend on an interval', async () => {
6565
await expect.element(screen.getByText(/\.\.\./i)).toBeVisible()
6666
expect(checkStatus).toHaveBeenCalledTimes(0)
6767

68-
vi.advanceTimersByTime(10000)
68+
await vi.advanceTimersByTimeAsync(10000)
6969

7070
await expect.element(screen.getByText(orderStatus)).toBeVisible()
7171

7272
expect(checkStatus).toHaveBeenCalledWith(orderId)
7373
expect(checkStatus).toHaveBeenCalledTimes(1)
7474
})
75-
76-
/*
77-
eslint
78-
no-console: "off"
79-
*/

‎content/blog/fix-the-not-wrapped-in-act-warning/__tests__/use-imperative-handle.test.browser.jsx‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,13 @@ function ImperativeCounter(props) {
1111
return <div>The count is: {count}</div>
1212
}
1313

14-
test('can call imperative methods on counter component', () => {
14+
test('can call imperative methods on counter component', async () => {
1515
const counterRef = React.createRef()
16-
return (async () => {
17-
const screen = await render(<ImperativeCounter ref={counterRef} />)
16+
const screen = await render(<ImperativeCounter ref={counterRef} />)
1817

19-
await expect.element(screen.getByText('The count is: 0')).toBeVisible()
20-
counterRef.current.increment()
21-
await expect.element(screen.getByText('The count is: 1')).toBeVisible()
22-
counterRef.current.decrement()
23-
await expect.element(screen.getByText('The count is: 0')).toBeVisible()
24-
})()
18+
await expect.element(screen.getByText('The count is: 0')).toBeVisible()
19+
counterRef.current.increment()
20+
await expect.element(screen.getByText('The count is: 1')).toBeVisible()
21+
counterRef.current.decrement()
22+
await expect.element(screen.getByText('The count is: 0')).toBeVisible()
2523
})
26-
27-
/*
28-
eslint
29-
no-console: "off",
30-
no-func-assign: "off"
31-
*/

‎content/blog/how-to-test-custom-react-hooks/__tests__/use-undo.helper.test.browser.jsx‎

Lines changed: 69 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,87 @@
1+
/* eslint-disable max-statements */
12
import { test, expect } from 'vitest'
23
import { renderHook } from 'vitest-browser-react'
34
import useUndo from '../use-undo.js'
45

5-
test('allows you to undo and redo', () => {
6-
return (async () => {
7-
const { result, act } = await renderHook(() => useUndo('one'))
6+
test('allows you to undo and redo', async () => {
7+
const { result, act } = await renderHook(() => useUndo('one'))
88

9-
// assert initial state
10-
expect(result.current.canUndo).toBe(false)
11-
expect(result.current.canRedo).toBe(false)
12-
expect(result.current.past).toEqual([])
13-
expect(result.current.present).toBe('one')
14-
expect(result.current.future).toEqual([])
9+
// assert initial state
10+
expect(result.current.canUndo).toBe(false)
11+
expect(result.current.canRedo).toBe(false)
12+
expect(result.current.past).toEqual([])
13+
expect(result.current.present).toBe('one')
14+
expect(result.current.future).toEqual([])
1515

16-
// add second value
17-
await act(() => {
18-
result.current.set('two')
19-
})
16+
// add second value
17+
await act(() => {
18+
result.current.set('two')
19+
})
2020

21-
// assert new state
22-
expect(result.current.canUndo).toBe(true)
23-
expect(result.current.canRedo).toBe(false)
24-
expect(result.current.past).toEqual(['one'])
25-
expect(result.current.present).toBe('two')
26-
expect(result.current.future).toEqual([])
21+
// assert new state
22+
expect(result.current.canUndo).toBe(true)
23+
expect(result.current.canRedo).toBe(false)
24+
expect(result.current.past).toEqual(['one'])
25+
expect(result.current.present).toBe('two')
26+
expect(result.current.future).toEqual([])
2727

28-
// add third value
29-
await act(() => {
30-
result.current.set('three')
31-
})
28+
// add third value
29+
await act(() => {
30+
result.current.set('three')
31+
})
3232

33-
// assert new state
34-
expect(result.current.canUndo).toBe(true)
35-
expect(result.current.canRedo).toBe(false)
36-
expect(result.current.past).toEqual(['one', 'two'])
37-
expect(result.current.present).toBe('three')
38-
expect(result.current.future).toEqual([])
33+
// assert new state
34+
expect(result.current.canUndo).toBe(true)
35+
expect(result.current.canRedo).toBe(false)
36+
expect(result.current.past).toEqual(['one', 'two'])
37+
expect(result.current.present).toBe('three')
38+
expect(result.current.future).toEqual([])
3939

40-
// undo
41-
await act(() => {
42-
result.current.undo()
43-
})
40+
// undo
41+
await act(() => {
42+
result.current.undo()
43+
})
4444

45-
// assert "undone" state
46-
expect(result.current.canUndo).toBe(true)
47-
expect(result.current.canRedo).toBe(true)
48-
expect(result.current.past).toEqual(['one'])
49-
expect(result.current.present).toBe('two')
50-
expect(result.current.future).toEqual(['three'])
45+
// assert "undone" state
46+
expect(result.current.canUndo).toBe(true)
47+
expect(result.current.canRedo).toBe(true)
48+
expect(result.current.past).toEqual(['one'])
49+
expect(result.current.present).toBe('two')
50+
expect(result.current.future).toEqual(['three'])
5151

52-
// undo again
53-
await act(() => {
54-
result.current.undo()
55-
})
52+
// undo again
53+
await act(() => {
54+
result.current.undo()
55+
})
5656

57-
// assert "double-undone" state
58-
expect(result.current.canUndo).toBe(false)
59-
expect(result.current.canRedo).toBe(true)
60-
expect(result.current.past).toEqual([])
61-
expect(result.current.present).toBe('one')
62-
expect(result.current.future).toEqual(['two', 'three'])
57+
// assert "double-undone" state
58+
expect(result.current.canUndo).toBe(false)
59+
expect(result.current.canRedo).toBe(true)
60+
expect(result.current.past).toEqual([])
61+
expect(result.current.present).toBe('one')
62+
expect(result.current.future).toEqual(['two', 'three'])
6363

64-
// redo
65-
await act(() => {
66-
result.current.redo()
67-
})
64+
// redo
65+
await act(() => {
66+
result.current.redo()
67+
})
6868

69-
// assert undo + undo + redo state
70-
expect(result.current.canUndo).toBe(true)
71-
expect(result.current.canRedo).toBe(true)
72-
expect(result.current.past).toEqual(['one'])
73-
expect(result.current.present).toBe('two')
74-
expect(result.current.future).toEqual(['three'])
69+
// assert undo + undo + redo state
70+
expect(result.current.canUndo).toBe(true)
71+
expect(result.current.canRedo).toBe(true)
72+
expect(result.current.past).toEqual(['one'])
73+
expect(result.current.present).toBe('two')
74+
expect(result.current.future).toEqual(['three'])
7575

76-
// add fourth value
77-
await act(() => {
78-
result.current.set('four')
79-
})
76+
// add fourth value
77+
await act(() => {
78+
result.current.set('four')
79+
})
8080

81-
// assert final state (note the lack of "third")
82-
expect(result.current.canUndo).toBe(true)
83-
expect(result.current.canRedo).toBe(false)
84-
expect(result.current.past).toEqual(['one', 'two'])
85-
expect(result.current.present).toBe('four')
86-
expect(result.current.future).toEqual([])
87-
})()
81+
// assert final state (note the lack of "third")
82+
expect(result.current.canUndo).toBe(true)
83+
expect(result.current.canRedo).toBe(false)
84+
expect(result.current.past).toEqual(['one', 'two'])
85+
expect(result.current.present).toBe('four')
86+
expect(result.current.future).toEqual([])
8887
})
89-
90-
/*
91-
eslint
92-
max-statements: "off",
93-
*/

0 commit comments

Comments
 (0)