diff options
Diffstat (limited to 'packages/integrations/react/test')
29 files changed, 481 insertions, 0 deletions
diff --git a/packages/integrations/react/test/fixtures/react-component/astro.config.mjs b/packages/integrations/react/test/fixtures/react-component/astro.config.mjs new file mode 100644 index 000000000..0c6434f8a --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/astro.config.mjs @@ -0,0 +1,10 @@ +import react from '@astrojs/react'; +import vue from '@astrojs/vue'; +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + integrations: [react({ + experimentalReactChildren: true, + }), vue()], +}); diff --git a/packages/integrations/react/test/fixtures/react-component/package.json b/packages/integrations/react/test/fixtures/react-component/package.json new file mode 100644 index 000000000..c5376e3b3 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/package.json @@ -0,0 +1,13 @@ +{ + "name": "@test/react-component", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/react": "workspace:*", + "@astrojs/vue": "workspace:*", + "astro": "workspace:*", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "vue": "^3.5.13" + } +} diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/ArrowFunction.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/ArrowFunction.jsx new file mode 100644 index 000000000..16fac5bb6 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/ArrowFunction.jsx @@ -0,0 +1,5 @@ +import React from 'react'; + +export default () => { + return <div id="arrow-fn-component"></div>; +} diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/CloneElement.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/CloneElement.jsx new file mode 100644 index 000000000..809ac4aa4 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/CloneElement.jsx @@ -0,0 +1,6 @@ +import { cloneElement } from 'react'; + +const ClonedWithProps = (element) => (props) => + cloneElement(element, props); + +export default ClonedWithProps(<div id="cloned">Cloned With Props</div>); diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/ForgotImport.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/ForgotImport.jsx new file mode 100644 index 000000000..9ee27faca --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/ForgotImport.jsx @@ -0,0 +1,3 @@ +export default function ({}) { + return <h2>oops</h2>; +} diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/GetSearch.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/GetSearch.jsx new file mode 100644 index 000000000..d3fee2f9a --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/GetSearch.jsx @@ -0,0 +1,7 @@ +import React from 'react'; + +function GetSearch() { + return (<div>{window.location.search}</div>); +} + +export default GetSearch diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/Goodbye.vue b/packages/integrations/react/test/fixtures/react-component/src/components/Goodbye.vue new file mode 100644 index 000000000..430dfdb71 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/Goodbye.vue @@ -0,0 +1,11 @@ +<template> + <h2 id="vue-h2">Hasta la vista, {{ name }}</h2> +</template> + +<script> +export default { + props: { + name: String, + }, +}; +</script> diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/Hello.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/Hello.jsx new file mode 100644 index 000000000..4c241162d --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/Hello.jsx @@ -0,0 +1,5 @@ +import React from 'react'; + +export default function ({ name, unused }) { + return <h2 id={`react-${name}`}>Hello {name}!</h2>; +} diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/ImportsThrowsAnError.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/ImportsThrowsAnError.jsx new file mode 100644 index 000000000..d6ff21dc3 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/ImportsThrowsAnError.jsx @@ -0,0 +1,7 @@ +import ThrowsAnError from "./ThrowsAnError"; + +export default function() { + return <> + <ThrowsAnError /> + </> +} diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/LazyComponent.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/LazyComponent.jsx new file mode 100644 index 000000000..b43aa36be --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/LazyComponent.jsx @@ -0,0 +1,9 @@ +import React from 'react'; + +export const LazyComponent = () => { + return ( + <span id="lazy">inner content</span> + ); +}; + +export default LazyComponent; diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/PragmaComment.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/PragmaComment.jsx new file mode 100644 index 000000000..d8ea77810 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/PragmaComment.jsx @@ -0,0 +1,5 @@ +/** @jsxImportSource react */ + +export default function() { + return <div className="pragma-comment">Hello world</div>; +} diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/PragmaCommentTypeScript.tsx b/packages/integrations/react/test/fixtures/react-component/src/components/PragmaCommentTypeScript.tsx new file mode 100644 index 000000000..9f2256fbf --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/PragmaCommentTypeScript.tsx @@ -0,0 +1,5 @@ +/** @jsxImportSource react */ + +export default function({}: object) { + return <div className="pragma-comment">Hello world</div>; +} diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/PropsSpread.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/PropsSpread.jsx new file mode 100644 index 000000000..044c2a019 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/PropsSpread.jsx @@ -0,0 +1,5 @@ +import React from 'react'; + +export default (props) => { + return <div id="component-spread-props">{props.text}</div>; +} diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/Pure.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/Pure.jsx new file mode 100644 index 000000000..6fae8613b --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/Pure.jsx @@ -0,0 +1,13 @@ +import React from 'react'; + +export default class StaticComponent extends React.PureComponent { + + render() { + return ( + <div id="pure"> + <h1>Static component</h1> + </div> + ) + } + +}
\ No newline at end of file diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/Research.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/Research.jsx new file mode 100644 index 000000000..9ab83e5f3 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/Research.jsx @@ -0,0 +1,7 @@ +import * as React from 'react' + +export function Research2() { + const [value] = React.useState(1) + + return <div id="research">foo bar {value}</div> +}
\ No newline at end of file diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/Suspense.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/Suspense.jsx new file mode 100644 index 000000000..87dc82625 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/Suspense.jsx @@ -0,0 +1,14 @@ +import React, { Suspense } from 'react'; +const LazyComponent = React.lazy(() => import('./LazyComponent.jsx')); + +export const ParentComponent = () => { + return ( + <div id="outer"> + <Suspense> + <LazyComponent /> + </Suspense> + </div> + ); +}; + +export default ParentComponent; diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/ThrowsAnError.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/ThrowsAnError.jsx new file mode 100644 index 000000000..cf970e38c --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/ThrowsAnError.jsx @@ -0,0 +1,15 @@ +import { useState } from 'react'; + +export default function() { + let player = undefined; + // This is tested in dev mode, so make it work during the build to prevent + // breaking other tests. + if(import.meta.env.MODE === 'production') { + player = {}; + } + const [] = useState(player.currentTime || null); + + return ( + <div>Should have thrown</div> + ) +} diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/TypeScriptComponent.tsx b/packages/integrations/react/test/fixtures/react-component/src/components/TypeScriptComponent.tsx new file mode 100644 index 000000000..bde96da84 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/TypeScriptComponent.tsx @@ -0,0 +1,5 @@ +import React from 'react'; + +export default function({}) { + return <div className="ts-component">Hello world</div>; +} diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/WithChildren.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/WithChildren.jsx new file mode 100644 index 000000000..a522bf95e --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/WithChildren.jsx @@ -0,0 +1,10 @@ +import React from 'react'; + +export default function ({ id, children }) { + return ( + <div id={id}> + <div className="with-children">{children}</div> + <div className="with-children-count">{children.length}</div> + </div> + ); +} diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/WithId.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/WithId.jsx new file mode 100644 index 000000000..0abe91c72 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/components/WithId.jsx @@ -0,0 +1,6 @@ +import React from 'react'; + +export default function () { + const id = React.useId(); + return <p className='react-use-id' id={id}>{id}</p>; +} diff --git a/packages/integrations/react/test/fixtures/react-component/src/pages/children.astro b/packages/integrations/react/test/fixtures/react-component/src/pages/children.astro new file mode 100644 index 000000000..3f83eafcb --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/pages/children.astro @@ -0,0 +1,18 @@ +--- +import WithChildren from '../components/WithChildren'; +--- + +<html> + <head> + <!-- Head Stuff --> + </head> + <body> + <WithChildren id="one"> + <div>child 1</div><div>child 2</div> + </WithChildren> + + <WithChildren id="two" client:load> + <div>child 1</div><div>child 2</div> + </WithChildren> + </body> +</html> diff --git a/packages/integrations/react/test/fixtures/react-component/src/pages/error-rendering.astro b/packages/integrations/react/test/fixtures/react-component/src/pages/error-rendering.astro new file mode 100644 index 000000000..6984a6da5 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/pages/error-rendering.astro @@ -0,0 +1,11 @@ +--- +import ImportsThrowsAnError from '../components/ImportsThrowsAnError'; +--- +<html> +<head> + <title>Testing</title> +</head> +<body> + <ImportsThrowsAnError /> +</body> +</html> diff --git a/packages/integrations/react/test/fixtures/react-component/src/pages/index.astro b/packages/integrations/react/test/fixtures/react-component/src/pages/index.astro new file mode 100644 index 000000000..b3b95c4b3 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/pages/index.astro @@ -0,0 +1,41 @@ +--- +import ArrowFunction from '../components/ArrowFunction.jsx'; +import CloneElement from '../components/CloneElement'; +import Later from '../components/Goodbye.vue'; +import Hello from '../components/Hello.jsx'; +import PropsSpread from '../components/PropsSpread.jsx'; +import Pure from '../components/Pure.jsx'; +import {Research2} from '../components/Research.jsx'; +import TypeScriptComponent from '../components/TypeScriptComponent'; +import WithChildren from '../components/WithChildren'; +import WithId from '../components/WithId'; + +const someProps = { + text: 'Hello world!', +}; +--- + +<html> + <head> + <!-- Head Stuff --> + </head> + <body> + <Hello name="static" /> + <Hello name="load" client:load /> + <!-- Test island deduplication, i.e. same UID as the component above. --> + <Hello name="load" client:load /> + <!-- Test island deduplication account for non-render affecting props. --> + <Hello name="load" unused="" client:load /> + <Later name="baby" /> + <ArrowFunction /> + <PropsSpread {...someProps}/> + <Research2 client:idle /> + <TypeScriptComponent client:load /> + <Pure /> + <CloneElement /> + <WithChildren client:load>test</WithChildren> + <WithChildren client:load children="test" /> + <WithId client:idle /> + <WithId client:idle /> + </body> +</html> diff --git a/packages/integrations/react/test/fixtures/react-component/src/pages/pragma-comment.astro b/packages/integrations/react/test/fixtures/react-component/src/pages/pragma-comment.astro new file mode 100644 index 000000000..b3ddba639 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/pages/pragma-comment.astro @@ -0,0 +1,14 @@ +--- +import PragmaComponent from '../components/PragmaComment.jsx'; +import PragmaComponentTypeScript from '../components/PragmaCommentTypeScript.tsx'; +--- + +<html> +<head> + <title>React component works with Pragma comment</title> +</head> +<body> + <PragmaComponent client:load/> + <PragmaComponentTypeScript client:load/> +</body> +</html> diff --git a/packages/integrations/react/test/fixtures/react-component/src/pages/suspense.astro b/packages/integrations/react/test/fixtures/react-component/src/pages/suspense.astro new file mode 100644 index 000000000..5a9d15644 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/pages/suspense.astro @@ -0,0 +1,17 @@ +--- +import Suspense from '../components/Suspense.jsx'; +--- + +<html> + <head> + <!-- Head Stuff --> + </head> + <body> + <div id="client"> + <Suspense client:load /> + </div> + <div id="server"> + <Suspense /> + </div> + </body> +</html> diff --git a/packages/integrations/react/test/fixtures/react-component/src/skipped-pages/forgot-import.astro b/packages/integrations/react/test/fixtures/react-component/src/skipped-pages/forgot-import.astro new file mode 100644 index 000000000..de5d319d9 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/skipped-pages/forgot-import.astro @@ -0,0 +1,12 @@ +--- +import ForgotImport from '../components/ForgotImport.jsx'; +--- + +<html> +<head> + <title>Here we are</title> +</head> +<body> + <ForgotImport /> +</body> +</html>
\ No newline at end of file diff --git a/packages/integrations/react/test/fixtures/react-component/src/skipped-pages/window.astro b/packages/integrations/react/test/fixtures/react-component/src/skipped-pages/window.astro new file mode 100644 index 000000000..e780f3c44 --- /dev/null +++ b/packages/integrations/react/test/fixtures/react-component/src/skipped-pages/window.astro @@ -0,0 +1,8 @@ +--- +import GetSearch from '../components/GetSearch.jsx'; +--- +<html> +<body> + <GetSearch /> +</body> +</html> diff --git a/packages/integrations/react/test/parsed-react-children.test.js b/packages/integrations/react/test/parsed-react-children.test.js new file mode 100644 index 000000000..75604e5d3 --- /dev/null +++ b/packages/integrations/react/test/parsed-react-children.test.js @@ -0,0 +1,16 @@ +import assert from 'node:assert/strict'; +import { describe, it } from 'node:test'; +import convert from '../vnode-children.js'; + +describe('experimental react children', () => { + it('has undefined as children for direct children', () => { + const [imgVNode] = convert('<img src="abc"></img>'); + assert.deepEqual(imgVNode.props.children, undefined); + }); + + it('has undefined as children for nested children', () => { + const [divVNode] = convert('<div><img src="xyz"></img></div>'); + const [imgVNode] = divVNode.props.children; + assert.deepEqual(imgVNode.props.children, undefined); + }); +}); diff --git a/packages/integrations/react/test/react-component.test.js b/packages/integrations/react/test/react-component.test.js new file mode 100644 index 000000000..fbe88d65f --- /dev/null +++ b/packages/integrations/react/test/react-component.test.js @@ -0,0 +1,183 @@ +import assert from 'node:assert/strict'; +import { after, before, describe, it } from 'node:test'; +import { load as cheerioLoad } from 'cheerio'; +import { isWindows, loadFixture } from '../../../astro/test/test-utils.js'; + +let fixture; + +describe('React Components', () => { + before(async () => { + fixture = await loadFixture({ + root: new URL('./fixtures/react-component/', import.meta.url), + }); + }); + + describe('build', () => { + before(async () => { + await fixture.build(); + }); + + it('Can load React', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerioLoad(html); + + // test 1: basic component renders + assert.equal($('#react-static').text(), 'Hello static!'); + + // test 2: no reactroot + assert.equal($('#react-static').attr('data-reactroot'), undefined); + + // test 3: Can use function components + assert.equal($('#arrow-fn-component').length, 1); + + // test 4: Can use spread for components + assert.equal($('#component-spread-props').length, 1); + + // test 5: spread props renders + assert.equal($('#component-spread-props').text(), 'Hello world!'); + + // test 6: Can use TS components + assert.equal($('.ts-component').length, 1); + + // test 7: Can use Pure components + assert.equal($('#pure').length, 1); + + // test 8: Check number of islands + assert.equal($('astro-island[uid]').length, 9); + + // test 9: Check island deduplication + const uniqueRootUIDs = new Set($('astro-island').map((_i, el) => $(el).attr('uid'))); + assert.equal(uniqueRootUIDs.size, 8); + + // test 10: Should properly render children passed as props + const islandsWithChildren = $('.with-children'); + assert.equal(islandsWithChildren.length, 2); + assert.equal( + $(islandsWithChildren[0]).html(), + $(islandsWithChildren[1]).find('astro-slot').html(), + ); + + // test 11: Should generate unique React.useId per island + const islandsWithId = $('.react-use-id'); + assert.equal(islandsWithId.length, 2); + assert.notEqual($(islandsWithId[0]).attr('id'), $(islandsWithId[1]).attr('id')); + }); + + it('Can load Vue', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerioLoad(html); + assert.equal($('#vue-h2').text(), 'Hasta la vista, baby'); + }); + + it('Can use a pragma comment', async () => { + const html = await fixture.readFile('/pragma-comment/index.html'); + const $ = cheerioLoad(html); + + // test 1: rendered the PragmaComment component + assert.equal($('.pragma-comment').length, 2); + }); + + // TODO: is this still a relevant test? + it.skip('Includes reactroot on hydrating components', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerioLoad(html); + + const div = $('#research'); + + // test 1: has the hydration attr + assert.ok(div.attr('data-reactroot')); + + // test 2: renders correctly + assert.equal(div.html(), 'foo bar <!-- -->1'); + }); + + it('Can load Suspense-using components', async () => { + const html = await fixture.readFile('/suspense/index.html'); + const $ = cheerioLoad(html); + assert.equal($('#client #lazy').length, 1); + assert.equal($('#server #lazy').length, 1); + }); + + it('Can pass through props with cloneElement', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerioLoad(html); + assert.equal($('#cloned').text(), 'Cloned With Props'); + }); + + it('Children are parsed as React components, can be manipulated', async () => { + const html = await fixture.readFile('/children/index.html'); + const $ = cheerioLoad(html); + assert.equal($('#one .with-children-count').text(), '2'); + }); + + it('Client children passes option to the client', async () => { + const html = await fixture.readFile('/children/index.html'); + const $ = cheerioLoad(html); + assert.equal($('[data-react-children]').length, 1); + }); + }); + + if (isWindows) return; + + describe('dev', () => { + /** @type {import('../../../astro/test/test-utils.js').Fixture} */ + let devServer; + + before(async () => { + devServer = await fixture.startDevServer(); + }); + + after(async () => { + await devServer.stop(); + }); + + it('scripts proxy correctly', async () => { + const html = await fixture.fetch('/').then((res) => res.text()); + const $ = cheerioLoad(html); + + for (const script of $('script').toArray()) { + const { src } = script.attribs; + if (!src) continue; + assert.equal((await fixture.fetch(src)).status, 200, `404: ${src}`); + } + }); + + // TODO: move this to separate dev test? + it.skip('Throws helpful error message on window SSR', async () => { + const html = await fixture.fetch('/window/index.html'); + assert.ok( + (await html.text()).includes( + `[/window] + The window object is not available during server-side rendering (SSR). + Try using \`import.meta.env.SSR\` to write SSR-friendly code. + https://docs.astro.build/reference/api-reference/#importmeta`, + ), + ); + }); + + // In moving over to Vite, the jsx-runtime import is now obscured. TODO: update the method of finding this. + it.skip('uses the new JSX transform', async () => { + const html = await fixture.fetch('/index.html'); + + // Grab the imports + const exp = /import\("(.+?)"\)/g; + let match, componentUrl; + while ((match = exp.exec(html))) { + if (match[1].includes('Research.js')) { + componentUrl = match[1]; + break; + } + } + const component = await fixture.readFile(componentUrl); + const jsxRuntime = component.imports.filter((i) => i.specifier.includes('jsx-runtime')); + + // test 1: react/jsx-runtime is used for the component + assert.ok(jsxRuntime); + }); + + it('When a nested component throws it does not crash the server', async () => { + const res = await fixture.fetch('/error-rendering'); + await res.arrayBuffer(); + }); + }); +}); |