diff --git a/e2e/next-extensions/src/next-component-tests.test.ts b/e2e/next-extensions/src/next-component-tests.test.ts index a7e1106e8f9a0..3f3f10f6b05f7 100644 --- a/e2e/next-extensions/src/next-component-tests.test.ts +++ b/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( diff --git a/e2e/react-extensions/src/cypress-component-tests.test.ts b/e2e/react-extensions/src/cypress-component-tests.test.ts index 6824fbdd1d8a7..4c81cd09180d0 100644 --- a/e2e/react-extensions/src/cypress-component-tests.test.ts +++ b/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`, diff --git a/packages/cypress/plugins/cypress-preset.ts b/packages/cypress/plugins/cypress-preset.ts index 6e3ed1a87e141..a3f58e1d7149a 100644 --- a/packages/cypress/plugins/cypress-preset.ts +++ b/packages/cypress/plugins/cypress-preset.ts @@ -18,6 +18,7 @@ export interface NxComponentTestingOptions { */ ctTargetName?: string; bundler?: 'vite' | 'webpack'; + compiler?: 'swc' | 'babel'; } export function nxBaseCypressPreset( diff --git a/packages/next/plugins/component-testing.ts b/packages/next/plugins/component-testing.ts index 2280ef836da36..c921eda5614c4 100644 --- a/packages/next/plugins/component-testing.ts +++ b/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, diff --git a/packages/react/plugins/component-testing/index.ts b/packages/react/plugins/component-testing/index.ts index a2f943e9a74b8..7cde7d951cb50 100644 --- a/packages/react/plugins/component-testing/index.ts +++ b/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', }); }