hello
+ + ); +} +export default MyComponent;`; + }); + + runCLI( + `generate @nrwl/react:cypress-component-configuration --project=${viteLibName} --generate-tests --bundler=vite --build-target=${appName}:build` + ); + if (runCypressTests()) { + expect(runCLI(`component-test ${viteLibName}`)).toContain( + 'All specs passed!' + ); + } }); }); diff --git a/packages/cypress/migrations.json b/packages/cypress/migrations.json index 0022f3e81d0d64..f32500f4dc9548 100644 --- a/packages/cypress/migrations.json +++ b/packages/cypress/migrations.json @@ -49,5 +49,15 @@ "implementation": "./src/migrations/update-16-0-0-add-nx-packages/update-16-0-0-add-nx-packages" } }, - "packageJsonUpdates": {} + "packageJsonUpdates": { + "16.0.1": { + "version": "16.0.1-beta.0", + "packages": { + "cypress": { + "version": "^12.9.0", + "alwaysAddToPackageJson": false + } + } + } + } } diff --git a/packages/cypress/src/utils/versions.ts b/packages/cypress/src/utils/versions.ts index 34d3344b5ab4c2..a8a68d99abdfe4 100644 --- a/packages/cypress/src/utils/versions.ts +++ b/packages/cypress/src/utils/versions.ts @@ -2,7 +2,7 @@ export const nxVersion = require('../../package.json').version; export const eslintPluginCypressVersion = '^2.10.3'; export const typesNodeVersion = '16.11.7'; export const cypressViteDevServerVersion = '^2.2.1'; -export const cypressVersion = '^12.2.0'; +export const cypressVersion = '^12.9.0'; export const cypressWebpackVersion = '^2.0.0'; export const webpackHttpPluginVersion = '^5.5.0'; export const viteVersion = '^4.0.1'; diff --git a/packages/react/plugins/component-testing/index.ts b/packages/react/plugins/component-testing/index.ts index 300f1a17eb33e1..0c55692280dab6 100644 --- a/packages/react/plugins/component-testing/index.ts +++ b/packages/react/plugins/component-testing/index.ts @@ -5,6 +5,7 @@ import { import type { CypressExecutorOptions } from '@nx/cypress/src/executors/cypress/cypress.impl'; import { ExecutorContext, + joinPathFragments, logger, parseTargetString, ProjectGraph, @@ -19,7 +20,8 @@ import { getProjectConfigByPath, } from '@nx/cypress/src/utils/ct-helpers'; -import type { Configuration } from 'webpack'; +import { existsSync, lstatSync } from 'fs'; +import { dirname, join } from 'path'; type ViteDevServer = { framework: 'react'; bundler: 'vite'; @@ -66,6 +68,36 @@ export function nxComponentTestingPreset( specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}', devServer: { ...({ framework: 'react', bundler: 'vite' } as const), + viteConfig: async () => { + const normalizedPath = ['.ts', '.js'].some((ext) => + pathToConfig.endsWith(ext) + ) + ? pathToConfig + : dirname(pathToConfig); + const viteConfigPath = findViteConfig(normalizedPath); + + const { mergeConfig, loadConfigFromFile, searchForWorkspaceRoot } = + (await import('vite')) as typeof import('vite'); + + const resolved = await loadConfigFromFile( + { + mode: 'watch', + command: 'serve', + }, + viteConfigPath + ); + return mergeConfig(resolved.config, { + server: { + fs: { + allow: [ + searchForWorkspaceRoot(normalizedPath), + workspaceRoot, + joinPathFragments(workspaceRoot, 'node_modules/vite'), + ], + }, + }, + }); + }, }, }; } @@ -232,3 +264,12 @@ function buildTargetWebpack( }; } } +function findViteConfig(projectRootFullPath: string): string { + const allowsExt = ['js', 'mjs', 'ts', 'cjs', 'mts', 'cts']; + + for (const ext of allowsExt) { + if (existsSync(join(projectRootFullPath, `vite.config.${ext}`))) { + return join(projectRootFullPath, `vite.config.${ext}`); + } + } +} diff --git a/packages/react/src/generators/cypress-component-configuration/lib/add-files.ts b/packages/react/src/generators/cypress-component-configuration/lib/add-files.ts index 0b90fd8b61d096..aae5fb9125c79f 100644 --- a/packages/react/src/generators/cypress-component-configuration/lib/add-files.ts +++ b/packages/react/src/generators/cypress-component-configuration/lib/add-files.ts @@ -56,6 +56,13 @@ export async function addFiles( addDependenciesToPackageJson(tree, {}, { '@nx/webpack': nxVersion }); } + if ( + options.bundler === 'vite' || + (!options.bundler && actualBundler === 'vite') + ) { + addDependenciesToPackageJson(tree, {}, { '@nx/vite': nxVersion }); + } + if (options.generateTests) { const filePaths = []; visitNotIgnoredFiles(tree, projectConfig.sourceRoot, (filePath) => { diff --git a/scripts/depcheck/missing.ts b/scripts/depcheck/missing.ts index 5382ecc6c80903..e742883d3c018e 100644 --- a/scripts/depcheck/missing.ts +++ b/scripts/depcheck/missing.ts @@ -114,6 +114,8 @@ const IGNORE_MATCHES_IN_PACKAGE = { 'url-loader', 'webpack', 'webpack-merge', + // used via the CT react plugin installed via vite plugin + 'vite', ], 'react-native': ['@nx/storybook'], rollup: ['@swc/core'],