diff --git a/packages/integrations/mdx/test/fixtures/mdx-utils-jsToMdxTreeNode/astro.config.mjs b/packages/integrations/mdx/test/fixtures/mdx-utils-jsToMdxTreeNode/astro.config.mjs
new file mode 100644
index 000000000..b0774efd6
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-utils-jsToMdxTreeNode/astro.config.mjs
@@ -0,0 +1,23 @@
+import mdx from '@astrojs/mdx';
+import { jsToMdxTreeNode } from '@astrojs/mdx/utils';
+
+export default {
+ site: 'https://mdx-is-neat.com/',
+ markdown: {
+ syntaxHighlight: false,
+ },
+ integrations: [mdx({
+ remarkPlugins: [
+ function injectComponentsExport() {
+ const titlePath = new URL('./src/components/Title.astro', import.meta.url).pathname;
+ return (tree) => {
+ tree.children.unshift(
+ jsToMdxTreeNode(`
+ import Title from ${JSON.stringify(titlePath)};
+ export const components = { h1: Title };
+ `));
+ };
+ }
+ ]
+ })],
+}
diff --git a/packages/integrations/mdx/test/fixtures/mdx-utils-jsToMdxTreeNode/package.json b/packages/integrations/mdx/test/fixtures/mdx-utils-jsToMdxTreeNode/package.json
new file mode 100644
index 000000000..6a83be3e3
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-utils-jsToMdxTreeNode/package.json
@@ -0,0 +1,7 @@
+{
+ "name": "@test/mdx-utils-jstomdxtreenode",
+ "dependencies": {
+ "astro": "workspace:*",
+ "@astrojs/mdx": "workspace:*"
+ }
+}
diff --git a/packages/integrations/mdx/test/fixtures/mdx-utils-jsToMdxTreeNode/src/components/Title.astro b/packages/integrations/mdx/test/fixtures/mdx-utils-jsToMdxTreeNode/src/components/Title.astro
new file mode 100644
index 000000000..e6dc381e2
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-utils-jsToMdxTreeNode/src/components/Title.astro
@@ -0,0 +1 @@
+
diff --git a/packages/integrations/mdx/test/fixtures/mdx-utils-jsToMdxTreeNode/src/pages/index.mdx b/packages/integrations/mdx/test/fixtures/mdx-utils-jsToMdxTreeNode/src/pages/index.mdx
new file mode 100644
index 000000000..c6c91f4ec
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-utils-jsToMdxTreeNode/src/pages/index.mdx
@@ -0,0 +1,3 @@
+# Injected header test
+
+Let's see if that header maps to our Astro component!
diff --git a/packages/integrations/mdx/test/mdx-utils-jsToMdxTreeNode.test.js b/packages/integrations/mdx/test/mdx-utils-jsToMdxTreeNode.test.js
new file mode 100644
index 000000000..373fd08c1
--- /dev/null
+++ b/packages/integrations/mdx/test/mdx-utils-jsToMdxTreeNode.test.js
@@ -0,0 +1,22 @@
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+describe('MDX utils - jsToMdxTreeNode', () => {
+ let fixture;
+
+ before(async () => {
+ fixture = await loadFixture({
+ root: new URL('./fixtures/mdx-utils-jsToMdxTreeNode/', import.meta.url),
+ });
+
+ await fixture.build();
+ });
+
+ it('Successfully injects title component export', async () => {
+ const html = await fixture.readFile('/index.html');
+ const { document } = parseHTML(html);
+
+ expect(document.querySelector('[data-is-title-component]')).to.not.be.null;
+ });
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 116192d3c..0f827adbf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2539,6 +2539,14 @@ importers:
'@astrojs/react': link:../../../../react
astro: link:../../../../../astro
+ packages/integrations/mdx/test/fixtures/mdx-utils-jsToMdxTreeNode:
+ specifiers:
+ '@astrojs/mdx': workspace:*
+ astro: workspace:*
+ dependencies:
+ '@astrojs/mdx': link:../../..
+ astro: link:../../../../../astro
+
packages/integrations/mdx/test/fixtures/mdx-vite-env-vars:
specifiers:
'@astrojs/mdx': workspace:*