test(e2e): add e2e cases for MDX (#1552)

e2e/cases/mdx/preact/index.test.ts

@@ -0,0 +1,17 @@
+import { expect } from '@playwright/test';
+import { build, gotoPage, rspackOnlyTest } from '@e2e/helper';
+
+rspackOnlyTest('should render MDX with Preact correctly', async ({ page }) => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    runServer: true,
+  });
+
+  await gotoPage(page, rsbuild);
+  expect(await page.innerHTML('h1')).toEqual('Hello, world!');
+  expect(await page.innerHTML('#test')).toEqual(
+    '<p style="padding: 1rem;">Test</p>',
+  );
+
+  await rsbuild.close();
+});

e2e/cases/mdx/preact/rsbuild.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginPreact } from '@rsbuild/plugin-preact';
+import { pluginMdx } from '@rsbuild/plugin-mdx';
+
+export default defineConfig({
+  plugins: [
+    pluginPreact(),
+    pluginMdx({
+      mdxLoaderOptions: {
+        jsxImportSource: 'preact',
+      },
+    }),
+  ],
+});

e2e/cases/mdx/preact/src/app.mdx

@@ -0,0 +1,7 @@
+# Hello, world!
+
+Below is an example of markdown in JSX.
+
+<div id="test">
+  <p style={{ padding: '1rem' }}>Test</p>
+</div>

e2e/cases/mdx/preact/src/index.jsx

@@ -0,0 +1,4 @@
+import { render } from 'preact';
+import App from './app';
+
+render(<App />, document.getElementById('root'));

e2e/cases/mdx/react/index.test.ts

@@ -0,0 +1,17 @@
+import { expect } from '@playwright/test';
+import { build, gotoPage, rspackOnlyTest } from '@e2e/helper';
+
+rspackOnlyTest('should render MDX with React correctly', async ({ page }) => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    runServer: true,
+  });
+
+  await gotoPage(page, rsbuild);
+  expect(await page.innerHTML('h1')).toEqual('Hello, world!');
+  expect(await page.innerHTML('#test')).toEqual(
+    '<p style="padding: 1rem;">Test</p>',
+  );
+
+  await rsbuild.close();
+});

e2e/cases/mdx/react/rsbuild.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginMdx } from '@rsbuild/plugin-mdx';
+
+export default defineConfig({
+  plugins: [pluginReact(), pluginMdx()],
+});

e2e/cases/mdx/react/src/app.mdx

@@ -0,0 +1,7 @@
+# Hello, world!
+
+Below is an example of markdown in JSX.
+
+<div id="test">
+  <p style={{ padding: '1rem' }}>Test</p>
+</div>

e2e/cases/mdx/react/src/index.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './app';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);

e2e/cases/mdx/vue/index.test.ts

@@ -0,0 +1,17 @@
+import { expect } from '@playwright/test';
+import { build, gotoPage, rspackOnlyTest } from '@e2e/helper';
+
+rspackOnlyTest('should render MDX with Vue correctly', async ({ page }) => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    runServer: true,
+  });
+
+  await gotoPage(page, rsbuild);
+  expect(await page.innerHTML('h1')).toEqual('Hello, world!');
+  expect(await page.innerHTML('#test')).toEqual(
+    '<p style="padding: 1rem;">Test</p>',
+  );
+
+  await rsbuild.close();
+});

e2e/cases/mdx/vue/rsbuild.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginVue } from '@rsbuild/plugin-vue';
+import { pluginMdx } from '@rsbuild/plugin-mdx';
+
+export default defineConfig({
+  plugins: [
+    pluginVue(),
+    pluginMdx({
+      mdxLoaderOptions: {
+        jsxImportSource: 'vue',
+      },
+    }),
+  ],
+});

e2e/cases/mdx/vue/src/app.mdx

@@ -0,0 +1,7 @@
+# Hello, world!
+
+Below is an example of markdown in JSX.
+
+<div id="test">
+  <p style={{ padding: '1rem' }}>Test</p>
+</div>

e2e/cases/mdx/vue/src/index.jsx

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './app';
+
+createApp(App).mount('#root');

e2e/cases/mjs-artifact/test.mjs

@@ -21,6 +21,7 @@ import { pluginVueJsx } from '@rsbuild/plugin-vue-jsx';
 import { pluginVue2Jsx } from '@rsbuild/plugin-vue2-jsx';
 import { pluginToml } from '@rsbuild/plugin-toml';
 import { pluginYaml } from '@rsbuild/plugin-yaml';
+import { pluginMdx } from '@rsbuild/plugin-mdx';
 
 export default {
   pluginAssetsRetry,
@@ -46,4 +47,5 @@ export default {
   pluginVue2Jsx,
   pluginToml,
   pluginYaml,
+  pluginMdx,
 };

e2e/package.json

@@ -14,6 +14,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.17.0",
+    "solid-js": "^1.8.5",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },
@@ -26,6 +27,7 @@
     "@rsbuild/plugin-check-syntax": "workspace:*",
     "@rsbuild/plugin-css-minimizer": "workspace:*",
     "@rsbuild/plugin-image-compress": "workspace:*",
+    "@rsbuild/plugin-mdx": "workspace:*",
     "@rsbuild/plugin-node-polyfill": "workspace:*",
     "@rsbuild/plugin-preact": "workspace:*",
     "@rsbuild/plugin-pug": "workspace:*",