Merge pull request #16943 from snitin315/fix/mf-sharescope

test: add case for ModuleFederationPlugin usage with shareScope option

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);

test/configCases/container/module-federation-with-shareScope/ComponentB.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default () => {
+	return `ComponentB rendered with [${React()}]`;
+};

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()}]`;
+};

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]]"
+			);
+		});
+	});
+});

test/configCases/container/module-federation-with-shareScope/package.json

@@ -0,0 +1,9 @@
+{
+  "private": true,
+  "engines": {
+    "node": ">=10.13.0"
+  },
+  "dependencies": {
+    "react": "*"
+  }
+}

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";
+	}
+};

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");
+}

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<typeof ModuleFederationPlugin>[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"
+	}
+];