Add test for suffix hydration (#4982)

3 files changed, 25 insertions, 0 deletions

diff --git a/packages/astro/e2e/fixtures/react-component/src/components/Suffix.react.tsx b/packages/astro/e2e/fixtures/react-component/src/components/Suffix.react.tsx
new file mode 100644
index 000000000..10dddf275
--- /dev/null
+++ b/packages/astro/e2e/fixtures/react-component/src/components/Suffix.react.tsx
@@ -0,0 +1,10 @@
+import React, { useState } from 'react';
+
+export default function () {
+  const [open, setOpen] = useState(false);
+  return (
+    <button id="suffix" onClick={() => setOpen(!open)}>
+      suffix toggle {open.toString()}
+    </button>
+  );
+}
diff --git a/packages/astro/e2e/fixtures/react-component/src/pages/index.astro b/packages/astro/e2e/fixtures/react-component/src/pages/index.astro
index 0a9a212d0..f9e0ae395 100644
--- a/packages/astro/e2e/fixtures/react-component/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/react-component/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import Counter from '../components/Counter.jsx';
 import ReactComponent from '../components/JSXComponent.jsx';
+import Suffix from '../components/Suffix.react';
 
 const someProps = {
 	count: 0,
@@ -33,5 +34,7 @@ const someProps = {
 		</Counter>
 
 		<ReactComponent id="client-only" client:only="react" />
+
+		<Suffix client:load />
 	</body>
 </html>
diff --git a/packages/astro/e2e/react-component.test.js b/packages/astro/e2e/react-component.test.js
index a1918b854..8eb10a7ed 100644
--- a/packages/astro/e2e/react-component.test.js
+++ b/packages/astro/e2e/react-component.test.js
@@ -1,3 +1,4 @@
+import { expect } from '@playwright/test';
 import { prepareTestFactory } from './shared-component-tests.js';
 
 const { test, createTests } = prepareTestFactory({ root: './fixtures/react-component/' });
@@ -30,3 +31,14 @@ test.describe('React components in MDX files', () => {
 		pageSourceFilePath: './src/pages/mdx.mdx',
 	});
 });
+
+test.describe('dev', () => {
+	test('Loads .react suffix', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const suffix = page.locator('#suffix');
+		expect(await suffix.textContent()).toBe('suffix toggle false');
+		await suffix.click();
+		expect(await suffix.textContent()).toBe('suffix toggle true');
+	});
+});