diff --git a/packages/angular/plugins/component-testing.ts b/packages/angular/plugins/component-testing.ts index 0a9067517d..d71d4f6200 100644 --- a/packages/angular/plugins/component-testing.ts +++ b/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 diff --git a/packages/cypress/plugins/cypress-preset.ts b/packages/cypress/plugins/cypress-preset.ts index ba44d00dc0..cfca88ded0 100644 --- a/packages/cypress/plugins/cypress-preset.ts +++ b/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() diff --git a/packages/js/babel.ts b/packages/js/babel.ts index 2790f077e3..373361dcd2 100644 --- a/packages/js/babel.ts +++ b/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. diff --git a/packages/react/plugins/component-testing/index.ts b/packages/react/plugins/component-testing/index.ts index 9219157622..82ee45f60f 100644 --- a/packages/react/plugins/component-testing/index.ts +++ b/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; }; } diff --git a/packages/webpack/src/utils/web-babel-loader.ts b/packages/webpack/src/utils/web-babel-loader.ts index c13ddcfae3..c8e08d992d 100644 --- a/packages/webpack/src/utils/web-babel-loader.ts +++ b/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; }, diff --git a/packages/webpack/src/utils/with-nx.ts b/packages/webpack/src/utils/with-nx.ts index 05364e83dd..d509e0a80c 100644 --- a/packages/webpack/src/utils/with-nx.ts +++ b/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,