test: try fix ci with vite 4.3 (#612)

Author: bluwy

packages/e2e-tests/hmr/__tests__/hmr.spec.ts

@@ -12,7 +12,7 @@ import {
 	removeFile,
 	editViteConfig,
 	browserLogs,
-	waitForServerRestartAndReloadPage
+	waitForServerRestartAndPageReload
 } from '~utils';
 
 test('should render App', async () => {
@@ -165,7 +165,7 @@ if (!isBuild) {
 
 		test('should work with emitCss: false in svelte config', async () => {
 			addFile('svelte.config.cjs', `module.exports={vitePlugin:{emitCss:false}}`);
-			await waitForServerRestartAndReloadPage();
+			await waitForServerRestartAndPageReload();
 			expect(await getColor(`#hmr-test-1 .label`)).toBe('red');
 			removeFile('svelte.config.cjs');
 		});
@@ -186,7 +186,7 @@ if (!isBuild) {
 				`module.exports = {
 			  preprocess:[{markup:${injectPreprocessor.toString()}}]};`
 			);
-			await waitForServerRestartAndReloadPage();
+			await waitForServerRestartAndPageReload();
 			expect(await getText('#preprocess-inject')).toBe('Injected');
 			expect(await getText(`#hmr-test-1 .counter`)).toBe('0');
 			expect(await getColor(`#hmr-test-1 .label`)).toBe('red');
@@ -201,7 +201,7 @@ if (!isBuild) {
 					.replace('preprocess-inject', 'preprocess-inject-2')
 					.replace('Injected', 'Injected 2')
 			);
-			await waitForServerRestartAndReloadPage();
+			await waitForServerRestartAndPageReload();
 			expect(await getText('#preprocess-inject-2')).toBe('Injected 2');
 			expect(await getEl('#preprocess-inject')).toBe(null);
 			expect(await getColor(`#hmr-test-1 .label`)).toBe('green');
@@ -213,7 +213,7 @@ if (!isBuild) {
 			expect(await getColor(`#hmr-test-1 .label`)).toBe('red');
 			expect(await getText(`#hmr-test-1 .counter`)).toBe('1');
 			await removeFile('svelte.config.cjs');
-			await waitForServerRestartAndReloadPage();
+			await waitForServerRestartAndPageReload();
 			expect(await getEl('#preprocess-inject-2')).toBe(null);
 			expect(await getEl('#preprocess-inject')).toBe(null);
 			expect(await getColor(`#hmr-test-1 .label`)).toBe('red');

packages/e2e-tests/package-json-svelte-field/package.json

@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
+    "sass": "^1.59.3",
     "svelte": "^3.57.0",
     "vite": "^4.2.1"
   },

packages/e2e-tests/prebundle-svelte-deps/__tests__/prebundle-svelte-deps.spec.ts

@@ -4,7 +4,7 @@ import {
 	getText,
 	isBuild,
 	readVitePrebundleMetadata,
-	waitForServerRestartAndReloadPage
+	waitForServerRestartAndPageReload
 } from '~utils';
 
 async function expectPageToWork() {
@@ -46,7 +46,7 @@ if (!isBuild) {
 		editFile('svelte.config.js', (c) =>
 			c.replace('prebundleSvelteLibraries: true', 'prebundleSvelteLibraries: false')
 		);
-		await waitForServerRestartAndReloadPage();
+		await waitForServerRestartAndPageReload();
 		await expectPageToWork();
 		const metadataFile = readVitePrebundleMetadata();
 		const metadata = JSON.parse(metadataFile);

packages/e2e-tests/testUtils.ts

@@ -217,11 +217,11 @@ export async function saveScreenshot(name: string) {
 export async function editViteConfig(replacer: (str: string) => string) {
 	editFile('vite.config.js', replacer);
 	if (!isBuild) {
-		await waitForServerRestartAndReloadPage();
+		await waitForServerRestartAndPageReload();
 	}
 }
 
-export async function waitForServerRestartAndReloadPage(timeout = 10000) {
+export async function waitForServerRestartAndPageReload(timeout = 10000) {
 	const logs = e2eServer.logs.server.out;
 	const startIdx = logs.length;
 	let timeleft = timeout;
@@ -238,7 +238,10 @@ export async function waitForServerRestartAndReloadPage(timeout = 10000) {
 	if (!restarted) {
 		throw new Error(`server did not restart after ${timeout}ms`);
 	}
-	await reloadPage();
+	// wait for vite auto-refresh and connect
+	await waitForViteConnect(page);
+	// wait for page to completely load
+	await page.waitForLoadState();
 }
 
 export async function reloadPage() {