0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-23 21:53:55 -05:00
astro/packages/integrations/react/test/react-component.test.js

174 lines
5.4 KiB
JavaScript
Raw Normal View History

🚀 Astro Next (0.21.0) (#1406) * make astro-root uids unique * Move Astro to Vite * Update tests * More test improvements * fred fixes * Update compiler, improve tests * Fix runtime, improve code frame * Add Markdown support * Tycho fixes * Fred fixes part 2 * Throw Error for WIP Features * Improve testing suite * Allow users to pass config to Vite * Fix npm install (#1407) * Automate publish on merge (#1408) * Add NPM_TOKEN to publish script (#1409) * Create .npmrc * Clean up astro deps (#1411) * Use new renderers (#1412) * feat: update compiler (#1421) * Try mocha/chai test runners (#1418) * Try mocha/chai test runners * Disable failing smoke test for now Will revert when next can build docs * Enable mocha in parallel mode * Remove warning * Update docs * Fix Windows bug * Fix internal imports * Fix styles * Fix CI release on merge to next (#1427) * Fix logger locale parsing (#1439) * fix(logger): locale parsing * Fixed issue of compiler crash when "c" locale was encountered * Return default locale if parsed locale is less than 2 chars long * chore: add changeset * Apply changes from #1387 * Add back in support for children (#1486) * Add back in support for children * Be more careful * Enables most slot tests (#1494) * Enables most slot tests * Use spreadAttributes * Add hydration to Solid renderer (#1479) (#1495) * feat: add hydration to Solid renderer * fix: intersection observer, move script to the end Co-authored-by: Ryan Carniato <ryansolid@gmail.com> * [next] support Astro.slots API (#1516) * [next] Support for custom elements (#1528) * [next] Support for custom elements * Fix eslint errors * eslint again * [next] Fix Astro.fetchContent (#1480) * fix Astro.fetchContent * fix(fetchContent): cast type Co-authored-by: Nate Moore <nate@skypack.dev> * Move hydration to the compiler (#1547) * Move hydration to the compiler * Move extracting url, export to util fn * Brings back astro-dynamic tests (#1548) * Implements top-level Astro + Astro.resolve (#1556) * Implements top-level Astro + Astro.resolve * Fix linting * [next] Update renderers (#1509) * chore: update vite * fix(renderers): point renderers to resolved server/client entrypoints * Chore: Enable more tests with new compiler changes (#1558) * [Next] `fetch` support (#1563) * fix: polyfill fetch in every ssr scenario * test(fetch): update fetch tests * docs: update data fetching guide to remove caveats about `fetch` and isomorphic usage * refactor: update regex for clarity * Restructure (#1569) * Upgrade to @astrojs/compiler 0.2.0 (#1584) * Use Vite fork (#1585) * Use Vite fork * Fix linting * Move Vite to vendor/ and add a license * Fix linting * Include the dist folder * Update files config * Markdown compilation (#1593) * Markdown compilation * remove debugger * Gets lit hydration working (#1595) * Gets Astro.fetchContent compilation to work (#1596) * Gets Astro.fetchContent compilation to work This fixes Astro.fetchContent so that we handle esbuild transforming the name of the nested Astro call. * Remove debugging * Update the tests * Remove another debugger * Update Vite to latest (#1597) * Add Prism syntax highlighting (#1598) * Scoped styles with markdown (#1599) * Bugfix: fix getStaticPaths() cache miss (#1602) * Fix build order (#1609) * Bugfix: restore build to get all paths earlier, when build. Same as main. * Also re-add timings * [next] blog example fully working (#1610) * Add environment variables docs (Closes #873) (#1587) * Added environment variables docs (Closes #873) * Fixed prefix * Remove numbered comments (#1611) * Chore: remove numbered comments * Clean up block comments * comment style fixes (#1614) * [next] Upgrade compiler (#1619) * [next] Upgrade compiler * Upgrade to latest compiler * Fix the path to global css * Removed debugger * feat: add fragment support to vite-plugin-astro (#1600) * [next] fix `.tsx` handling (#1620) * fix: support tsx in JSX plugin * fix: preserve JSX via esbuild, only use Babel for JSX compilation * fix: handle upcoming Vite API for `ssr` flag * [next] Add CSS preprocessing (#1589) * Add concept for style support in Astro * Update style preprocessor to use new compiler * fix: massage preprocessStyle type * fix: @astrojs/compiler types Co-authored-by: Nate Moore <nate@skypack.dev> * fix issues in blog-multiple-authors (#1621) * Move Sass to deps (#1622) * Update renderer API for Vite (#1623) * Update renderer API for Vite * Fix lit-element tests * Clean up comments * Throw friendly error if renderer provides viteConfig in a bad format * Fix changesets (#1628) * Remove cheerio scanning from build stats (#1629) * Minor change to jsxTransformOptions, update Renderer API docs (#1630) * [next] docs example fully working (#1627) * [next] docs example fully working * Upgrade compiler to unlock docs * Add `class:list` directive (#1612) * Add support for class:list directive The `class:list` directive serializes an expression of css class names. For React components, `className:list` is also supported. * Remove `className` support and React tests * Add tests for the absence of omitted classes * fix: `define:vars` scoping for styles (#1632) * feat: fix Debug component (#1633) * [next] Fix `<Markdown>` component (#1631) * fix: cleanup issues with <Markdown> component * fix: fix `content` usage with Markdown * [next] Fix `<Code>` component (#1635) * fix: enable Code component * test: update expect to chai format * Fixes solid (#1634) * Fixes solid * Rename the test * Rebase with next * Skip solid test for now * Add support for markdown plugins (#1650) * Fix broken next release (#1652) * Prevent passing to Svelte components * Prevent passing class to Vue components * Add CSS injection, fix portfolio example (#1648) * Fix portfolio example * Add .pcss extension * Update load ssr opts * Update packages/astro/src/runtime/server/index.ts Co-authored-by: Jonathan Neal <jonathantneal@hotmail.com> Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com> Co-authored-by: Jonathan Neal <jonathantneal@hotmail.com> * Fixes external HMR (#1654) * Upgrade compiler version (#1655) Fixes docs and blog examples * Resolve renderers relative to the projectRoot (#1659) * Template fixes (#1656) * fix: dedupe hashes for identical islands (#1660) * fix: scope `define:vars` to `:root` for `<style global>` (#1663) * chore: update compiler to latest (#1664) * [next] fix island hydration inside of `<Markdown>` (#1665) * fix: create rehype plugin to smooth over island hydration bugs * refactor: remove debug code * chore: explain need for `rehypeIslands` * Bugfix: renderer-lit missing files on npm (#1669) * Force Vite to rebuild dependencies (#1670) * [next] Add `preact/compat` renderer (#1668) * feat: add preact/compat entry for `@astrojs/renderer-preact` * Update index.js * Bugfix: plugin-astro-fetch tries to append node-fetch to node-fetch (#1671) * Fix Vite race condition (#1674) * Fix with-nanostore deps (#1675) Adds missing Solid renderer * [next] Fix `resolveDependency` on Windows (#1666) * fix: Windows issue with resolveDependency util * chore: add comment * Update CONTRIBUTING.md (#1677) * Prevent scanning a user's deps (#1678) * Prevent scanning a user's deps * Remove unused things * remove unused util * Adding a changeset for the remark plugin * Config changes needed for stater template (#1680) This does 2 things: 1. Adds prismjs as a dep. 2. Adds shiki as an external. * Next bugs (#1681) * fix(#1679): hoisted <script> rendering * fix(#1679): do not print global for styles, but do for scripts * fix: update ObjectSet implementation * fix: dedupe elements in sets * [next] update compiler (#1683) * chore: update compiler * chore: update compiler (again) * Fix Astro HMR bottleneck (#1684) * Bugfix: JSX renderers can be declared in any order (#1686) * chore: update compiler (#1690) * Exclude lit-server from being optimized (#1691) This should get the lit example working from `npm`. * fix: exclude all renderer server entrypoints (#1692) * chore: update compiler (#1705) * fix: do not crash when Markdown has no content (#1702) * feat: improve support for third-party React packages (#1701) * Remove prism warning when no language is provided (#1703) * Remove prism warning when no language is provided * Add the plaintext language instead * retry deploy * chore: enter prerelease mode under `next` (#1707) * Updates to the changesets (#1708) * Updates to the changesets * Adds a changeset for astro-prism Co-authored-by: Fred K. Schott <fkschott@gmail.com> Co-authored-by: Nate Moore <nate@skypack.dev> Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com> Co-authored-by: Pranav Karawale <52596591+obnoxiousnerd@users.noreply.github.com> Co-authored-by: Matthew Phillips <matthew@skypack.dev> Co-authored-by: Matthew Phillips <matthew@matthewphillips.info> Co-authored-by: Ryan Carniato <ryansolid@gmail.com> Co-authored-by: AsyncBanana <58297401+AsyncBanana@users.noreply.github.com> Co-authored-by: Jonathan Neal <jonathantneal@hotmail.com>
2021-10-29 14:30:22 -05:00
import { expect } from 'chai';
import { load as cheerioLoad } from 'cheerio';
import { isWindows, loadFixture } from '../../../astro/test/test-utils.js';
🚀 Astro Next (0.21.0) (#1406) * make astro-root uids unique * Move Astro to Vite * Update tests * More test improvements * fred fixes * Update compiler, improve tests * Fix runtime, improve code frame * Add Markdown support * Tycho fixes * Fred fixes part 2 * Throw Error for WIP Features * Improve testing suite * Allow users to pass config to Vite * Fix npm install (#1407) * Automate publish on merge (#1408) * Add NPM_TOKEN to publish script (#1409) * Create .npmrc * Clean up astro deps (#1411) * Use new renderers (#1412) * feat: update compiler (#1421) * Try mocha/chai test runners (#1418) * Try mocha/chai test runners * Disable failing smoke test for now Will revert when next can build docs * Enable mocha in parallel mode * Remove warning * Update docs * Fix Windows bug * Fix internal imports * Fix styles * Fix CI release on merge to next (#1427) * Fix logger locale parsing (#1439) * fix(logger): locale parsing * Fixed issue of compiler crash when "c" locale was encountered * Return default locale if parsed locale is less than 2 chars long * chore: add changeset * Apply changes from #1387 * Add back in support for children (#1486) * Add back in support for children * Be more careful * Enables most slot tests (#1494) * Enables most slot tests * Use spreadAttributes * Add hydration to Solid renderer (#1479) (#1495) * feat: add hydration to Solid renderer * fix: intersection observer, move script to the end Co-authored-by: Ryan Carniato <ryansolid@gmail.com> * [next] support Astro.slots API (#1516) * [next] Support for custom elements (#1528) * [next] Support for custom elements * Fix eslint errors * eslint again * [next] Fix Astro.fetchContent (#1480) * fix Astro.fetchContent * fix(fetchContent): cast type Co-authored-by: Nate Moore <nate@skypack.dev> * Move hydration to the compiler (#1547) * Move hydration to the compiler * Move extracting url, export to util fn * Brings back astro-dynamic tests (#1548) * Implements top-level Astro + Astro.resolve (#1556) * Implements top-level Astro + Astro.resolve * Fix linting * [next] Update renderers (#1509) * chore: update vite * fix(renderers): point renderers to resolved server/client entrypoints * Chore: Enable more tests with new compiler changes (#1558) * [Next] `fetch` support (#1563) * fix: polyfill fetch in every ssr scenario * test(fetch): update fetch tests * docs: update data fetching guide to remove caveats about `fetch` and isomorphic usage * refactor: update regex for clarity * Restructure (#1569) * Upgrade to @astrojs/compiler 0.2.0 (#1584) * Use Vite fork (#1585) * Use Vite fork * Fix linting * Move Vite to vendor/ and add a license * Fix linting * Include the dist folder * Update files config * Markdown compilation (#1593) * Markdown compilation * remove debugger * Gets lit hydration working (#1595) * Gets Astro.fetchContent compilation to work (#1596) * Gets Astro.fetchContent compilation to work This fixes Astro.fetchContent so that we handle esbuild transforming the name of the nested Astro call. * Remove debugging * Update the tests * Remove another debugger * Update Vite to latest (#1597) * Add Prism syntax highlighting (#1598) * Scoped styles with markdown (#1599) * Bugfix: fix getStaticPaths() cache miss (#1602) * Fix build order (#1609) * Bugfix: restore build to get all paths earlier, when build. Same as main. * Also re-add timings * [next] blog example fully working (#1610) * Add environment variables docs (Closes #873) (#1587) * Added environment variables docs (Closes #873) * Fixed prefix * Remove numbered comments (#1611) * Chore: remove numbered comments * Clean up block comments * comment style fixes (#1614) * [next] Upgrade compiler (#1619) * [next] Upgrade compiler * Upgrade to latest compiler * Fix the path to global css * Removed debugger * feat: add fragment support to vite-plugin-astro (#1600) * [next] fix `.tsx` handling (#1620) * fix: support tsx in JSX plugin * fix: preserve JSX via esbuild, only use Babel for JSX compilation * fix: handle upcoming Vite API for `ssr` flag * [next] Add CSS preprocessing (#1589) * Add concept for style support in Astro * Update style preprocessor to use new compiler * fix: massage preprocessStyle type * fix: @astrojs/compiler types Co-authored-by: Nate Moore <nate@skypack.dev> * fix issues in blog-multiple-authors (#1621) * Move Sass to deps (#1622) * Update renderer API for Vite (#1623) * Update renderer API for Vite * Fix lit-element tests * Clean up comments * Throw friendly error if renderer provides viteConfig in a bad format * Fix changesets (#1628) * Remove cheerio scanning from build stats (#1629) * Minor change to jsxTransformOptions, update Renderer API docs (#1630) * [next] docs example fully working (#1627) * [next] docs example fully working * Upgrade compiler to unlock docs * Add `class:list` directive (#1612) * Add support for class:list directive The `class:list` directive serializes an expression of css class names. For React components, `className:list` is also supported. * Remove `className` support and React tests * Add tests for the absence of omitted classes * fix: `define:vars` scoping for styles (#1632) * feat: fix Debug component (#1633) * [next] Fix `<Markdown>` component (#1631) * fix: cleanup issues with <Markdown> component * fix: fix `content` usage with Markdown * [next] Fix `<Code>` component (#1635) * fix: enable Code component * test: update expect to chai format * Fixes solid (#1634) * Fixes solid * Rename the test * Rebase with next * Skip solid test for now * Add support for markdown plugins (#1650) * Fix broken next release (#1652) * Prevent passing to Svelte components * Prevent passing class to Vue components * Add CSS injection, fix portfolio example (#1648) * Fix portfolio example * Add .pcss extension * Update load ssr opts * Update packages/astro/src/runtime/server/index.ts Co-authored-by: Jonathan Neal <jonathantneal@hotmail.com> Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com> Co-authored-by: Jonathan Neal <jonathantneal@hotmail.com> * Fixes external HMR (#1654) * Upgrade compiler version (#1655) Fixes docs and blog examples * Resolve renderers relative to the projectRoot (#1659) * Template fixes (#1656) * fix: dedupe hashes for identical islands (#1660) * fix: scope `define:vars` to `:root` for `<style global>` (#1663) * chore: update compiler to latest (#1664) * [next] fix island hydration inside of `<Markdown>` (#1665) * fix: create rehype plugin to smooth over island hydration bugs * refactor: remove debug code * chore: explain need for `rehypeIslands` * Bugfix: renderer-lit missing files on npm (#1669) * Force Vite to rebuild dependencies (#1670) * [next] Add `preact/compat` renderer (#1668) * feat: add preact/compat entry for `@astrojs/renderer-preact` * Update index.js * Bugfix: plugin-astro-fetch tries to append node-fetch to node-fetch (#1671) * Fix Vite race condition (#1674) * Fix with-nanostore deps (#1675) Adds missing Solid renderer * [next] Fix `resolveDependency` on Windows (#1666) * fix: Windows issue with resolveDependency util * chore: add comment * Update CONTRIBUTING.md (#1677) * Prevent scanning a user's deps (#1678) * Prevent scanning a user's deps * Remove unused things * remove unused util * Adding a changeset for the remark plugin * Config changes needed for stater template (#1680) This does 2 things: 1. Adds prismjs as a dep. 2. Adds shiki as an external. * Next bugs (#1681) * fix(#1679): hoisted <script> rendering * fix(#1679): do not print global for styles, but do for scripts * fix: update ObjectSet implementation * fix: dedupe elements in sets * [next] update compiler (#1683) * chore: update compiler * chore: update compiler (again) * Fix Astro HMR bottleneck (#1684) * Bugfix: JSX renderers can be declared in any order (#1686) * chore: update compiler (#1690) * Exclude lit-server from being optimized (#1691) This should get the lit example working from `npm`. * fix: exclude all renderer server entrypoints (#1692) * chore: update compiler (#1705) * fix: do not crash when Markdown has no content (#1702) * feat: improve support for third-party React packages (#1701) * Remove prism warning when no language is provided (#1703) * Remove prism warning when no language is provided * Add the plaintext language instead * retry deploy * chore: enter prerelease mode under `next` (#1707) * Updates to the changesets (#1708) * Updates to the changesets * Adds a changeset for astro-prism Co-authored-by: Fred K. Schott <fkschott@gmail.com> Co-authored-by: Nate Moore <nate@skypack.dev> Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com> Co-authored-by: Pranav Karawale <52596591+obnoxiousnerd@users.noreply.github.com> Co-authored-by: Matthew Phillips <matthew@skypack.dev> Co-authored-by: Matthew Phillips <matthew@matthewphillips.info> Co-authored-by: Ryan Carniato <ryansolid@gmail.com> Co-authored-by: AsyncBanana <58297401+AsyncBanana@users.noreply.github.com> Co-authored-by: Jonathan Neal <jonathantneal@hotmail.com>
2021-10-29 14:30:22 -05:00
let fixture;
describe('React Components', () => {
2021-12-22 16:11:05 -05:00
before(async () => {
fixture = await loadFixture({
root: new URL('./fixtures/react-component/', import.meta.url),
2021-12-22 16:11:05 -05:00
});
});
describe('build', () => {
before(async () => {
await fixture.build();
});
it('Can load React', async () => {
const html = await fixture.readFile('/index.html');
const $ = cheerioLoad(html);
2021-12-22 16:11:05 -05:00
// test 1: basic component renders
expect($('#react-static').text()).to.equal('Hello static!');
2021-12-22 16:11:05 -05:00
// test 2: no reactroot
expect($('#react-static').attr('data-reactroot')).to.equal(undefined);
2021-12-22 16:11:05 -05:00
// test 3: Can use function components
expect($('#arrow-fn-component')).to.have.lengthOf(1);
// test 4: Can use spread for components
expect($('#component-spread-props')).to.have.lengthOf(1);
// test 5: spread props renders
expect($('#component-spread-props').text(), 'Hello world!');
// test 6: Can use TS components
expect($('.ts-component')).to.have.lengthOf(1);
// test 7: Can use Pure components
expect($('#pure')).to.have.lengthOf(1);
// test 8: Check number of islands
expect($('astro-island[uid]')).to.have.lengthOf(9);
// test 9: Check island deduplication
const uniqueRootUIDs = new Set($('astro-island').map((i, el) => $(el).attr('uid')));
expect(uniqueRootUIDs.size).to.equal(8);
// test 10: Should properly render children passed as props
const islandsWithChildren = $('.with-children');
expect(islandsWithChildren).to.have.lengthOf(2);
2023-08-16 12:44:01 -05:00
expect($(islandsWithChildren[0]).html()).to.equal(
$(islandsWithChildren[1]).find('astro-slot').html()
);
// test 11: Should generate unique React.useId per island
const islandsWithId = $('.react-use-id');
expect(islandsWithId).to.have.lengthOf(2);
2023-05-04 09:25:03 -05:00
expect($(islandsWithId[0]).attr('id')).to.not.equal($(islandsWithId[1]).attr('id'));
2021-12-22 16:11:05 -05:00
});
it('Can load Vue', async () => {
const html = await fixture.readFile('/index.html');
const $ = cheerioLoad(html);
2021-12-22 16:11:05 -05:00
expect($('#vue-h2').text()).to.equal('Hasta la vista, baby');
});
it('Can use a pragma comment', async () => {
const html = await fixture.readFile('/pragma-comment/index.html');
const $ = cheerioLoad(html);
2021-12-22 16:11:05 -05:00
// test 1: rendered the PragmaComment component
expect($('.pragma-comment')).to.have.lengthOf(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);
2021-12-22 16:11:05 -05:00
const div = $('#research');
// test 1: has the hydration attr
expect(div.attr('data-reactroot')).to.be.ok;
// test 2: renders correctly
expect(div.html()).to.equal('foo bar <!-- -->1');
});
it('Can load Suspense-using components', async () => {
const html = await fixture.readFile('/suspense/index.html');
const $ = cheerioLoad(html);
expect($('#client #lazy')).to.have.lengthOf(1);
expect($('#server #lazy')).to.have.lengthOf(1);
});
it('Can pass through props with cloneElement', async () => {
const html = await fixture.readFile('/index.html');
const $ = cheerioLoad(html);
expect($('#cloned').text()).to.equal('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);
2023-08-16 12:44:01 -05:00
expect($('.with-children-count').text()).to.equal('2');
});
2021-12-22 16:11:05 -05:00
});
if (isWindows) return;
2021-12-22 16:11:05 -05:00
describe('dev', () => {
/** @type {import('../../../astro/test/test-utils.js').Fixture} */
2021-12-22 16:11:05 -05:00
let devServer;
before(async () => {
devServer = await fixture.startDevServer();
2021-12-22 16:11:05 -05:00
});
after(async () => {
2022-03-15 07:38:13 -05:00
await devServer.stop();
2021-12-22 16:11:05 -05:00
});
it('scripts proxy correctly', async () => {
const html = await fixture.fetch('/').then((res) => res.text());
const $ = cheerioLoad(html);
2021-12-22 16:11:05 -05:00
for (const script of $('script').toArray()) {
const { src } = script.attribs;
if (!src) continue;
expect((await fixture.fetch(src)).status, `404: ${src}`).to.equal(200);
}
});
// 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');
expect(html).to.include(
`[/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`
2021-12-22 16:11:05 -05:00
);
});
// 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
expect(jsxRuntime).to.be.ok;
});
it('When a nested component throws it does not crash the server', async () => {
const res = await fixture.fetch('/error-rendering');
await res.arrayBuffer();
});
2021-12-22 16:11:05 -05:00
});
2021-07-21 18:11:40 -05:00
});