tests: refactor for ci

packages/vite-plugin/package.json

@@ -96,6 +96,7 @@
     "esbuild": "0.14.43",
     "esbuild-runner": "2.2.1",
     "eslint": "8.17.0",
+    "eslint-plugin-react": "^7.29.4",
     "jest-image-snapshot": "^5.2.0",
     "npm-run-all": "^4.1.5",
     "playwright-chromium": "1.21.1",

packages/vite-plugin/tests/e2e/mv3-vite-vanilla-content-script-hmr/manifest.json

@@ -6,7 +6,7 @@
   "content_scripts": [
     {
       "matches": ["https://example.com/*"],
-      "js": ["src/main.ts"]
+      "js": ["src/content.ts"]
     }
   ],
   "options_page": "src/options.html",

packages/vite-plugin/tests/e2e/mv3-vite-vanilla-content-script-hmr/vite-serve.test.ts

@@ -1,6 +1,7 @@
 import fs from 'fs-extra'
 import path from 'path'
-import { firstValueFrom } from 'rxjs'
+import { ChromiumBrowserContext, Page, Route } from 'playwright-chromium'
+import { firstValueFrom, Observable } from 'rxjs'
 import { expect, test } from 'vitest'
 import { getPage, waitForInnerHtml } from '../helpers'
 import { serve } from '../runners'
@@ -13,11 +14,22 @@ test(
     const src1 = path.join(__dirname, 'src1')
     const src2 = path.join(__dirname, 'src2')
 
-    await fs.remove(src)
-    await fs.copy(src1, src, { recursive: true })
-
-    const { browser, routes } = await serve(__dirname)
-    const optionsPage = await getPage(browser, /options.html$/)
+    let browser: ChromiumBrowserContext | undefined
+    let routes: Observable<Route> | undefined
+    let optionsPage: Page | undefined
+    do {
+      try {
+        await fs.remove(src)
+        await fs.copy(src1, src, { recursive: true })
+
+        const result = await serve(__dirname)
+        browser = result.browser
+        routes = result.routes
+        optionsPage = await getPage(browser, /options.html$/)
+      } catch (error) {
+        console.error('Unable to get options page')
+      }
+    } while (!(browser && routes && optionsPage))
 
     const page = await browser.newPage()
     await page.goto('https://example.com')
@@ -43,8 +55,6 @@ test(
       },
     })
 
-    console.log('copy 1')
-
     await waitForInnerHtml(styles, (h) => h.includes('background-color: red;'))
     expect(reloads).toBe(0) // no reload on css update
     expect(optionsPage.isClosed()).toBe(false) // no runtime reload on css update
@@ -58,14 +68,10 @@ test(
       },
     })
 
-    console.log('copy 2')
-
     await page.locator('h1', { hasText: header }).waitFor()
     expect(reloads).toBeGreaterThanOrEqual(1) // full reload on jsx update
     expect(optionsPage.isClosed()).toBe(false) // no runtime reload on js update
 
-    console.log('pre-copy 3')
-
     // update background.ts file -> trigger runtime reload
     await Promise.all([
       optionsPage.waitForEvent('close', { timeout: 5000 }),
@@ -79,8 +85,6 @@ test(
       }),
     ])
 
-    console.log('copy 3')
-
     await app.waitFor()
 
     expect(optionsPage.isClosed()).toBe(true)