7 files changed, 121 insertions, 0 deletions
diff --git a/packages/integrations/mdx/test/astro-content-css.test.js b/packages/integrations/mdx/test/astro-content-css.test.js
new file mode 100644
index 000000000..7168795cd
--- /dev/null
+++ b/packages/integrations/mdx/test/astro-content-css.test.js
@@ -0,0 +1,46 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+import mdx from '@astrojs/mdx';
+
+describe('build css from the component', async () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({ root: new URL('./fixtures/astro-content-css/', import.meta.url),integrations: [mdx()], });
+		await fixture.build();
+	});
+
+	describe('Build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('including css and js from the component in pro', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+			expect($('link[href$=".css"]').attr('href')).to.match(/^\/_astro\//);
+			expect($('script[src$=".js"]').attr('src')).to.match(/^\/_astro\//);
+		});
+	})
+
+	describe('Dev', () => {
+		let devServer
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			devServer.stop();
+		});
+
+		it('ncluding css and js from the component in Dev', async () => {
+			let res = await fixture.fetch(`/`);
+			expect(res.status).to.equal(200);
+			const html = await res.text();
+			const $ = cheerio.load(html);
+			expect($.html()).to.include('CornflowerBlue');
+			expect($('script[src$=".js"]').attr('src')).to.include('astro');
+		});
+	})
+})
diff --git a/packages/integrations/mdx/test/fixtures/astro-content-css/astro.config.mjs b/packages/integrations/mdx/test/fixtures/astro-content-css/astro.config.mjs
new file mode 100644
index 000000000..b67da09a9
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/astro-content-css/astro.config.mjs
@@ -0,0 +1,11 @@
+import { defineConfig } from 'astro/config';
+
+import mdx from "@astrojs/mdx";
+
+// https://astro.build/config
+export default defineConfig({
+  build: {
+    format: 'file'
+  },
+  integrations: [mdx()]
+});
diff --git a/packages/integrations/mdx/test/fixtures/astro-content-css/package.json b/packages/integrations/mdx/test/fixtures/astro-content-css/package.json
new file mode 100644
index 000000000..8d436998c
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/astro-content-css/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/astro-content-css",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/mdx": "workspace:*"
+  }
+}
diff --git a/packages/integrations/mdx/test/fixtures/astro-content-css/src/content/config.ts b/packages/integrations/mdx/test/fixtures/astro-content-css/src/content/config.ts
new file mode 100644
index 000000000..bf1a34c05
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/astro-content-css/src/content/config.ts
@@ -0,0 +1,12 @@
+// 1. Import utilities from `astro:content`
+import { z, defineCollection } from 'astro:content';
+// 2. Define a schema for each collection you'd like to validate.
+const dynamicCollection = defineCollection({
+  schema: z.object({
+    title: z.string(),
+  }),
+});
+// 3. Export a single `collections` object to register your collection(s)
+export const collections = {
+  dynamic: dynamicCollection,
+};
diff --git a/packages/integrations/mdx/test/fixtures/astro-content-css/src/content/dynamic/FirstComponentWithJS.astro b/packages/integrations/mdx/test/fixtures/astro-content-css/src/content/dynamic/FirstComponentWithJS.astro
new file mode 100644
index 000000000..f3b588b42
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/astro-content-css/src/content/dynamic/FirstComponentWithJS.astro
@@ -0,0 +1,18 @@
+---
+const { text } = Astro.props;
+---
+<!DOCTYPE html>
+<html lang="en">
+	<head><meta charset="utf-8" /></head>
+	<body>
+    <div id="first">1st components with js. Props: {text}. <span>Styles</span>. JS: </div>
+	</body>
+</html>
+<script>
+  document.querySelector('#first').innerHTML += 'works';
+</script>
+<style>
+  #first > span {
+    color: CornflowerBlue;
+  }
+</style>
+\ No newline at end of file
diff --git a/packages/integrations/mdx/test/fixtures/astro-content-css/src/content/dynamic/first-component-with-js.mdx b/packages/integrations/mdx/test/fixtures/astro-content-css/src/content/dynamic/first-component-with-js.mdx
new file mode 100644
index 000000000..0abdfbe3a
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/astro-content-css/src/content/dynamic/first-component-with-js.mdx
@@ -0,0 +1,9 @@
+---
+title: 'First component'
+---
+
+import FirstDynamicComponentWithJS from './FirstComponentWithJS.astro';
+
+<FirstDynamicComponentWithJS text={props.mdProps} />
+
+Additional text from mdx 'first-component-with-js'
diff --git a/packages/integrations/mdx/test/fixtures/astro-content-css/src/pages/index.astro b/packages/integrations/mdx/test/fixtures/astro-content-css/src/pages/index.astro
new file mode 100644
index 000000000..63ea9ddbb
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/astro-content-css/src/pages/index.astro
@@ -0,0 +1,16 @@
+---
+import { getCollection } from 'astro:content';
+
+const entries = await getCollection('dynamic');
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head><meta charset="utf-8" /></head>
+	<body>
+		{entries.map(async entry => {
+			const { Content } = await entry.render();
+			return <Content mdProps="work" />; 
+		})}
+	</body>
+</html>