test: fix flakiness of client-side routing test (fix #2646) (#2948)

vitejs · Apr 11, 2021 · 92b3193 · 92b3193
1 parent 7121553
commit 92b3193
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 6 deletions.
diff --git a/packages/playground/ssr-react/__tests__/ssr-react.spec.ts b/packages/playground/ssr-react/__tests__/ssr-react.spec.ts
@@ -1,4 +1,10 @@
-import { editFile, getColor, isBuild, untilUpdated } from '../../testUtils'
+import {
+ editFile,
+ getColor,
+ isBuild,
+ untilUpdated,
+ autoRetry
+} from '../../testUtils'
 import { port } from './serve'
 import fetch from 'node-fetch'
 
@@ -39,8 +45,9 @@ test('hmr', async () => {
 
 test('client navigation', async () => {
  await page.click('a[href="/about"]')
- await page.waitForTimeout(10)
- expect(await page.textContent('h1')).toMatch('About')
+ await autoRetry(async () => {
+ expect(await page.textContent('h1')).toMatch('About')
+ })
  editFile('src/pages/About.jsx', (code) =>
  code.replace('<h1>About', '<h1>changed')
  )

diff --git a/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts b/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts
@@ -1,4 +1,10 @@
-import { editFile, getColor, isBuild, untilUpdated } from '../../testUtils'
+import {
+ editFile,
+ getColor,
+ isBuild,
+ untilUpdated,
+ autoRetry
+} from '../../testUtils'
 import { port } from './serve'
 import fetch from 'node-fetch'
 
@@ -110,8 +116,9 @@ test('hmr', async () => {
 
 test('client navigation', async () => {
  await page.click('a[href="/about"]')
- await page.waitForTimeout(10)
- expect(await page.textContent('h1')).toMatch('About')
+ await autoRetry(async () => {
+ expect(await page.textContent('h1')).toMatch('About')
+ })
  editFile('src/pages/About.vue', (code) => code.replace('About', 'changed'))
  await untilUpdated(() => page.textContent('h1'), 'changed')
 })
diff --git a/packages/playground/testUtils.ts b/packages/playground/testUtils.ts
@@ -119,3 +119,34 @@ export async function untilUpdated(
  }
  }
 }
+
+export async function autoRetry(
+ test: () => void | Promise<void>
+): Promise<void> {
+ const timeout = 60 * 1000
+ const period = 100
+ const numberOfTries = timeout / period
+ let i = 0
+ while (true) {
+ try {
+ await test()
+ return
+ } catch (err) {
+ i = i + 1
+ if (i > numberOfTries) {
+ throw err
+ }
+ }
+ await sleep(period)
+ }
+
+ return
+
+ function sleep(milliseconds: number): Promise<void> {
+ return new Promise((resolve) =>
+ setTimeout(() => {
+ resolve()
+ }, milliseconds)
+ )
+ }
+}