fix(testing): update default webpack config for react CT (#17562)

packages/angular/plugins/component-testing.ts

@@ -101,7 +101,7 @@ ${e.stack ? e.stack : e}`
   );
 
   return {
-    ...nxBaseCypressPreset(pathToConfig),
+    ...nxBaseCypressPreset(pathToConfig, { testingType: 'component' }),
     // NOTE: cannot use a glob pattern since it will break cypress generated tsconfig.
     specPattern: ['src/**/*.cy.ts', 'src/**/*.cy.js'],
     // cypress defaults to a relative path from the workspaceRoot instead of projectRoot

packages/cypress/plugins/cypress-preset.ts

@@ -21,7 +21,13 @@ export interface NxComponentTestingOptions {
   bundler?: 'vite' | 'webpack';
 }
 
-export function nxBaseCypressPreset(pathToConfig: string): BaseCypressPreset {
+export function nxBaseCypressPreset(
+  pathToConfig: string,
+  options?: { testingType: 'component' | 'e2e' }
+): BaseCypressPreset {
+  // used to set babel settings for react CT.
+  process.env.NX_CYPRESS_COMPONENT_TEST =
+    options?.testingType === 'component' ? 'true' : 'false';
   // prevent from placing path outside the root of the workspace
   // if they pass in a file or directory
   const normalizedPath = lstatSync(pathToConfig).isDirectory()

packages/js/babel.ts

@@ -20,6 +20,9 @@ module.exports = function (api: any, options: NxWebBabelPresetOptions = {}) {
 
   const isModern = api.caller((caller) => caller?.isModern);
 
+  // use by @nx/cypress react component testing to prevent core js build issues
+  const isTest = api.caller((caller) => caller?.isTest);
+
   // This is set by `@nx/rollup:rollup` executor
   const isNxPackage = api.caller((caller) => caller?.isNxPackage);
 
@@ -39,7 +42,7 @@ module.exports = function (api: any, options: NxWebBabelPresetOptions = {}) {
         // For Jest tests, NODE_ENV is set as 'test' and we only want to set target as Node.
         // All other options will fail in Jest since Node does not support some ES features
         // such as import syntax.
-        process.env.NODE_ENV === 'test'
+        isTest || process.env.NODE_ENV === 'test'
           ? { targets: { node: 'current' }, loose: true }
           : {
               // Allow importing core-js in entrypoint and use browserslist to select polyfills.

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

@@ -70,9 +70,13 @@ export function nxComponentTestingPreset(
     ? pathToConfig
     : dirname(pathToConfig);
 
+  const basePresetSettings = nxBaseCypressPreset(pathToConfig, {
+    testingType: 'component',
+  });
+
   if (options?.bundler === 'vite') {
     return {
-      ...nxBaseCypressPreset(pathToConfig),
+      ...basePresetSettings,
       specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
       devServer: {
         ...({ framework: 'react', bundler: 'vite' } as const),
@@ -156,7 +160,7 @@ export function nxComponentTestingPreset(
   }
 
   return {
-    ...nxBaseCypressPreset(pathToConfig),
+    ...basePresetSettings,
     specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
     devServer: {
       // cypress uses string union type,
@@ -252,6 +256,10 @@ function buildTargetWebpack(
     // TODO(jack): Once webpackConfig is always set in @nx/webpack:webpack, we no longer need this default.
     const defaultWebpack = getWebpackConfig(context, {
       ...options,
+      // cypress will generate its own index.html from component-index.html
+      generateIndexHtml: false,
+      // causes issues with buildable libraries with ENOENT: no such file or directory, scandir error
+      extractLicenses: false,
       root: workspaceRoot,
       projectRoot: ctProjectConfig.root,
       sourceRoot: ctProjectConfig.sourceRoot,
@@ -264,6 +272,7 @@ function buildTargetWebpack(
         configuration: parsed.configuration,
       });
     }
+
     return defaultWebpack;
   };
 }

packages/webpack/src/utils/web-babel-loader.ts

@@ -1,14 +1,18 @@
 module.exports = require('babel-loader').custom(() => {
   return {
-    customOptions({ isModern, emitDecoratorMetadata, ...loader }) {
+    customOptions({ isTest, isModern, emitDecoratorMetadata, ...loader }) {
       return {
-        custom: { isModern, emitDecoratorMetadata },
+        custom: { isTest, isModern, emitDecoratorMetadata },
         loader,
       };
     },
-    config(cfg, { customOptions: { isModern, emitDecoratorMetadata } }) {
+    config(
+      cfg,
+      { customOptions: { isTest, isModern, emitDecoratorMetadata } }
+    ) {
       // Add hint to our babel preset so it can handle modern vs legacy bundles.
       cfg.options.caller.isModern = isModern;
+      cfg.options.caller.isTest = isTest;
       cfg.options.caller.emitDecoratorMetadata = emitDecoratorMetadata;
       return cfg.options;
     },

packages/webpack/src/utils/with-nx.ts

@@ -365,6 +365,7 @@ export function createLoaderFromCompiler(
           cwd: path.join(options.root, options.sourceRoot),
           emitDecoratorMetadata: tsConfig.options.emitDecoratorMetadata,
           isModern: true,
+          isTest: process.env.NX_CYPRESS_COMPONENT_TEST === 'true',
           envName: process.env.BABEL_ENV ?? process.env.NODE_ENV,
           cacheDirectory: true,
           cacheCompression: false,