Fixes using React.lazy and Suspense (withastro#3160)

* Revert "Revert "Fixes using React.lazy and Suspense"" This reverts commit e621c2f. * Adds a changeset * Fix ts errors * Remove netlify metadata folder
SiriousHunter · Apr 21, 2022 · b179b64 · b179b64
1 parent b4d4b11
commit b179b64
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 6 deletions.
diff --git a/test/fixtures/react-component/src/components/LazyComponent.jsx b/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/test/fixtures/react-component/src/components/Suspense.jsx 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 (
+    <div id="outer">
+      <Suspense>
+        <LazyComponent />
+      </Suspense>
+    </div>
+  );
+};
+
+export default ParentComponent;
diff --git a/test/fixtures/react-component/src/pages/suspense.astro b/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/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;