diff --git a/test/fixtures/react-component/src/components/LazyComponent.jsx b/test/fixtures/react-component/src/components/LazyComponent.jsx
new file mode 100644
index 000000000000..b43aa36be6b8
--- /dev/null
+++ b/test/fixtures/react-component/src/components/LazyComponent.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const LazyComponent = () => {
+ return (
+ inner content
+ );
+};
+
+export default LazyComponent;
diff --git a/test/fixtures/react-component/src/components/Suspense.jsx b/test/fixtures/react-component/src/components/Suspense.jsx
new file mode 100644
index 000000000000..87dc82625eb8
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ );
+};
+
+export default ParentComponent;
diff --git a/test/fixtures/react-component/src/pages/suspense.astro b/test/fixtures/react-component/src/pages/suspense.astro
new file mode 100644
index 000000000000..5a9d156443d6
--- /dev/null
+++ b/test/fixtures/react-component/src/pages/suspense.astro
@@ -0,0 +1,17 @@
+---
+import Suspense from '../components/Suspense.jsx';
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/react-component.test.js b/test/react-component.test.js
index bb67f3df2e38..749fc0c16575 100644
--- a/test/react-component.test.js
+++ b/test/react-component.test.js
@@ -1,5 +1,5 @@
import { expect } from 'chai';
-import cheerio from 'cheerio';
+import { load as cheerioLoad } from 'cheerio';
import { isWindows, loadFixture } from './test-utils.js';
let fixture;
@@ -18,7 +18,7 @@ describe('React Components', () => {
it('Can load React', async () => {
const html = await fixture.readFile('/index.html');
- const $ = cheerio.load(html);
+ const $ = cheerioLoad(html);
// test 1: basic component renders
expect($('#react-static').text()).to.equal('Hello static!');
@@ -51,13 +51,13 @@ describe('React Components', () => {
it('Can load Vue', async () => {
const html = await fixture.readFile('/index.html');
- const $ = cheerio.load(html);
+ const $ = cheerioLoad(html);
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 $ = cheerio.load(html);
+ const $ = cheerioLoad(html);
// test 1: rendered the PragmaComment component
expect($('.pragma-comment')).to.have.lengthOf(2);
@@ -66,7 +66,7 @@ describe('React Components', () => {
// TODO: is this still a relevant test?
it.skip('Includes reactroot on hydrating components', async () => {
const html = await fixture.readFile('/index.html');
- const $ = cheerio.load(html);
+ const $ = cheerioLoad(html);
const div = $('#research');
@@ -76,6 +76,13 @@ describe('React Components', () => {
// 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);
+ });
});
if (isWindows) return;
@@ -93,7 +100,7 @@ describe('React Components', () => {
it('scripts proxy correctly', async () => {
const html = await fixture.fetch('/').then((res) => res.text());
- const $ = cheerio.load(html);
+ const $ = cheerioLoad(html);
for (const script of $('script').toArray()) {
const { src } = script.attribs;