test: add e2e test for mf

umijs · Feb 8, 2025 · aba1029 · aba1029
1 parent 2a9df44
commit aba1029
Show file tree

Hide file tree

Showing 18 changed files with 224 additions and 6 deletions.
diff --git a/e2e/fixtures/module-federation.consumer/.gitignore b/e2e/fixtures/module-federation.consumer/.gitignore
@@ -0,0 +1,2 @@
+dist
+node_modules
diff --git a/e2e/fixtures/module-federation.consumer/expect.js b/e2e/fixtures/module-federation.consumer/expect.js
@@ -0,0 +1,22 @@
+const assert = require("assert");
+const { parseBuildResult } = require("../../../scripts/test-utils");
+const { files } = parseBuildResult(__dirname);
+
+const manifest = JSON.parse(files["mf-manifest.json"]);
+
+assert(
+  manifest.remotes[0].alias === 'producer'
+  && manifest.remotes[0].federationContainerName === 'producer'
+  && manifest.remotes[0].moduleName === 'App',
+  "should include mf remotes info"
+)
+
+assert(
+  manifest.shared.map(s => s.name).sort().join(",") === "react,react-dom",
+  "should include mf shared dependencies"
+)
+
+assert(
+  manifest.shared.every(s => s.assets.js.sync.length !== 0),
+  "should include mf shared assets"
+)
diff --git a/e2e/fixtures/module-federation.consumer/mako.config.json b/e2e/fixtures/module-federation.consumer/mako.config.json
@@ -0,0 +1,15 @@
+{
+  "entry": {
+    "app1": "./src/index.ts"
+  },
+  "minify": false,
+  "moduleFederation": {
+    "name": "consumer",
+    "remotes": {
+      "producer": "producer@http://localhost:3000/remoteEntry.js"
+    },
+    "shared": { "react": { "eager": true }, "react-dom": { "eager": true } },
+    "manifest": true,
+    "implementation": "../../../../../packages/mako/node_modules/@module-federation/webpack-bundler-runtime"
+  }
+}
diff --git a/e2e/fixtures/module-federation.consumer/package.json b/e2e/fixtures/module-federation.consumer/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "mf-consumer",
+  "version": "0.0.1",
+  "dependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0"
+  }
+}
diff --git a/e2e/fixtures/module-federation.consumer/public/index.html b/e2e/fixtures/module-federation.consumer/public/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html lang="en">
+  <body>
+    <div id="root"></div>
+    <script src="app1.js"></script>
+  </body>
+</html>
diff --git a/e2e/fixtures/module-federation.consumer/src/App.tsx b/e2e/fixtures/module-federation.consumer/src/App.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+// @ts-ignore
+const RemoteComp = React.lazy(() => import('producer/App'));
+
+const App = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <div
+        style={{
+          margin: '10px',
+          padding: '10px',
+          textAlign: 'center',
+          backgroundColor: 'greenyellow',
+        }}
+      >
+        <h1>Consumer App</h1>
+      </div>
+      <React.Suspense>
+        <RemoteComp />
+      </React.Suspense>
+    </div>
+  );
+};
+
+export default App;
diff --git a/e2e/fixtures/module-federation.consumer/src/bootstrap.tsx b/e2e/fixtures/module-federation.consumer/src/bootstrap.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/e2e/fixtures/module-federation.consumer/src/index.ts b/e2e/fixtures/module-federation.consumer/src/index.ts
@@ -0,0 +1 @@
+import './bootstrap';
diff --git a/e2e/fixtures/module-federation.producer/.gitignore b/e2e/fixtures/module-federation.producer/.gitignore
@@ -0,0 +1,2 @@
+dist
+node_modules
diff --git a/e2e/fixtures/module-federation.producer/expect.js b/e2e/fixtures/module-federation.producer/expect.js
@@ -0,0 +1,30 @@
+const assert = require("assert");
+const { parseBuildResult } = require("../../../scripts/test-utils");
+const { files } = parseBuildResult(__dirname);
+
+const manifest = JSON.parse(files["mf-manifest.json"]);
+
+assert(
+  manifest.metaData.remoteEntry.name === 'remoteEntry.js',
+  "should generate mf contanier entry"
+)
+
+assert(
+  manifest.exposes[0].name === 'App',
+  "should include mf exposes"
+)
+
+assert(
+  manifest.exposes[0].assets.js.sync.length !== 0,
+  "should include mf exposes assets"
+)
+
+assert(
+  manifest.shared.map(s => s.name).sort().join(",") === "react,react-dom",
+  "should include mf shared dependencies"
+)
+
+assert(
+  manifest.shared.every(s => s.assets.js.sync.length !== 0),
+  "should include mf shared assets"
+)
diff --git a/e2e/fixtures/module-federation.producer/mako.config.json b/e2e/fixtures/module-federation.producer/mako.config.json
@@ -0,0 +1,16 @@
+{
+  "entry": {
+    "app2": "./src/index.ts"
+  },
+  "publicPath": "auto",
+  "moduleFederation": {
+    "name": "producer",
+    "filename": "remoteEntry.js",
+    "exposes": {
+      "./App": "./src/App.tsx"
+    },
+    "shared": { "react": {}, "react-dom": {} },
+    "manifest": true,
+    "implementation": "../../../../../packages/mako/node_modules/@module-federation/webpack-bundler-runtime"
+  }
+}
diff --git a/e2e/fixtures/module-federation.producer/package.json b/e2e/fixtures/module-federation.producer/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "mf-producer",
+  "version": "0.0.1",
+  "dependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0"
+  }
+}
diff --git a/e2e/fixtures/module-federation.producer/public/index.html b/e2e/fixtures/module-federation.producer/public/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html lang="en">
+  <body>
+    <div id="root"></div>
+    <script src="app2.js"></script>
+  </body>
+</html>
diff --git a/e2e/fixtures/module-federation.producer/src/App.tsx b/e2e/fixtures/module-federation.producer/src/App.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const App = () => {
+  return (
+    <div
+      style={{
+        margin: '10px',
+        padding: '10px',
+        textAlign: 'center',
+        backgroundColor: 'cyan',
+      }}
+    >
+      <h1>Widget App2</h1>
+    </div>
+  );
+};
+
+export default App;
diff --git a/e2e/fixtures/module-federation.producer/src/bootstrap.tsx b/e2e/fixtures/module-federation.producer/src/bootstrap.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/e2e/fixtures/module-federation.producer/src/index.ts b/e2e/fixtures/module-federation.producer/src/index.ts
@@ -0,0 +1 @@
+import('./bootstrap');
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -3,7 +3,7 @@ packages:
   - "client"
   - "crates/binding"
   - "packages/*"
-  - "crates/mako/test/compile/auto-code-splitting"
+  - "e2e/fixtures/module-federation.*"
   - "e2e/fixtures.umi/react-16"
   - "e2e/fixtures.umi/config.less.plugins"
   - "e2e/fixtures.umi/stable-hash"