chore(react): clean-up and add e2e test for --js option for module fe…

…deration
nrwl · Jan 29, 2024 · f90b882 · f90b882
1 parent 2d6d8f3
commit f90b882
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 68 deletions.
diff --git a/e2e/react-module-federation/src/react-module-federation.test.ts b/e2e/react-module-federation/src/react-module-federation.test.ts
@@ -20,51 +20,61 @@ import { join } from 'path';
 import { createTreeWithEmptyWorkspace } from 'nx/src/devkit-testing-exports';
 
 describe('React Module Federation', () => {
-  let proj: string;
-  let tree: Tree;
-
   beforeAll(() => {
-    tree = createTreeWithEmptyWorkspace();
-    proj = newProject({ packages: ['@nx/react'] });
+    newProject({ packages: ['@nx/react'] });
   });
 
   afterAll(() => cleanupProject());
 
   describe('Default Configuration', () => {
-    it('should generate host and remote apps', async () => {
-      const shell = uniq('shell');
-      const remote1 = uniq('remote1');
-      const remote2 = uniq('remote2');
-      const remote3 = uniq('remote3');
-
-      // Since we are using a single-file server for the remotes
-      const defaultRemotePort = 4201;
-
-      runCLI(
-        `generate @nx/react:host ${shell} --remotes=${remote1},${remote2},${remote3} --style=css --no-interactive --skipFormat`
-      );
+    it.each`
+      js
+      ${false}
+      ${true}
+    `(
+      'should generate host and remote apps',
+      async ({ js }) => {
+        const shell = uniq('shell');
+        const remote1 = uniq('remote1');
+        const remote2 = uniq('remote2');
+        const remote3 = uniq('remote3');
+
+        // Since we are using a single-file server for the remotes
+        const defaultRemotePort = 4201;
+
+        runCLI(
+          `generate @nx/react:host ${shell} --remotes=${remote1},${remote2},${remote3} --style=css --no-interactive --skipFormat --js=${js}`
+        );
 
-      checkFilesExist(`apps/${shell}/module-federation.config.ts`);
-      checkFilesExist(`apps/${remote1}/module-federation.config.ts`);
-      checkFilesExist(`apps/${remote2}/module-federation.config.ts`);
-      checkFilesExist(`apps/${remote3}/module-federation.config.ts`);
+        checkFilesExist(
+          `apps/${shell}/module-federation.config.${js ? 'js' : 'ts'}`
+        );
+        checkFilesExist(
+          `apps/${remote1}/module-federation.config.${js ? 'js' : 'ts'}`
+        );
+        checkFilesExist(
+          `apps/${remote2}/module-federation.config.${js ? 'js' : 'ts'}`
+        );
+        checkFilesExist(
+          `apps/${remote3}/module-federation.config.${js ? 'js' : 'ts'}`
+        );
 
-      await expect(runCLIAsync(`test ${shell}`)).resolves.toMatchObject({
-        combinedOutput: expect.stringContaining(
-          'Test Suites: 1 passed, 1 total'
-        ),
-      });
+        await expect(runCLIAsync(`test ${shell}`)).resolves.toMatchObject({
+          combinedOutput: expect.stringContaining(
+            'Test Suites: 1 passed, 1 total'
+          ),
+        });
 
-      updateFile(
-        `apps/${shell}/webpack.config.ts`,
-        stripIndents`
-        import { composePlugins, withNx, ModuleFederationConfig } from '@nx/webpack';
+        updateFile(
+          `apps/${shell}/webpack.config.${js ? 'js' : 'ts'}`,
+          stripIndents`
+        import { composePlugins, withNx } from '@nx/webpack';
         import { withReact } from '@nx/react';
         import { withModuleFederation } from '@nx/react/module-federation';
         
         import baseConfig from './module-federation.config';
         
-        const config: ModuleFederationConfig = {
+        const config = {
           ...baseConfig,
               remotes: [
                 '${remote1}',
@@ -76,11 +86,11 @@ describe('React Module Federation', () => {
         // Nx plugins for webpack to build config object from Nx options and context.
         module.exports = composePlugins(withNx(), withReact(), withModuleFederation(config));
       `
-      );
+        );
 
-      updateFile(
-        `apps/${shell}-e2e/src/integration/app.spec.ts`,
-        stripIndents`
+        updateFile(
+          `apps/${shell}-e2e/src/integration/app.spec.${js ? 'js' : 'ts'}`,
+          stripIndents`
         import { getGreeting } from '../support/app.po';
 
         describe('shell app', () => {
@@ -105,34 +115,36 @@ describe('React Module Federation', () => {
           });
         });
       `
-      );
-
-      if (runE2ETests()) {
-        const e2eResultsSwc = await runCommandUntil(
-          `e2e ${shell}-e2e --no-watch --verbose`,
-          (output) => output.includes('All specs passed!')
         );
 
-        await killProcessAndPorts(
-          e2eResultsSwc.pid,
-          readPort(shell),
-          defaultRemotePort
-        );
+        if (runE2ETests()) {
+          const e2eResultsSwc = await runCommandUntil(
+            `e2e ${shell}-e2e --no-watch --verbose`,
+            (output) => output.includes('All specs passed!')
+          );
 
-        const e2eResultsTsNode = await runCommandUntil(
-          `e2e ${shell}-e2e --no-watch --verbose`,
-          (output) => output.includes('All specs passed!'),
-          {
-            env: { NX_PREFER_TS_NODE: 'true' },
-          }
-        );
-        await killProcessAndPorts(
-          e2eResultsTsNode.pid,
-          readPort(shell),
-          defaultRemotePort
-        );
-      }
-    }, 500_000);
+          await killProcessAndPorts(
+            e2eResultsSwc.pid,
+            readPort(shell),
+            defaultRemotePort
+          );
+
+          const e2eResultsTsNode = await runCommandUntil(
+            `e2e ${shell}-e2e --no-watch --verbose`,
+            (output) => output.includes('All specs passed!'),
+            {
+              env: { NX_PREFER_TS_NODE: 'true' },
+            }
+          );
+          await killProcessAndPorts(
+            e2eResultsTsNode.pid,
+            readPort(shell),
+            defaultRemotePort
+          );
+        }
+      },
+      500_000
+    );
 
     it('should generate host and remote apps with ssr', async () => {
       const shell = uniq('shell');
@@ -861,8 +873,7 @@ describe('React Module Federation', () => {
 
   describe('Dynamic Module Federation', () => {
     beforeAll(() => {
-      tree = createTreeWithEmptyWorkspace();
-      proj = newProject({ packages: ['@nx/react'] });
+      newProject({ packages: ['@nx/react'] });
     });
 
     afterAll(() => cleanupProject());

diff --git a/packages/react/src/generators/host/host.ts b/packages/react/src/generators/host/host.ts
@@ -72,6 +72,7 @@ export async function hostGeneratorInternal(
         skipFormat: true,
         projectNameAndRootFormat: options.projectNameAndRootFormat,
         typescriptConfiguration: options.typescriptConfiguration,
+        js: options.js,
         dynamic: options.dynamic,
         host: options.name,
       });

diff --git a/packages/react/src/generators/host/lib/add-module-federation-files.ts b/packages/react/src/generators/host/lib/add-module-federation-files.ts
@@ -55,9 +55,10 @@ export function addModuleFederationFiles(
     templateVariables
   );
 
-  const pathToModuleFederationFiles = options.typescriptConfiguration
-    ? 'module-federation-ts'
-    : 'module-federation';
+  const pathToModuleFederationFiles =
+    options.typescriptConfiguration && !options.js
+      ? 'module-federation-ts'
+      : 'module-federation';
   // New entry file is created here.
   generateFiles(
     host,

diff --git a/packages/react/src/generators/remote/remote.ts b/packages/react/src/generators/remote/remote.ts
@@ -39,9 +39,10 @@ export function addModuleFederationFiles(
     templateVariables
   );
 
-  const pathToModuleFederationFiles = options.typescriptConfiguration
-    ? 'module-federation-ts'
-    : 'module-federation';
+  const pathToModuleFederationFiles =
+    options.typescriptConfiguration && !options.js
+      ? 'module-federation-ts'
+      : 'module-federation';
 
   generateFiles(
     host,