test: reduce hmr test flakiness (#11075)

vitejs · Nov 25, 2022 · 72f63c5 · 72f63c5
1 parent c45c984
commit 72f63c5
Show file tree

Hide file tree

Showing 6 changed files with 220 additions and 192 deletions.
diff --git a/playground/backend-integration/__tests__/backend-integration.spec.ts b/playground/backend-integration/__tests__/backend-integration.spec.ts
@@ -8,6 +8,7 @@ import {
   isServe,
   page,
   readManifest,
+  untilBrowserLogAfter,
   untilUpdated
 } from '~utils'
 
@@ -71,12 +72,13 @@ describe.runIf(isServe)('serve', () => {
 
   test('CSS dependencies are tracked for HMR', async () => {
     const el = await page.$('h1')
-    browserLogs.length = 0
-
-    editFile('frontend/entrypoints/main.ts', (code) =>
-      code.replace('text-black', 'text-[rgb(204,0,0)]')
+    await untilBrowserLogAfter(
+      () =>
+        editFile('frontend/entrypoints/main.ts', (code) =>
+          code.replace('text-black', 'text-[rgb(204,0,0)]')
+        ),
+      '[vite] css hot updated: /global.css'
     )
     await untilUpdated(() => getColor(el), 'rgb(204, 0, 0)')
-    expect(browserLogs).toContain('[vite] css hot updated: /global.css')
   })
 })
diff --git a/playground/hmr/__tests__/hmr.spec.ts b/playground/hmr/__tests__/hmr.spec.ts
@@ -25,135 +25,148 @@ if (!isBuild) {
 
   test('self accept', async () => {
     const el = await page.$('.app')
-    browserLogs.length = 0
-    editFile('hmr.ts', (code) => code.replace('const foo = 1', 'const foo = 2'))
+    await untilBrowserLogAfter(
+      () =>
+        editFile('hmr.ts', (code) =>
+          code.replace('const foo = 1', 'const foo = 2')
+        ),
+      [
+        '>>> vite:beforeUpdate -- update',
+        'foo was: 1',
+        '(self-accepting 1) foo is now: 2',
+        '(self-accepting 2) foo is now: 2',
+        '[vite] hot updated: /hmr.ts',
+        '>>> vite:afterUpdate -- update'
+      ],
+      true
+    )
     await untilUpdated(() => el.textContent(), '2')
 
-    expect(browserLogs).toMatchObject([
-      '>>> vite:beforeUpdate -- update',
-      'foo was: 1',
-      '(self-accepting 1) foo is now: 2',
-      '(self-accepting 2) foo is now: 2',
-      '[vite] hot updated: /hmr.ts',
-      '>>> vite:afterUpdate -- update'
-    ])
-    browserLogs.length = 0
-
-    editFile('hmr.ts', (code) => code.replace('const foo = 2', 'const foo = 3'))
+    await untilBrowserLogAfter(
+      () =>
+        editFile('hmr.ts', (code) =>
+          code.replace('const foo = 2', 'const foo = 3')
+        ),
+      [
+        '>>> vite:beforeUpdate -- update',
+        'foo was: 2',
+        '(self-accepting 1) foo is now: 3',
+        '(self-accepting 2) foo is now: 3',
+        '[vite] hot updated: /hmr.ts',
+        '>>> vite:afterUpdate -- update'
+      ],
+      true
+    )
     await untilUpdated(() => el.textContent(), '3')
-
-    expect(browserLogs).toMatchObject([
-      '>>> vite:beforeUpdate -- update',
-      'foo was: 2',
-      '(self-accepting 1) foo is now: 3',
-      '(self-accepting 2) foo is now: 3',
-      '[vite] hot updated: /hmr.ts',
-      '>>> vite:afterUpdate -- update'
-    ])
-    browserLogs.length = 0
   })
 
   test('accept dep', async () => {
     const el = await page.$('.dep')
-
-    editFile('hmrDep.js', (code) =>
-      code.replace('const foo = 1', 'const foo = 2')
+    await untilBrowserLogAfter(
+      () =>
+        editFile('hmrDep.js', (code) =>
+          code.replace('const foo = 1', 'const foo = 2')
+        ),
+      [
+        '>>> vite:beforeUpdate -- update',
+        '(dep) foo was: 1',
+        '(dep) foo from dispose: 1',
+        '(single dep) foo is now: 2',
+        '(single dep) nested foo is now: 1',
+        '(multi deps) foo is now: 2',
+        '(multi deps) nested foo is now: 1',
+        '[vite] hot updated: /hmrDep.js via /hmr.ts',
+        '>>> vite:afterUpdate -- update'
+      ],
+      true
     )
     await untilUpdated(() => el.textContent(), '2')
 
-    expect(browserLogs).toMatchObject([
-      '>>> vite:beforeUpdate -- update',
-      '(dep) foo was: 1',
-      '(dep) foo from dispose: 1',
-      '(single dep) foo is now: 2',
-      '(single dep) nested foo is now: 1',
-      '(multi deps) foo is now: 2',
-      '(multi deps) nested foo is now: 1',
-      '[vite] hot updated: /hmrDep.js via /hmr.ts',
-      '>>> vite:afterUpdate -- update'
-    ])
-    browserLogs.length = 0
-
-    editFile('hmrDep.js', (code) =>
-      code.replace('const foo = 2', 'const foo = 3')
+    await untilBrowserLogAfter(
+      () =>
+        editFile('hmrDep.js', (code) =>
+          code.replace('const foo = 2', 'const foo = 3')
+        ),
+      [
+        '>>> vite:beforeUpdate -- update',
+        '(dep) foo was: 2',
+        '(dep) foo from dispose: 2',
+        '(single dep) foo is now: 3',
+        '(single dep) nested foo is now: 1',
+        '(multi deps) foo is now: 3',
+        '(multi deps) nested foo is now: 1',
+        '[vite] hot updated: /hmrDep.js via /hmr.ts',
+        '>>> vite:afterUpdate -- update'
+      ],
+      true
     )
     await untilUpdated(() => el.textContent(), '3')
-
-    expect(browserLogs).toMatchObject([
-      '>>> vite:beforeUpdate -- update',
-      '(dep) foo was: 2',
-      '(dep) foo from dispose: 2',
-      '(single dep) foo is now: 3',
-      '(single dep) nested foo is now: 1',
-      '(multi deps) foo is now: 3',
-      '(multi deps) nested foo is now: 1',
-      '[vite] hot updated: /hmrDep.js via /hmr.ts',
-      '>>> vite:afterUpdate -- update'
-    ])
-    browserLogs.length = 0
   })
 
   test('nested dep propagation', async () => {
     const el = await page.$('.nested')
-    browserLogs.length = 0
-
-    editFile('hmrNestedDep.js', (code) =>
-      code.replace('const foo = 1', 'const foo = 2')
+    await untilBrowserLogAfter(
+      () =>
+        editFile('hmrNestedDep.js', (code) =>
+          code.replace('const foo = 1', 'const foo = 2')
+        ),
+      [
+        '>>> vite:beforeUpdate -- update',
+        '(dep) foo was: 3',
+        '(dep) foo from dispose: 3',
+        '(single dep) foo is now: 3',
+        '(single dep) nested foo is now: 2',
+        '(multi deps) foo is now: 3',
+        '(multi deps) nested foo is now: 2',
+        '[vite] hot updated: /hmrDep.js via /hmr.ts',
+        '>>> vite:afterUpdate -- update'
+      ],
+      true
     )
     await untilUpdated(() => el.textContent(), '2')
 
-    expect(browserLogs).toMatchObject([
-      '>>> vite:beforeUpdate -- update',
-      '(dep) foo was: 3',
-      '(dep) foo from dispose: 3',
-      '(single dep) foo is now: 3',
-      '(single dep) nested foo is now: 2',
-      '(multi deps) foo is now: 3',
-      '(multi deps) nested foo is now: 2',
-      '[vite] hot updated: /hmrDep.js via /hmr.ts',
-      '>>> vite:afterUpdate -- update'
-    ])
-    browserLogs.length = 0
-
-    editFile('hmrNestedDep.js', (code) =>
-      code.replace('const foo = 2', 'const foo = 3')
+    await untilBrowserLogAfter(
+      () =>
+        editFile('hmrNestedDep.js', (code) =>
+          code.replace('const foo = 2', 'const foo = 3')
+        ),
+      [
+        '>>> vite:beforeUpdate -- update',
+        '(dep) foo was: 3',
+        '(dep) foo from dispose: 3',
+        '(single dep) foo is now: 3',
+        '(single dep) nested foo is now: 3',
+        '(multi deps) foo is now: 3',
+        '(multi deps) nested foo is now: 3',
+        '[vite] hot updated: /hmrDep.js via /hmr.ts',
+        '>>> vite:afterUpdate -- update'
+      ],
+      true
     )
     await untilUpdated(() => el.textContent(), '3')
-
-    expect(browserLogs).toMatchObject([
-      '>>> vite:beforeUpdate -- update',
-      '(dep) foo was: 3',
-      '(dep) foo from dispose: 3',
-      '(single dep) foo is now: 3',
-      '(single dep) nested foo is now: 3',
-      '(multi deps) foo is now: 3',
-      '(multi deps) nested foo is now: 3',
-      '[vite] hot updated: /hmrDep.js via /hmr.ts',
-      '>>> vite:afterUpdate -- update'
-    ])
-    browserLogs.length = 0
   })
 
   test('invalidate', async () => {
-    browserLogs.length = 0
     const el = await page.$('.invalidation')
-
-    editFile('invalidation/child.js', (code) =>
-      code.replace('child', 'child updated')
+    await untilBrowserLogAfter(
+      () =>
+        editFile('invalidation/child.js', (code) =>
+          code.replace('child', 'child updated')
+        ),
+      [
+        '>>> vite:beforeUpdate -- update',
+        '>>> vite:invalidate -- /invalidation/child.js',
+        '[vite] invalidate /invalidation/child.js',
+        '[vite] hot updated: /invalidation/child.js',
+        '>>> vite:afterUpdate -- update',
+        '>>> vite:beforeUpdate -- update',
+        '(invalidation) parent is executing',
+        '[vite] hot updated: /invalidation/parent.js',
+        '>>> vite:afterUpdate -- update'
+      ],
+      true
     )
     await untilUpdated(() => el.textContent(), 'child updated')
-    expect(browserLogs).toMatchObject([
-      '>>> vite:beforeUpdate -- update',
-      '>>> vite:invalidate -- /invalidation/child.js',
-      '[vite] invalidate /invalidation/child.js',
-      '[vite] hot updated: /invalidation/child.js',
-      '>>> vite:afterUpdate -- update',
-      '>>> vite:beforeUpdate -- update',
-      '(invalidation) parent is executing',
-      '[vite] hot updated: /invalidation/parent.js',
-      '>>> vite:afterUpdate -- update'
-    ])
-    browserLogs.length = 0
   })
 
   test('plugin hmr handler + custom event', async () => {
@@ -688,19 +701,16 @@ if (!isBuild) {
 
     await page.goto(viteTestUrl + '/missing-import/index.html')
 
-    browserLogs.length = 0
-    expect(browserLogs).toMatchObject([])
-
-    editFile(file, (code) => code.replace(importCode, unImportCode))
-
-    await page.waitForNavigation({ timeout })
-    expect(browserLogs.some((msg) => msg.match('missing test'))).toBe(true)
-    browserLogs.length = 0
-
-    editFile(file, (code) => code.replace(unImportCode, importCode))
-
-    await page.waitForNavigation({ timeout })
-    expect(browserLogs.some((msg) => msg.includes('500'))).toBe(true)
-    browserLogs.length = 0
+    await untilBrowserLogAfter(async () => {
+      const navigationPromise = page.waitForNavigation({ timeout })
+      editFile(file, (code) => code.replace(importCode, unImportCode))
+      await navigationPromise
+    }, 'missing test')
+
+    await untilBrowserLogAfter(async () => {
+      const navigationPromise = page.waitForNavigation({ timeout })
+      editFile(file, (code) => code.replace(unImportCode, importCode))
+      await navigationPromise
+    }, /500/)
   })
 }
diff --git a/playground/hmr/hmr.ts b/playground/hmr/hmr.ts
@@ -96,7 +96,7 @@ if (import.meta.hot) {
   })
 
   import.meta.hot.on('vite:error', (event) => {
-    console.log(`>>> vite:error -- ${event.type}`)
+    console.log(`>>> vite:error -- ${event.err.message}`)
   })
 
   import.meta.hot.on('vite:invalidate', ({ path }) => {