test: use expect.poll instead of withRetry/expectWithRetry/untilUpdated (vitejs#20206)

Author: sapphi-red

playground/alias/__tests__/alias.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from 'vitest'
-import { editFile, getColor, isBuild, page, untilUpdated } from '~utils'
+import { editFile, getColor, isBuild, page } from '~utils'
 
 test('fs', async () => {
   expect(await page.textContent('.fs')).toMatch('[success] alias to fs path')
@@ -31,7 +31,7 @@ test('css via link', async () => {
   expect(await getColor('body')).toBe('grey')
   if (isBuild) return
   editFile('dir/test.css', (code) => code.replace('grey', 'red'))
-  await untilUpdated(() => getColor('body'), 'red')
+  await expect.poll(() => getColor('body')).toBe('red')
 })
 
 test('optimized dep', async () => {

playground/assets/__tests__/assets.spec.ts

@@ -14,7 +14,6 @@ import {
   readFile,
   readManifest,
   serverLogs,
-  untilUpdated,
   viteTestUrl,
   watcher,
 } from '~utils'
@@ -342,7 +341,7 @@ describe('css url() references', () => {
       editFile('nested/fragment-bg-hmr.svg', (code) =>
         code.replace('fill="blue"', 'fill="red"'),
       )
-      await untilUpdated(() => getBg('.css-url-svg'), 'red')
+      await expect.poll(() => getBg('.css-url-svg')).toMatch('red')
     }
   })
 
@@ -360,7 +359,7 @@ describe('css url() references', () => {
       editFile('nested/fragment-bg-hmr2.svg', (code) =>
         code.replace('fill="blue"', 'fill="red"'),
       )
-      await untilUpdated(() => getBg('.css-url-svg'), 'red')
+      await expect.poll(() => getBg('.css-url-svg')).toMatch('red')
     }
   })
 })
@@ -663,11 +662,11 @@ test('inline style test', async () => {
 
 if (!isBuild) {
   test('@import in html style tag hmr', async () => {
-    await untilUpdated(() => getColor('.import-css'), 'rgb(0, 136, 255)')
+    await expect.poll(() => getColor('.import-css')).toBe('rgb(0, 136, 255)')
     const loadPromise = page.waitForEvent('load')
     editFile('./css/import.css', (code) => code.replace('#0088ff', '#00ff88'))
     await loadPromise
-    await untilUpdated(() => getColor('.import-css'), 'rgb(0, 255, 136)')
+    await expect.poll(() => getColor('.import-css')).toBe('rgb(0, 255, 136)')
   })
 }
 

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

@@ -12,7 +12,6 @@ import {
   readManifest,
   serverLogs,
   untilBrowserLogAfter,
-  untilUpdated,
 } from '~utils'
 
 test('should have no 404s', () => {
@@ -107,11 +106,11 @@ describe.runIf(isServe)('serve', () => {
   })
 
   test('preserve the base in CSS HMR', async () => {
-    await untilUpdated(() => getColor('body'), 'black') // sanity check
+    await expect.poll(() => getColor('body')).toBe('black') // sanity check
     editFile('frontend/entrypoints/global.css', (code) =>
       code.replace('black', 'red'),
     )
-    await untilUpdated(() => getColor('body'), 'red') // successful HMR
+    await expect.poll(() => getColor('body')).toBe('red') // successful HMR
 
     // Verify that the base (/dev/) was added during the css-update
     const link = await page.$('link[rel="stylesheet"]:last-of-type')
@@ -127,6 +126,6 @@ describe.runIf(isServe)('serve', () => {
         ),
       '[vite] css hot updated: /global.css',
     )
-    await untilUpdated(() => getColor(el), 'rgb(204, 0, 0)')
+    await expect.poll(() => getColor(el)).toBe('rgb(204, 0, 0)')
   })
 })

playground/cli/__tests__/cli.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from 'vitest'
 import { port, streams } from './serve'
-import { editFile, isServe, page, withRetry } from '~utils'
+import { editFile, isServe, page } from '~utils'
 
 test('cli should work', async () => {
   // this test uses a custom serve implementation, so regular helpers for browserLogs and goto don't work
@@ -23,17 +23,19 @@ test('cli should work', async () => {
 test.runIf(isServe)('should restart', async () => {
   const logsLengthBeforeEdit = streams.server.out.length
   editFile('./vite.config.js', (content) => content)
-  await withRetry(async () => {
-    const logs = streams.server.out.slice(logsLengthBeforeEdit)
-    expect(logs).toEqual(
-      expect.arrayContaining([expect.stringMatching('server restarted')]),
-    )
-    // Don't reprint the server URLs as they are the same
-    expect(logs).not.toEqual(
-      expect.arrayContaining([expect.stringMatching('http://localhost')]),
-    )
-    expect(logs).not.toEqual(
-      expect.arrayContaining([expect.stringMatching('error')]),
-    )
-  })
+  await expect
+    .poll(() => {
+      const logs = streams.server.out.slice(logsLengthBeforeEdit)
+      expect(logs).toEqual(
+        expect.arrayContaining([expect.stringMatching('server restarted')]),
+      )
+      // Don't reprint the server URLs as they are the same
+      expect(logs).not.toEqual(
+        expect.arrayContaining([expect.stringMatching('http://localhost')]),
+      )
+      expect(logs).not.toEqual(
+        expect.arrayContaining([expect.stringMatching('error')]),
+      )
+    })
+    .toSatisfy(() => true)
 })

playground/csp/__tests__/csp.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from 'vitest'
-import { expectWithRetry, getColor, page } from '~utils'
+import { getColor, page } from '~utils'
 
 test('linked css', async () => {
   expect(await getColor('.linked')).toBe('blue')
@@ -18,27 +18,25 @@ test('dynamic css', async () => {
 })
 
 test('script tag', async () => {
-  await expectWithRetry(() => page.textContent('.js')).toBe('js: ok')
+  await expect.poll(() => page.textContent('.js')).toBe('js: ok')
 })
 
 test('dynamic js', async () => {
-  await expectWithRetry(() => page.textContent('.dynamic-js')).toBe(
-    'dynamic-js: ok',
-  )
+  await expect
+    .poll(() => page.textContent('.dynamic-js'))
+    .toBe('dynamic-js: ok')
 })
 
 test('inline js', async () => {
-  await expectWithRetry(() => page.textContent('.inline-js')).toBe(
-    'inline-js: ok',
-  )
+  await expect.poll(() => page.textContent('.inline-js')).toBe('inline-js: ok')
 })
 
 test('nonce attributes are not repeated', async () => {
   const htmlSource = await page.content()
   expect(htmlSource).not.toContain(/nonce=""[^>]*nonce=""/)
-  await expectWithRetry(() => page.textContent('.double-nonce-js')).toBe(
-    'double-nonce-js: ok',
-  )
+  await expect
+    .poll(() => page.textContent('.double-nonce-js'))
+    .toBe('double-nonce-js: ok')
 })
 
 test('meta[property=csp-nonce] is injected', async () => {

playground/css-codesplit/__tests__/css-codesplit.spec.ts

@@ -6,7 +6,6 @@ import {
   listAssets,
   page,
   readManifest,
-  untilUpdated,
 } from '~utils'
 
 test('should load all stylesheets', async () => {
@@ -34,7 +33,7 @@ test('should load dynamic import with module', async () => {
 test('style order should be consistent when style tag is inserted by JS', async () => {
   expect(await getColor('.order-bulk')).toBe('orange')
   await page.click('.order-bulk-update')
-  await untilUpdated(() => getColor('.order-bulk'), 'green')
+  await expect.poll(() => getColor('.order-bulk')).toBe('green')
 })
 
 describe.runIf(isBuild)('build', () => {

playground/css-lightningcss/__tests__/css-lightningcss.spec.ts

@@ -6,7 +6,6 @@ import {
   getColor,
   isBuild,
   page,
-  untilUpdated,
   viteTestUrl,
 } from '~utils'
 
@@ -21,12 +20,12 @@ test('linked css', async () => {
 
   if (isBuild) return
   editFile('linked.css', (code) => code.replace('color: blue', 'color: red'))
-  await untilUpdated(() => getColor(linked), 'red')
+  await expect.poll(() => getColor(linked)).toBe('red')
 
   editFile('linked-at-import.css', (code) =>
     code.replace('color: red', 'color: blue'),
   )
-  await untilUpdated(() => getColor(atImport), 'blue')
+  await expect.poll(() => getColor(atImport)).toBe('blue')
 })
 
 test('css import from js', async () => {
@@ -38,12 +37,12 @@ test('css import from js', async () => {
 
   if (isBuild) return
   editFile('imported.css', (code) => code.replace('color: green', 'color: red'))
-  await untilUpdated(() => getColor(imported), 'red')
+  await expect.poll(() => getColor(imported)).toBe('red')
 
   editFile('imported-at-import.css', (code) =>
     code.replace('color: purple', 'color: blue'),
   )
-  await untilUpdated(() => getColor(atImport), 'blue')
+  await expect.poll(() => getColor(atImport)).toBe('blue')
 })
 
 test('css modules', async () => {
@@ -56,7 +55,7 @@ test('css modules', async () => {
   editFile('mod.module.css', (code) =>
     code.replace('color: turquoise', 'color: red'),
   )
-  await untilUpdated(() => getColor(imported), 'red')
+  await expect.poll(() => getColor(imported)).toBe('red')
 })
 
 test('inline css modules', async () => {

playground/css-no-codesplit/__tests__/css-no-codesplit.spec.ts

@@ -1,9 +1,9 @@
 import { describe, expect, test } from 'vitest'
-import { expectWithRetry, getColor, isBuild, listAssets } from '~utils'
+import { getColor, isBuild, listAssets } from '~utils'
 
 test('should load all stylesheets', async () => {
   expect(await getColor('.shared-linked')).toBe('blue')
-  await expectWithRetry(() => getColor('.async-js')).toBe('blue')
+  await expect.poll(() => getColor('.async-js')).toBe('blue')
 })
 
 describe.runIf(isBuild)('build', () => {

playground/css/__tests__/sass-tests.ts

@@ -1,13 +1,5 @@
 import { expect, test } from 'vitest'
-import {
-  editFile,
-  getBg,
-  getColor,
-  isBuild,
-  page,
-  untilUpdated,
-  viteTestUrl,
-} from '~utils'
+import { editFile, getBg, getColor, isBuild, page, viteTestUrl } from '~utils'
 
 export const sassTest = () => {
   test('sass', async () => {
@@ -68,17 +60,17 @@ export const sassTest = () => {
     editFile('sass.scss', (code) =>
       code.replace('color: $injectedColor', 'color: red'),
     )
-    await untilUpdated(() => getColor(imported), 'red')
+    await expect.poll(() => getColor(imported)).toBe('red')
 
     editFile('nested/_index.scss', (code) =>
       code.replace('color: olive', 'color: blue'),
     )
-    await untilUpdated(() => getColor(atImport), 'blue')
+    await expect.poll(() => getColor(atImport)).toBe('blue')
 
     editFile('nested/_partial.scss', (code) =>
       code.replace('color: orchid', 'color: green'),
     )
-    await untilUpdated(() => getColor(partialImport), 'green')
+    await expect.poll(() => getColor(partialImport)).toBe('green')
   })
 }
 
@@ -101,7 +93,7 @@ export const sassModuleTests = (enableHmrTests = false) => {
     // editFile('composed.module.scss', (code) =>
     //   code.replace('color: orangered', 'color: red')
     // )
-    // await untilUpdated(() => getColor(imported), 'red')
+    // await expect.poll(() => getColor(imported)).toMatch('red')
   })
 
   test('css modules w/ sass', async () => {
@@ -116,7 +108,7 @@ export const sassModuleTests = (enableHmrTests = false) => {
     editFile('mod.module.scss', (code) =>
       code.replace('color: orangered', 'color: blue'),
     )
-    await untilUpdated(() => getColor(imported), 'blue')
+    await expect.poll(() => getColor(imported)).toBe('blue')
   })
 }