react-component.test.js — astro Source File

Source Code

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
// ... (124 more lines)