1 files changed, 41 insertions, 0 deletions
diff --git a/packages/astro/test/hydration-race.test.js b/packages/astro/test/hydration-race.test.js
new file mode 100644
index 000000000..b41219b25
--- /dev/null
+++ b/packages/astro/test/hydration-race.test.js
@@ -0,0 +1,41 @@
+import assert from 'node:assert/strict';
+import { before, describe, it } from 'node:test';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Hydration script ordering', async () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({ root: './fixtures/hydration-race' });
+		await fixture.build();
+	});
+
+	it('Places the hydration script before the first island', async () => {
+		let html = await fixture.readFile('/index.html');
+		let $ = cheerio.load(html);
+
+		// First, let's make sure all islands rendered (or test is bad)
+		assert.equal($('astro-island').length, 3);
+
+		// Now let's make sure the hydration script is placed before the first component
+		let firstIsland = $($('astro-island').get(0));
+		let prevSibling = firstIsland.prev();
+		assert.equal(prevSibling.prop('tagName'), 'SCRIPT');
+
+		// Sanity check that we're only rendering them once.
+		assert.equal($('style').length, 1, 'hydration style added once');
+		assert.equal($('script').length, 2, 'only 2 hydration scripts needed');
+	});
+
+	it('Hydration script included when inside dynamic slot', async () => {
+		let html = await fixture.readFile('/slot/index.html');
+		let $ = cheerio.load(html);
+
+		// First, let's make sure all islands rendered
+		assert.equal($('astro-island').length, 1);
+
+		// There should be 2 scripts: directive and astro island
+		assert.equal($('script').length, 2);
+	});
+});