From 4e2d51e8a3ddd8719fb1078d59e56d95dea96be8 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Sat, 8 Apr 2023 08:12:35 +0530 Subject: [PATCH] test: add case for ModuleFederationPlugin usage with shareScope option --- .../module-federation-with-shareScope/App.js | 10 +++ .../ComponentB.js | 5 ++ .../ComponentC.js | 7 ++ .../index.js | 20 ++++++ .../node_modules/package.json | 3 + .../node_modules/react.js | 3 + .../package.json | 9 +++ .../test.config.js | 5 ++ .../upgrade-react.js | 5 ++ .../webpack.config.js | 68 +++++++++++++++++++ 10 files changed, 135 insertions(+) create mode 100644 test/configCases/container/module-federation-with-shareScope/App.js create mode 100644 test/configCases/container/module-federation-with-shareScope/ComponentB.js create mode 100644 test/configCases/container/module-federation-with-shareScope/ComponentC.js create mode 100644 test/configCases/container/module-federation-with-shareScope/index.js create mode 100644 test/configCases/container/module-federation-with-shareScope/node_modules/package.json create mode 100644 test/configCases/container/module-federation-with-shareScope/node_modules/react.js create mode 100644 test/configCases/container/module-federation-with-shareScope/package.json create mode 100644 test/configCases/container/module-federation-with-shareScope/test.config.js create mode 100644 test/configCases/container/module-federation-with-shareScope/upgrade-react.js create mode 100644 test/configCases/container/module-federation-with-shareScope/webpack.config.js diff --git a/test/configCases/container/module-federation-with-shareScope/App.js b/test/configCases/container/module-federation-with-shareScope/App.js new file mode 100644 index 00000000000..43f44221946 --- /dev/null +++ b/test/configCases/container/module-federation-with-shareScope/App.js @@ -0,0 +1,10 @@ +import React from "react"; +import ComponentA from "containerA/ComponentA"; +import ComponentB from "containerB/ComponentB"; +import LocalComponentB from "./ComponentB"; + +export default () => { + return `App rendered with [${React()}] and [${ComponentA()}] and [${ComponentB()}]`; +}; + +expect(ComponentB).not.toBe(LocalComponentB); diff --git a/test/configCases/container/module-federation-with-shareScope/ComponentB.js b/test/configCases/container/module-federation-with-shareScope/ComponentB.js new file mode 100644 index 00000000000..1943469c746 --- /dev/null +++ b/test/configCases/container/module-federation-with-shareScope/ComponentB.js @@ -0,0 +1,5 @@ +import React from "react"; + +export default () => { + return `ComponentB rendered with [${React()}]`; +}; diff --git a/test/configCases/container/module-federation-with-shareScope/ComponentC.js b/test/configCases/container/module-federation-with-shareScope/ComponentC.js new file mode 100644 index 00000000000..3ff3832c718 --- /dev/null +++ b/test/configCases/container/module-federation-with-shareScope/ComponentC.js @@ -0,0 +1,7 @@ +import React from "react"; +import ComponentA from "containerA/ComponentA"; +import ComponentB from "containerB/ComponentB"; + +export default () => { + return `ComponentC rendered with [${React()}] and [${ComponentA()}] and [${ComponentB()}]`; +}; diff --git a/test/configCases/container/module-federation-with-shareScope/index.js b/test/configCases/container/module-federation-with-shareScope/index.js new file mode 100644 index 00000000000..cedabf6db95 --- /dev/null +++ b/test/configCases/container/module-federation-with-shareScope/index.js @@ -0,0 +1,20 @@ +it("should load the component from container", async () => { + await __webpack_init_sharing__("test-scope"); + + // 2 scopes for "0-container-full-mjs" & "mf-with-shareScope-mjs" + expect(Object.keys(__webpack_share_scopes__["test-scope"].react).length).toBe(2); + + return import("./App").then(({ default: App }) => { + const rendered = App(); + expect(rendered).toBe( + "App rendered with [This is react 2.1.0] and [ComponentA rendered with [This is react 2.1.0]] and [ComponentB rendered with [This is react 2.1.0]]" + ); + return import("./upgrade-react").then(({ default: upgrade }) => { + upgrade(); + const rendered = App(); + expect(rendered).toBe( + "App rendered with [This is react 3.2.1] and [ComponentA rendered with [This is react 3.2.1]] and [ComponentB rendered with [This is react 3.2.1]]" + ); + }); + }); +}); diff --git a/test/configCases/container/module-federation-with-shareScope/node_modules/package.json b/test/configCases/container/module-federation-with-shareScope/node_modules/package.json new file mode 100644 index 00000000000..87032da008a --- /dev/null +++ b/test/configCases/container/module-federation-with-shareScope/node_modules/package.json @@ -0,0 +1,3 @@ +{ + "version": "2.1.0" +} diff --git a/test/configCases/container/module-federation-with-shareScope/node_modules/react.js b/test/configCases/container/module-federation-with-shareScope/node_modules/react.js new file mode 100644 index 00000000000..97d35a4bc9c --- /dev/null +++ b/test/configCases/container/module-federation-with-shareScope/node_modules/react.js @@ -0,0 +1,3 @@ +let version = "2.1.0"; +export default () => `This is react ${version}`; +export function setVersion(v) { version = v; } diff --git a/test/configCases/container/module-federation-with-shareScope/package.json b/test/configCases/container/module-federation-with-shareScope/package.json new file mode 100644 index 00000000000..be6238fec84 --- /dev/null +++ b/test/configCases/container/module-federation-with-shareScope/package.json @@ -0,0 +1,9 @@ +{ + "private": true, + "engines": { + "node": ">=10.13.0" + }, + "dependencies": { + "react": "*" + } +} diff --git a/test/configCases/container/module-federation-with-shareScope/test.config.js b/test/configCases/container/module-federation-with-shareScope/test.config.js new file mode 100644 index 00000000000..2d0d66fd4c0 --- /dev/null +++ b/test/configCases/container/module-federation-with-shareScope/test.config.js @@ -0,0 +1,5 @@ +module.exports = { + findBundle: function (i, options) { + return i === 0 ? "./main.js" : "./module/main.mjs"; + } +}; diff --git a/test/configCases/container/module-federation-with-shareScope/upgrade-react.js b/test/configCases/container/module-federation-with-shareScope/upgrade-react.js new file mode 100644 index 00000000000..2cadfc0b71a --- /dev/null +++ b/test/configCases/container/module-federation-with-shareScope/upgrade-react.js @@ -0,0 +1,5 @@ +import { setVersion } from "react"; + +export default function upgrade() { + setVersion("3.2.1"); +} diff --git a/test/configCases/container/module-federation-with-shareScope/webpack.config.js b/test/configCases/container/module-federation-with-shareScope/webpack.config.js new file mode 100644 index 00000000000..c7c7c547e5a --- /dev/null +++ b/test/configCases/container/module-federation-with-shareScope/webpack.config.js @@ -0,0 +1,68 @@ +// eslint-disable-next-line node/no-unpublished-require +const { ModuleFederationPlugin } = require("../../../../").container; + +const common = { + entry: { + main: "./index.js" + }, + optimization: { + runtimeChunk: "single" + } +}; + +/** @type {ConstructorParameters[0]} */ +const commonMF = { + runtime: false, + exposes: { + "./ComponentB": "./ComponentB", + "./ComponentC": "./ComponentC" + }, + shared: ["react"], + shareScope: "test-scope" +}; + +/** @type {import("../../../../types").Configuration[]} */ +module.exports = [ + { + ...common, + output: { + filename: "[name].js", + uniqueName: "mf-with-shareScope" + }, + plugins: [ + new ModuleFederationPlugin({ + name: "container", + library: { type: "commonjs-module" }, + filename: "container.js", + remotes: { + containerA: "../0-container-full/container.js", + containerB: "./container.js" + }, + ...commonMF + }) + ] + }, + { + ...common, + experiments: { + outputModule: true + }, + output: { + filename: "module/[name].mjs", + uniqueName: "mf-with-shareScope-mjs" + }, + plugins: [ + new ModuleFederationPlugin({ + name: "container", + library: { type: "module" }, + filename: "module/container.mjs", + remotes: { + containerA: "../../0-container-full/module/container.mjs", + containerB: "./container.mjs" + }, + ...commonMF + }) + ], + target: "node14" + } +];