Split up e2e HMR test (#3425)

1 files changed, 46 insertions, 36 deletions

diff --git a/packages/astro/e2e/multiple-frameworks.test.js b/packages/astro/e2e/multiple-frameworks.test.js
index d24225d50..dfc9c1d37 100644
--- a/packages/astro/e2e/multiple-frameworks.test.js
+++ b/packages/astro/e2e/multiple-frameworks.test.js
@@ -106,41 +106,51 @@ test.describe('Multiple frameworks', () => {
 		await expect(bComponent, 'component text is visible').toHaveText('Hello Astro (B)');
 	});
 
-	test('HMR', async ({ astro, page }) => {
-		await page.goto('/');
-
-		// 1: updating the page template
-		const preactSlot = page.locator('#preact-counter + .counter-message');
-		await expect(preactSlot, 'initial slot content').toHaveText('Hello Preact!');
-
-		await astro.editFile('./src/pages/index.astro', (content) =>
-			content.replace('Hello Preact!', 'Hello Preact, updated!')
-		);
-
-		await expect(preactSlot, 'slot content updated').toHaveText('Hello Preact, updated!');
-
-		// Edit the react component
-		await astro.editFile('./src/components/ReactCounter.jsx', (content) =>
-			content.replace('useState(0)', 'useState(5)')
-		);
-
-		const reactCount = await page.locator('#react-counter pre');
-		await expect(reactCount, 'initial count updated to 5').toHaveText('5');
-
-		// Edit the svelte component's style
-		const svelteCounter = page.locator('#svelte-counter');
-		await expect(svelteCounter, 'initial background is white').toHaveCSS(
-			'background-color',
-			'rgb(255, 255, 255)'
-		);
-
-		await astro.editFile('./src/components/SvelteCounter.svelte', (content) =>
-			content.replace('background: white', 'background: rgb(230, 230, 230)')
-		);
-
-		await expect(svelteCounter, 'background color updated').toHaveCSS(
-			'background-color',
-			'rgb(230, 230, 230)'
-		);
+	test.describe('HMR', () => {
+		test('Page template', async ({ astro, page }) => {
+			await page.goto('/');
+
+			// 1: updating the page template
+			const preactSlot = page.locator('#preact-counter + .counter-message');
+			await expect(preactSlot, 'initial slot content').toHaveText('Hello Preact!');
+
+			await astro.editFile('./src/pages/index.astro', (content) =>
+				content.replace('Hello Preact!', 'Hello Preact, updated!')
+			);
+
+			await expect(preactSlot, 'slot content updated').toHaveText('Hello Preact, updated!');
+		});
+
+		test('React component', async ({ astro, page }) => {
+			await page.goto('/');
+
+			// Edit the react component
+			await astro.editFile('./src/components/ReactCounter.jsx', (content) =>
+				content.replace('useState(0)', 'useState(5)')
+			);
+
+			const reactCount = await page.locator('#react-counter pre');
+			await expect(reactCount, 'initial count updated to 5').toHaveText('5');
+		});
+
+		test('Svelte component', async ({ astro, page }) => {
+			await page.goto('/');
+
+			// Edit the svelte component's style
+			const svelteCounter = page.locator('#svelte-counter');
+			await expect(svelteCounter, 'initial background is white').toHaveCSS(
+				'background-color',
+				'rgb(255, 255, 255)'
+			);
+
+			await astro.editFile('./src/components/SvelteCounter.svelte', (content) =>
+				content.replace('background: white', 'background: rgb(230, 230, 230)')
+			);
+
+			await expect(svelteCounter, 'background color updated').toHaveCSS(
+				'background-color',
+				'rgb(230, 230, 230)'
+			);
+		});
 	});
 });