Skip to content

Commit 72f63c5

Browse files
sapphi-redsapphi-red
authored
test: reduce hmr test flakiness (#11075)
1 parent c45c984 commit 72f63c5

File tree

6 files changed

+220
-192
lines changed

6 files changed

+220
-192
lines changed

‎playground/backend-integration/__tests__/backend-integration.spec.ts

+7-5
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
isServe,
99
page,
1010
readManifest,
11+
untilBrowserLogAfter,
1112
untilUpdated
1213
} from '~utils'
1314

@@ -71,12 +72,13 @@ describe.runIf(isServe)('serve', () => {
7172

7273
test('CSS dependencies are tracked for HMR', async () => {
7374
const el = await page.$('h1')
74-
browserLogs.length = 0
75-
76-
editFile('frontend/entrypoints/main.ts', (code) =>
77-
code.replace('text-black', 'text-[rgb(204,0,0)]')
75+
await untilBrowserLogAfter(
76+
() =>
77+
editFile('frontend/entrypoints/main.ts', (code) =>
78+
code.replace('text-black', 'text-[rgb(204,0,0)]')
79+
),
80+
'[vite] css hot updated: /global.css'
7881
)
7982
await untilUpdated(() => getColor(el), 'rgb(204, 0, 0)')
80-
expect(browserLogs).toContain('[vite] css hot updated: /global.css')
8183
})
8284
})

‎playground/hmr/__tests__/hmr.spec.ts

+126-116
Original file line numberDiff line numberDiff line change
@@ -25,135 +25,148 @@ if (!isBuild) {
2525

2626
test('self accept', async () => {
2727
const el = await page.$('.app')
28-
browserLogs.length = 0
29-
editFile('hmr.ts', (code) => code.replace('const foo = 1', 'const foo = 2'))
28+
await untilBrowserLogAfter(
29+
() =>
30+
editFile('hmr.ts', (code) =>
31+
code.replace('const foo = 1', 'const foo = 2')
32+
),
33+
[
34+
'>>> vite:beforeUpdate -- update',
35+
'foo was: 1',
36+
'(self-accepting 1) foo is now: 2',
37+
'(self-accepting 2) foo is now: 2',
38+
'[vite] hot updated: /hmr.ts',
39+
'>>> vite:afterUpdate -- update'
40+
],
41+
true
42+
)
3043
await untilUpdated(() => el.textContent(), '2')
3144

32-
expect(browserLogs).toMatchObject([
33-
'>>> vite:beforeUpdate -- update',
34-
'foo was: 1',
35-
'(self-accepting 1) foo is now: 2',
36-
'(self-accepting 2) foo is now: 2',
37-
'[vite] hot updated: /hmr.ts',
38-
'>>> vite:afterUpdate -- update'
39-
])
40-
browserLogs.length = 0
41-
42-
editFile('hmr.ts', (code) => code.replace('const foo = 2', 'const foo = 3'))
45+
await untilBrowserLogAfter(
46+
() =>
47+
editFile('hmr.ts', (code) =>
48+
code.replace('const foo = 2', 'const foo = 3')
49+
),
50+
[
51+
'>>> vite:beforeUpdate -- update',
52+
'foo was: 2',
53+
'(self-accepting 1) foo is now: 3',
54+
'(self-accepting 2) foo is now: 3',
55+
'[vite] hot updated: /hmr.ts',
56+
'>>> vite:afterUpdate -- update'
57+
],
58+
true
59+
)
4360
await untilUpdated(() => el.textContent(), '3')
44-
45-
expect(browserLogs).toMatchObject([
46-
'>>> vite:beforeUpdate -- update',
47-
'foo was: 2',
48-
'(self-accepting 1) foo is now: 3',
49-
'(self-accepting 2) foo is now: 3',
50-
'[vite] hot updated: /hmr.ts',
51-
'>>> vite:afterUpdate -- update'
52-
])
53-
browserLogs.length = 0
5461
})
5562

5663
test('accept dep', async () => {
5764
const el = await page.$('.dep')
58-
59-
editFile('hmrDep.js', (code) =>
60-
code.replace('const foo = 1', 'const foo = 2')
65+
await untilBrowserLogAfter(
66+
() =>
67+
editFile('hmrDep.js', (code) =>
68+
code.replace('const foo = 1', 'const foo = 2')
69+
),
70+
[
71+
'>>> vite:beforeUpdate -- update',
72+
'(dep) foo was: 1',
73+
'(dep) foo from dispose: 1',
74+
'(single dep) foo is now: 2',
75+
'(single dep) nested foo is now: 1',
76+
'(multi deps) foo is now: 2',
77+
'(multi deps) nested foo is now: 1',
78+
'[vite] hot updated: /hmrDep.js via /hmr.ts',
79+
'>>> vite:afterUpdate -- update'
80+
],
81+
true
6182
)
6283
await untilUpdated(() => el.textContent(), '2')
6384

64-
expect(browserLogs).toMatchObject([
65-
'>>> vite:beforeUpdate -- update',
66-
'(dep) foo was: 1',
67-
'(dep) foo from dispose: 1',
68-
'(single dep) foo is now: 2',
69-
'(single dep) nested foo is now: 1',
70-
'(multi deps) foo is now: 2',
71-
'(multi deps) nested foo is now: 1',
72-
'[vite] hot updated: /hmrDep.js via /hmr.ts',
73-
'>>> vite:afterUpdate -- update'
74-
])
75-
browserLogs.length = 0
76-
77-
editFile('hmrDep.js', (code) =>
78-
code.replace('const foo = 2', 'const foo = 3')
85+
await untilBrowserLogAfter(
86+
() =>
87+
editFile('hmrDep.js', (code) =>
88+
code.replace('const foo = 2', 'const foo = 3')
89+
),
90+
[
91+
'>>> vite:beforeUpdate -- update',
92+
'(dep) foo was: 2',
93+
'(dep) foo from dispose: 2',
94+
'(single dep) foo is now: 3',
95+
'(single dep) nested foo is now: 1',
96+
'(multi deps) foo is now: 3',
97+
'(multi deps) nested foo is now: 1',
98+
'[vite] hot updated: /hmrDep.js via /hmr.ts',
99+
'>>> vite:afterUpdate -- update'
100+
],
101+
true
79102
)
80103
await untilUpdated(() => el.textContent(), '3')
81-
82-
expect(browserLogs).toMatchObject([
83-
'>>> vite:beforeUpdate -- update',
84-
'(dep) foo was: 2',
85-
'(dep) foo from dispose: 2',
86-
'(single dep) foo is now: 3',
87-
'(single dep) nested foo is now: 1',
88-
'(multi deps) foo is now: 3',
89-
'(multi deps) nested foo is now: 1',
90-
'[vite] hot updated: /hmrDep.js via /hmr.ts',
91-
'>>> vite:afterUpdate -- update'
92-
])
93-
browserLogs.length = 0
94104
})
95105

96106
test('nested dep propagation', async () => {
97107
const el = await page.$('.nested')
98-
browserLogs.length = 0
99-
100-
editFile('hmrNestedDep.js', (code) =>
101-
code.replace('const foo = 1', 'const foo = 2')
108+
await untilBrowserLogAfter(
109+
() =>
110+
editFile('hmrNestedDep.js', (code) =>
111+
code.replace('const foo = 1', 'const foo = 2')
112+
),
113+
[
114+
'>>> vite:beforeUpdate -- update',
115+
'(dep) foo was: 3',
116+
'(dep) foo from dispose: 3',
117+
'(single dep) foo is now: 3',
118+
'(single dep) nested foo is now: 2',
119+
'(multi deps) foo is now: 3',
120+
'(multi deps) nested foo is now: 2',
121+
'[vite] hot updated: /hmrDep.js via /hmr.ts',
122+
'>>> vite:afterUpdate -- update'
123+
],
124+
true
102125
)
103126
await untilUpdated(() => el.textContent(), '2')
104127

105-
expect(browserLogs).toMatchObject([
106-
'>>> vite:beforeUpdate -- update',
107-
'(dep) foo was: 3',
108-
'(dep) foo from dispose: 3',
109-
'(single dep) foo is now: 3',
110-
'(single dep) nested foo is now: 2',
111-
'(multi deps) foo is now: 3',
112-
'(multi deps) nested foo is now: 2',
113-
'[vite] hot updated: /hmrDep.js via /hmr.ts',
114-
'>>> vite:afterUpdate -- update'
115-
])
116-
browserLogs.length = 0
117-
118-
editFile('hmrNestedDep.js', (code) =>
119-
code.replace('const foo = 2', 'const foo = 3')
128+
await untilBrowserLogAfter(
129+
() =>
130+
editFile('hmrNestedDep.js', (code) =>
131+
code.replace('const foo = 2', 'const foo = 3')
132+
),
133+
[
134+
'>>> vite:beforeUpdate -- update',
135+
'(dep) foo was: 3',
136+
'(dep) foo from dispose: 3',
137+
'(single dep) foo is now: 3',
138+
'(single dep) nested foo is now: 3',
139+
'(multi deps) foo is now: 3',
140+
'(multi deps) nested foo is now: 3',
141+
'[vite] hot updated: /hmrDep.js via /hmr.ts',
142+
'>>> vite:afterUpdate -- update'
143+
],
144+
true
120145
)
121146
await untilUpdated(() => el.textContent(), '3')
122-
123-
expect(browserLogs).toMatchObject([
124-
'>>> vite:beforeUpdate -- update',
125-
'(dep) foo was: 3',
126-
'(dep) foo from dispose: 3',
127-
'(single dep) foo is now: 3',
128-
'(single dep) nested foo is now: 3',
129-
'(multi deps) foo is now: 3',
130-
'(multi deps) nested foo is now: 3',
131-
'[vite] hot updated: /hmrDep.js via /hmr.ts',
132-
'>>> vite:afterUpdate -- update'
133-
])
134-
browserLogs.length = 0
135147
})
136148

137149
test('invalidate', async () => {
138-
browserLogs.length = 0
139150
const el = await page.$('.invalidation')
140-
141-
editFile('invalidation/child.js', (code) =>
142-
code.replace('child', 'child updated')
151+
await untilBrowserLogAfter(
152+
() =>
153+
editFile('invalidation/child.js', (code) =>
154+
code.replace('child', 'child updated')
155+
),
156+
[
157+
'>>> vite:beforeUpdate -- update',
158+
'>>> vite:invalidate -- /invalidation/child.js',
159+
'[vite] invalidate /invalidation/child.js',
160+
'[vite] hot updated: /invalidation/child.js',
161+
'>>> vite:afterUpdate -- update',
162+
'>>> vite:beforeUpdate -- update',
163+
'(invalidation) parent is executing',
164+
'[vite] hot updated: /invalidation/parent.js',
165+
'>>> vite:afterUpdate -- update'
166+
],
167+
true
143168
)
144169
await untilUpdated(() => el.textContent(), 'child updated')
145-
expect(browserLogs).toMatchObject([
146-
'>>> vite:beforeUpdate -- update',
147-
'>>> vite:invalidate -- /invalidation/child.js',
148-
'[vite] invalidate /invalidation/child.js',
149-
'[vite] hot updated: /invalidation/child.js',
150-
'>>> vite:afterUpdate -- update',
151-
'>>> vite:beforeUpdate -- update',
152-
'(invalidation) parent is executing',
153-
'[vite] hot updated: /invalidation/parent.js',
154-
'>>> vite:afterUpdate -- update'
155-
])
156-
browserLogs.length = 0
157170
})
158171

159172
test('plugin hmr handler + custom event', async () => {
@@ -688,19 +701,16 @@ if (!isBuild) {
688701

689702
await page.goto(viteTestUrl + '/missing-import/index.html')
690703

691-
browserLogs.length = 0
692-
expect(browserLogs).toMatchObject([])
693-
694-
editFile(file, (code) => code.replace(importCode, unImportCode))
695-
696-
await page.waitForNavigation({ timeout })
697-
expect(browserLogs.some((msg) => msg.match('missing test'))).toBe(true)
698-
browserLogs.length = 0
699-
700-
editFile(file, (code) => code.replace(unImportCode, importCode))
701-
702-
await page.waitForNavigation({ timeout })
703-
expect(browserLogs.some((msg) => msg.includes('500'))).toBe(true)
704-
browserLogs.length = 0
704+
await untilBrowserLogAfter(async () => {
705+
const navigationPromise = page.waitForNavigation({ timeout })
706+
editFile(file, (code) => code.replace(importCode, unImportCode))
707+
await navigationPromise
708+
}, 'missing test')
709+
710+
await untilBrowserLogAfter(async () => {
711+
const navigationPromise = page.waitForNavigation({ timeout })
712+
editFile(file, (code) => code.replace(unImportCode, importCode))
713+
await navigationPromise
714+
}, /500/)
705715
})
706716
}

‎playground/hmr/hmr.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ if (import.meta.hot) {
9696
})
9797

9898
import.meta.hot.on('vite:error', (event) => {
99-
console.log(`>>> vite:error -- ${event.type}`)
99+
console.log(`>>> vite:error -- ${event.err.message}`)
100100
})
101101

102102
import.meta.hot.on('vite:invalidate', ({ path }) => {

0 commit comments

Comments
 (0)