diff options
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'); + }); +}); |