Add experimentalReactChildren option to React integration (#8082)

* wip: support true react vnodes in renderer

* Add new experimentalReactChildren option to React integration

* Update the test

* Add docs

* Update packages/integrations/react/server.js

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Update with a better test

* Update .changeset/yellow-snakes-jam.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update packages/integrations/react/README.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update packages/integrations/react/README.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

---------

Co-authored-by: Nate Moore <nate@astro.build>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

1 files changed, 10 insertions, 4 deletions

diff --git a/packages/astro/test/react-component.test.js b/packages/integrations/react/test/react-component.test.js
index a6bb8cfae..da7fa018a 100644
--- a/packages/astro/test/react-component.test.js
+++ b/packages/integrations/react/test/react-component.test.js
@@ -1,13 +1,13 @@
 import { expect } from 'chai';
 import { load as cheerioLoad } from 'cheerio';
-import { isWindows, loadFixture } from './test-utils.js';
+import { isWindows, loadFixture } from '../../../astro/test/test-utils.js';
 
 let fixture;
 
 describe('React Components', () => {
 	before(async () => {
 		fixture = await loadFixture({
-			root: './fixtures/react-component/',
+			root: new URL('./fixtures/react-component/', import.meta.url),
 		});
 	});
 
@@ -51,7 +51,7 @@ describe('React Components', () => {
 			// test 10: Should properly render children passed as props
 			const islandsWithChildren = $('.with-children');
 			expect(islandsWithChildren).to.have.lengthOf(2);
-			expect($(islandsWithChildren[0]).html()).to.equal($(islandsWithChildren[1]).html());
+			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');
@@ -99,12 +99,18 @@ describe('React Components', () => {
 			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);
+			expect($(".with-children-count").text()).to.equal('2');
+		})
 	});
 
 	if (isWindows) return;
 
 	describe('dev', () => {
-		/** @type {import('./test-utils').Fixture} */
+		/** @type {import('../../../astro/test/test-utils.js').Fixture} */
 		let devServer;
 
 		before(async () => {