feat(nextjs): can set compiler when setting up nxComponentTestingPreset (#19171)

e2e/next-extensions/src/next-component-tests.test.ts

@@ -1,4 +1,5 @@
 import {
+  cleanupProject,
   createFile,
   newProject,
   runCLI,
@@ -14,6 +15,8 @@ describe('NextJs Component Testing', () => {
     });
   });
 
+  afterAll(() => cleanupProject());
+
   it('should test a NextJs app', () => {
     const appName = uniq('next-app');
     createAppWithCt(appName);
@@ -30,6 +33,30 @@ describe('NextJs Component Testing', () => {
     }
   });
 
+  it('should test a NextJs app using babel compiler', () => {
+    const appName = uniq('next-app');
+    createAppWithCt(appName);
+    //  add bable compiler to app
+    addBabelSupport(`apps/${appName}`);
+    if (runE2ETests()) {
+      expect(runCLI(`component-test ${appName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
+  });
+
+  it('should test a NextJs lib using babel compiler', async () => {
+    const libName = uniq('next-lib');
+    createLibWithCt(libName, false);
+    //  add bable compiler to lib
+    addBabelSupport(`libs/${libName}`);
+    if (runE2ETests()) {
+      expect(runCLI(`component-test ${libName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
+  });
+
   it('should test a NextJs lib', async () => {
     const libName = uniq('next-lib');
     createLibWithCt(libName, false);
@@ -64,6 +91,22 @@ describe('NextJs Component Testing', () => {
   });
 });
 
+function addBabelSupport(path: string) {
+  updateFile(`${path}/cypress.config.ts`, (content) => {
+    // apply babel compiler
+    return content.replace(
+      'nxComponentTestingPreset(__filename)',
+      'nxComponentTestingPreset(__filename, {compiler: "babel"})'
+    );
+  });
+
+  //  added needed .babelrc file with defaults
+  createFile(
+    `${path}/.babelrc`,
+    JSON.stringify({ presets: ['next/babel'], plugins: ['istanbul'] })
+  );
+}
+
 function createAppWithCt(appName: string) {
   runCLI(`generate @nx/next:app ${appName} --no-interactive --appDir=false`);
   runCLI(

e2e/react-extensions/src/cypress-component-tests.test.ts

@@ -165,6 +165,24 @@ export default Input;
     }
   }, 300_000);
 
+  it('should successfully component test lib being used in app using babel compiler', () => {
+    runCLI(
+      `generate @nx/react:cypress-component-configuration --project=${usedInAppLibName} --generate-tests`
+    );
+    updateFile(`libs/${usedInAppLibName}/cypress.config.ts`, (content) => {
+      // apply babel compiler
+      return content.replace(
+        'nxComponentTestingPreset(__filename)',
+        'nxComponentTestingPreset(__filename, {compiler: "babel"})'
+      );
+    });
+    if (runE2ETests()) {
+      expect(runCLI(`component-test ${usedInAppLibName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
+  }, 300_000);
+
   it('should test buildable lib not being used in app', () => {
     createFile(
       `libs/${buildableLibName}/src/lib/input/input.cy.tsx`,

packages/cypress/plugins/cypress-preset.ts

@@ -18,6 +18,7 @@ export interface NxComponentTestingOptions {
    */
   ctTargetName?: string;
   bundler?: 'vite' | 'webpack';
+  compiler?: 'swc' | 'babel';
 }
 
 export function nxBaseCypressPreset(

packages/next/plugins/component-testing.ts

@@ -104,7 +104,7 @@ Able to find CT project, ${!!ctProjectConfig}.`);
     assets: buildAssets,
     outputPath: buildOuputPath,
     outputFileName: 'main.js',
-    compiler: 'swc',
+    compiler: options?.compiler || 'swc',
     tsConfig: join(
       ctExecutorContext.root,
       ctProjectConfig.root,

packages/react/plugins/component-testing/index.ts

@@ -160,7 +160,7 @@ export function nxComponentTestingPreset(
     const { buildBaseWebpackConfig } = require('./webpack-fallback');
     webpackConfig = buildBaseWebpackConfig({
       tsConfigPath: findTsConfig(normalizedProjectRootPath),
-      compiler: 'babel',
+      compiler: options?.compiler || 'babel',
     });
   }