1- const assert = require ( 'assert' ) ;
2- const path = require ( 'path' ) ;
3- const { bundle, run} = require ( '@parcel/test-utils' ) ;
1+ import assert from 'assert' ;
2+ import path from 'path' ;
3+ import {
4+ bundle ,
5+ run ,
6+ overlayFS ,
7+ fsFixture ,
8+ assertBundles ,
9+ } from '@parcel/test-utils' ;
10+ import React from 'react' ;
11+ import ReactDOM from 'react-dom/server' ;
412
513describe ( 'mdx' , function ( ) {
14+ let count = 0 ;
15+ let dir ;
16+ beforeEach ( async ( ) => {
17+ dir = path . join ( __dirname , 'mdx' , '' + ++ count ) ;
18+ await overlayFS . mkdirp ( dir ) ;
19+ } ) ;
20+
21+ after ( async ( ) => {
22+ await overlayFS . rimraf ( path . join ( __dirname , 'mdx' ) ) ;
23+ } ) ;
24+
625 it ( 'should support bundling MDX' , async function ( ) {
726 let b = await bundle ( path . join ( __dirname , '/integration/mdx/index.mdx' ) ) ;
827
928 let output = await run ( b ) ;
1029 assert . equal ( typeof output . default , 'function' ) ;
11- assert ( output . default . isMDXComponent ) ;
1230 } ) ;
1331
1432 it ( 'should support bundling MDX with React 17' , async function ( ) {
@@ -18,6 +36,198 @@ describe('mdx', function () {
1836
1937 let output = await run ( b ) ;
2038 assert . equal ( typeof output . default , 'function' ) ;
21- assert ( output . default . isMDXComponent ) ;
39+ } ) ;
40+
41+ it ( 'should expose static exports on asset.meta' , async function ( ) {
42+ await fsFixture ( overlayFS , dir ) `
43+ index.mdx:
44+ export const navTitle = 'Hello';
45+
46+ # Testing
47+
48+ foo bar
49+ ` ;
50+
51+ let b = await bundle ( path . join ( dir , 'index.mdx' ) , { inputFS : overlayFS } ) ;
52+ let asset = b . getBundles ( ) [ 0 ] . getMainEntry ( ) ;
53+
54+ assert . deepEqual ( asset . meta . ssgMeta . exports , {
55+ navTitle : 'Hello' ,
56+ } ) ;
57+ } ) ;
58+
59+ it ( 'should expose table of contents on asset.meta' , async function ( ) {
60+ await fsFixture ( overlayFS , dir ) `
61+ index.mdx:
62+ # Testing
63+
64+ foo bar
65+
66+ ## Subtitle
67+
68+ another paragraph
69+
70+ ### Sub subtitle
71+
72+ yo
73+
74+ ## Another subtitle
75+
76+ yay
77+ ` ;
78+
79+ let b = await bundle ( path . join ( dir , 'index.mdx' ) , { inputFS : overlayFS } ) ;
80+ let asset = b . getBundles ( ) [ 0 ] . getMainEntry ( ) ;
81+
82+ assert . deepEqual ( asset . meta . ssgMeta . tableOfContents , [
83+ {
84+ level : 1 ,
85+ title : 'Testing' ,
86+ children : [
87+ {
88+ level : 2 ,
89+ title : 'Subtitle' ,
90+ children : [
91+ {
92+ level : 3 ,
93+ title : 'Sub subtitle' ,
94+ children : [ ] ,
95+ } ,
96+ ] ,
97+ } ,
98+ {
99+ level : 2 ,
100+ title : 'Another subtitle' ,
101+ children : [ ] ,
102+ } ,
103+ ] ,
104+ } ,
105+ ] ) ;
106+ } ) ;
107+
108+ it ( 'should support dependencies' , async function ( ) {
109+ await fsFixture ( overlayFS , dir ) `
110+ index.mdx:
111+ Testing [urls](another.mdx).
112+
113+ <audio src="some.mp3" />
114+
115+ another.mdx:
116+ Another mdx file with an image.
117+
118+ 
119+
120+ img.png:
121+
122+ some.mp3:
123+ ` ;
124+
125+ let b = await bundle ( path . join ( dir , 'index.mdx' ) , { inputFS : overlayFS } ) ;
126+ assertBundles (
127+ b ,
128+ [
129+ {
130+ name : 'index.js' ,
131+ assets : [ 'index.mdx' , 'bundle-url.js' ] ,
132+ } ,
133+ {
134+ name : 'another.js' ,
135+ assets : [ 'another.mdx' , 'bundle-url.js' ] ,
136+ } ,
137+ {
138+ assets : [ 'img.png' ] ,
139+ } ,
140+ {
141+ assets : [ 'some.mp3' ] ,
142+ } ,
143+ ] ,
144+ { skipNodeModules : true } ,
145+ ) ;
146+ } ) ;
147+
148+ it ( 'should support code block props' , async function ( ) {
149+ await fsFixture ( overlayFS , dir ) `
150+ index.mdx:
151+ \`\`\`tsx boolean string="hi" value={2}
152+ console.log("hi");
153+ \`\`\`
154+ ` ;
155+
156+ let b = await bundle ( path . join ( dir , 'index.mdx' ) , { inputFS : overlayFS } ) ;
157+ let output = await run ( b ) ;
158+ let codeBlockProps ;
159+ function CodeBlock ( v ) {
160+ codeBlockProps = v ;
161+ return < pre > { v . children } </ pre > ;
162+ }
163+ let res = ReactDOM . renderToStaticMarkup (
164+ React . createElement ( output . default , { components : { CodeBlock} } ) ,
165+ ) ;
166+ assert . equal ( res , '<pre>console.log("hi");</pre>' ) ;
167+ assert . deepEqual ( codeBlockProps , {
168+ boolean : true ,
169+ string : 'hi' ,
170+ value : 2 ,
171+ lang : 'tsx' ,
172+ children : 'console.log("hi");' ,
173+ } ) ;
174+ } ) ;
175+
176+ it ( 'should support rendering code blocks' , async function ( ) {
177+ await fsFixture ( overlayFS , dir ) `
178+ index.mdx:
179+ \`\`\`tsx render
180+ <div>Hello</div>
181+ \`\`\`
182+ package.json:
183+ {"dependencies": {"react": "^19"}}
184+ ` ;
185+
186+ let b = await bundle ( path . join ( dir , 'index.mdx' ) , { inputFS : overlayFS } ) ;
187+ let output = await run ( b ) ;
188+ let res = ReactDOM . renderToStaticMarkup (
189+ React . createElement ( output . default ) ,
190+ ) ;
191+ assert . equal (
192+ res ,
193+ '<pre><code class="language-tsx"><div>Hello</div></code></pre><div>Hello</div>' ,
194+ ) ;
195+ } ) ;
196+
197+ it ( 'should support rendering CSS' , async function ( ) {
198+ await fsFixture ( overlayFS , dir ) `
199+ index.mdx:
200+ \`\`\`css render
201+ .foo { color: red }
202+ \`\`\`
203+ ` ;
204+
205+ let b = await bundle ( path . join ( dir , 'index.mdx' ) , { inputFS : overlayFS } ) ;
206+ assertBundles (
207+ b ,
208+ [
209+ {
210+ name : 'index.js' ,
211+ assets : [ 'index.mdx' , 'mdx-components.jsx' ] ,
212+ } ,
213+ {
214+ name : 'index.css' ,
215+ assets : [ 'index.mdx' ] ,
216+ } ,
217+ ] ,
218+ { skipNodeModules : true } ,
219+ ) ;
220+
221+ let output = await run ( b ) ;
222+ let res = ReactDOM . renderToStaticMarkup (
223+ React . createElement ( output . default ) ,
224+ ) ;
225+ assert . equal (
226+ res ,
227+ '<pre><code class="language-css">.foo { color: red }</code></pre>' ,
228+ ) ;
229+
230+ let css = await overlayFS . readFile ( b . getBundles ( ) [ 1 ] . filePath , 'utf8' ) ;
231+ assert ( css . includes ( 'color: red' ) ) ;
22232 } ) ;
23233} ) ;
0 commit comments