feat(testing): cypress vite

docs/generated/packages/cypress.json

@@ -111,10 +111,23 @@
             "type": "boolean",
             "default": false,
             "description": "Do not add dependencies to `package.json`."
+          },
+          "rootProject": {
+            "description": "Create a application at the root of the workspace",
+            "type": "boolean",
+            "default": false,
+            "hidden": true
+          },
+          "bundler": {
+            "description": "The Cypress bundler to use.",
+            "type": "string",
+            "enum": ["vite", "webpack", "none"],
+            "x-prompt": "Which Cypress bundler do you want to use?",
+            "default": "webpack"
           }
         },
         "required": ["name"],
-        "examplesFile": "Adding Cypress to an existing application requires two options. The name of the e2e app to create and what project that e2e app is for.\n\n```bash\nnx g cypress-project --name=my-app-e2e --project=my-app\n```\n\nWhen providing `--project` option, the generator will look for the `serve` target in that given project. This allows the [cypress executor](/packages/cypress/executors/cypress) to spin up the project and start the cypress runner.\n\nIf you prefer to not have the project served automatically, you can provide a `--base-url` argument in place of `--project`\n\n```bash\nnx g cypress-project --name=my-app-e2e --base-url=http://localhost:1234\n```\n\n{% callout type=\"note\" title=\"What about API Projects?\" %}\nYou can also run the `cypress-project` generator against API projects like a [Nest API](/packages/nest/generators/application#@nrwl/nest:application).\nIf there is a URL to visit then you can test it with Cypress!\n{% /callout %}\n",
+        "examplesFile": "Adding Cypress to an existing application requires two options. The name of the e2e app to create and what project that e2e app is for.\n\n```bash\nnx g cypress-project --name=my-app-e2e --project=my-app\n```\n\nWhen providing `--project` option, the generator will look for the `serve` target in that given project. This allows the [cypress executor](/packages/cypress/executors/cypress) to spin up the project and start the cypress runner.\n\nIf you prefer to not have the project served automatically, you can provide a `--base-url` argument in place of `--project`\n\n```bash\nnx g cypress-project --name=my-app-e2e --base-url=http://localhost:1234\n```\n\n{% callout type=\"note\" title=\"What about API Projects?\" %}\nYou can also run the `cypress-project` generator against API projects like a [Nest API](/packages/nest/generators/application#@nrwl/nest:application).\nIf there is a URL to visit then you can test it with Cypress!\n{% /callout %}\n\n## Using Cypress with Vite.js\n\nNow, you can generate your Cypress project with Vite.js as the bundler:\n\n```bash\nnx g cypress-project --name=my-app-e2e --project=my-app --bundler=vite\n```\n\nThis generator will pass the `bundler` information (`bundler: 'vite'`) to our `nxE2EPreset`, in your project's `cypress.config.ts` file (eg. `my-app-e2e/cypress.config.ts`).\n\n### Customizing the Vite.js configuration\n\nThe `nxE2EPreset` will then use the `bundler` information to generate the correct settings for your Cypress project to use Vite.js. In the background, the way this works is that it's using a custom Vite preprocessor for your files, that's called on the `file:preprocessor` event. If you want to customize this behaviour, you can do so like this in your project's `cypress.config.ts` file:\n\n```ts\nimport { defineConfig } from 'cypress';\nimport { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';\n\nconst config = nxE2EPreset(__filename, { bundler: 'vite' });\nexport default defineConfig({\n  e2e: {\n    ...config,\n     setupNodeEvents(on, config): {\n      config.setupNodeEvents(on);\n      // Your settings here\n    }\n  },\n});\n```\n",
         "presets": []
       },
       "description": "Add a Cypress E2E Project.",

docs/generated/packages/react.json

@@ -1333,10 +1333,16 @@
             "type": "boolean",
             "description": "Skip formatting files",
             "default": false
+          },
+          "bundler": {
+            "description": "The bundler to use for Cypress Component Testing.",
+            "type": "string",
+            "enum": ["vite", "webpack"],
+            "hidden": true
           }
         },
         "required": ["project"],
-        "examplesFile": "{% callout type=\"caution\" title=\"Can I use component testing?\" %}\nReact component testing with Nx requires **Cypress version 10.7.0** and up.\n\nYou can migrate with to v10 via the [migrate-to-cypress-10 generator](/packages/cypress/generators/migrate-to-cypress-10).\n\nThis generator is for Cypress based component testing.\n\nIf you want to test components via Storybook with Cypress, then check out the [storybook-configuration generator docs](/packages/react/generators/storybook-configuration)\n{% /callout %}\n\nThis generator is designed to get your React project up and running with Cypress Component Testing.\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project\n```\n\nRunning this generator, adds the required files to the specified project with a preconfigured `cypress.config.ts` designed for Nx workspaces.\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';\n\nexport default defineConfig({\n  component: nxComponentTestingPreset(__filename),\n});\n```\n\nHere is an example on how to add custom options to the configuration\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';\n\nexport default defineConfig({\n  component: {\n    ...nxComponentTestingPreset(__filename),\n    // extra options here\n  },\n});\n```\n\n## Specifying a Build Target\n\nComponent testing requires a _build target_ to correctly run the component test dev server. This option can be manually specified with `--build-target=some-react-app:build`, but Nx will infer this usage from the [project graph](/concepts/mental-model#the-project-graph) if one isn't provided.\n\nFor React projects, the build target needs to be using the `@nrwl/webpack:webpack` executor.\nThe generator will throw an error if a build target can't be found and suggest passing one in manually.\n\nLetting Nx infer the build target by default\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project\n```\n\nManually specifying the build target\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project --build-target:some-react-app:build --generate-tests\n```\n\n{% callout type=\"note\" title=\"Build Target with Configuration\" %}\nIf you're wanting to use a build target with a specific configuration. i.e. `my-app:build:production`,\nthen manually providing `--build-target=my-app:build:production` is the best way to do that.\n{% /callout %}\n\n## Auto Generating Tests\n\nYou can optionally use the `--generate-tests` flag to generate a test file for each component in your project.\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project --generate-tests\n```\n\n## Running Component Tests\n\nA new `component-test` target will be added to the specified project to run your component tests.\n\n```shell\nnx g component-test my-cool-react-project\n```\n\nHere is an example of the project configuration that is generated. The `--build-target` option is added as the `devServerTarget` which can be changed as needed.\n\n```json {% fileName=\"project.json\" %}\n{\n  \"targets\" {\n    \"component-test\": {\n      \"executor\": \"@nrwl/cypress:cypress\",\n      \"options\": {\n        \"cypressConfig\": \"<path-to-project-root>/cypress.config.ts\",\n        \"testingType\": \"component\",\n        \"devServerTarget\": \"some-react-app:build\",\n        \"skipServe\": true\n      }\n    }\n  }\n}\n```\n\nNx also supports [Angular component testing](/packages/angular/generators/cypress-component-configuration).\n",
+        "examplesFile": "{% callout type=\"caution\" title=\"Can I use component testing?\" %}\nReact component testing with Nx requires **Cypress version 10.7.0** and up.\n\nYou can migrate with to v10 via the [migrate-to-cypress-10 generator](/packages/cypress/generators/migrate-to-cypress-10).\n\nThis generator is for Cypress based component testing.\n\nIf you want to test components via Storybook with Cypress, then check out the [storybook-configuration generator docs](/packages/react/generators/storybook-configuration)\n{% /callout %}\n\nThis generator is designed to get your React project up and running with Cypress Component Testing.\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project\n```\n\nRunning this generator, adds the required files to the specified project with a preconfigured `cypress.config.ts` designed for Nx workspaces.\n\nThe following file will be added to projects where the Component Testing build target is using `webpack` for bundling:\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';\n\nexport default defineConfig({\n  component: nxComponentTestingPreset(__filename, {\n    bundler: 'webpack',\n  }),\n});\n```\n\nThe following file will be added to projects where the Component Testing build target is using `vite` for bundling:\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';\n\nexport default defineConfig({\n  component: nxComponentTestingPreset(__filename, {\n    bundler: 'vite',\n  }),\n});\n```\n\nHere is an example on how to add custom options to the configuration\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';\n\nexport default defineConfig({\n  component: {\n    ...nxComponentTestingPreset(__filename, {\n      bundler: 'webpack',\n    }),\n    // extra options here\n  },\n});\n```\n\n## The `bundler` option\n\nComponent testing supports two different bundlers: `webpack` and `vite`. The Nx generator will pick up the bundler used in the specified project's build target. If the build target is using `@nrwl/webpack:webpack`, then the generator will use `webpack` as the bundler. If the build target is using `@nrwl/vite:build`, then the generator will use `vite` as the bundler.\n\nYou can manually set the bundler by passing `--bundler=webpack` or `--bundler=vite` to the generator, but that is not needed since the generator will pick up the correct bundler for you. However, if you want to use a different bundler than the one that is used in the build target, then you can manually set it using that flag.\n\n## Specifying a Build Target\n\nComponent testing requires a _build target_ to correctly run the component test dev server. This option can be manually specified with `--build-target=some-react-app:build`, but Nx will infer this usage from the [project graph](/concepts/mental-model#the-project-graph) if one isn't provided.\n\nFor React projects, the build target needs to be using the `@nrwl/webpack:webpack` executor.\nThe generator will throw an error if a build target can't be found and suggest passing one in manually.\n\nLetting Nx infer the build target by default\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project\n```\n\nManually specifying the build target\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project --build-target:some-react-app:build --generate-tests\n```\n\n{% callout type=\"note\" title=\"Build Target with Configuration\" %}\nIf you're wanting to use a build target with a specific configuration. i.e. `my-app:build:production`,\nthen manually providing `--build-target=my-app:build:production` is the best way to do that.\n{% /callout %}\n\n## Auto Generating Tests\n\nYou can optionally use the `--generate-tests` flag to generate a test file for each component in your project.\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project --generate-tests\n```\n\n## Running Component Tests\n\nA new `component-test` target will be added to the specified project to run your component tests.\n\n```shell\nnx g component-test my-cool-react-project\n```\n\nHere is an example of the project configuration that is generated. The `--build-target` option is added as the `devServerTarget` which can be changed as needed.\n\n```json {% fileName=\"project.json\" %}\n{\n  \"targets\" {\n    \"component-test\": {\n      \"executor\": \"@nrwl/cypress:cypress\",\n      \"options\": {\n        \"cypressConfig\": \"<path-to-project-root>/cypress.config.ts\",\n        \"testingType\": \"component\",\n        \"devServerTarget\": \"some-react-app:build\",\n        \"skipServe\": true\n      }\n    }\n  }\n}\n```\n\nNx also supports [Angular component testing](/packages/angular/generators/cypress-component-configuration).\n",
         "presets": []
       },
       "description": "Setup Cypress component testing for a React project",

docs/generated/packages/storybook.json

@@ -114,6 +114,7 @@
           },
           "bundler": {
             "description": "The bundler to use.",
+            "type": "string",
             "enum": ["vite", "webpack"],
             "x-prompt": "Which bundler do you want to use?",
             "default": "webpack"
@@ -196,7 +197,10 @@
           },
           "bundler": {
             "description": "The Storybook builder to use.",
-            "enum": ["vite", "webpack"]
+            "type": "string",
+            "enum": ["vite", "webpack"],
+            "x-prompt": "Which Storybook builder do you want to use?",
+            "default": "webpack"
           }
         },
         "required": ["name"],

packages/angular/plugins/component-testing.ts

@@ -85,7 +85,7 @@ ${e.stack ? e.stack : e}`
   const offset = offsetFromRoot(normalizedFromWorkspaceRootPath);
   const buildContext = createExecutorContext(
     graph,
-    graph.nodes[buildTarget.project].data.targets,
+    graph.nodes[buildTarget.project]?.data.targets,
     buildTarget.project,
     buildTarget.target,
     buildTarget.configuration
@@ -117,7 +117,7 @@ ${e.stack ? e.stack : e}`
 
 function getBuildableTarget(ctContext: ExecutorContext) {
   const targets =
-    ctContext.projectGraph.nodes[ctContext.projectName].data?.targets;
+    ctContext.projectGraph.nodes[ctContext.projectName]?.data?.targets;
   const targetConfig = targets?.[ctContext.targetName];
 
   if (!targetConfig) {
@@ -232,7 +232,7 @@ function normalizeBuildTargetOptions(
     buildOptions.stylePreprocessorOptions = { includePaths: [] };
   }
   const { root, sourceRoot } =
-    buildContext.projectGraph.nodes[buildContext.projectName].data;
+    buildContext.projectGraph.nodes[buildContext.projectName]?.data;
   return {
     root: joinPathFragments(offset, root),
     sourceRoot: joinPathFragments(offset, sourceRoot),
@@ -280,7 +280,7 @@ function withSchemaDefaults(options: any): BrowserBuilderSchema {
 function getTempStylesForTailwind(ctExecutorContext: ExecutorContext) {
   const ctProjectConfig = ctExecutorContext.projectGraph.nodes[
     ctExecutorContext.projectName
-  ].data as ProjectConfiguration;
+  ]?.data as ProjectConfiguration;
   // angular only supports `tailwind.config.{js,cjs}`
   const ctProjectTailwindConfig = join(
     ctExecutorContext.root,

packages/angular/src/generators/ng-add/migrators/projects/__snapshots__/e2e.migrator.spec.ts.snap

@@ -13,6 +13,15 @@ export default defineConfig({
 });"
 `;
 
+exports[`e2e migrator cypress with project root at "" cypress version >=10 should create a cypress.config.ts file when it does not exist 1`] = `
+"import { defineConfig } from 'cypress';
+import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
+
+export default defineConfig({
+  e2e: nxE2EPreset(__dirname)
+});"
+`;
+
 exports[`e2e migrator cypress with project root at "" cypress version >=10 should keep paths in the e2e config when they differ from the nx preset defaults 1`] = `
 "import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
@@ -41,11 +50,11 @@ exports[`e2e migrator cypress with project root at "" cypress version >=10 shoul
 "import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
 
-export default defineConfig({
-  e2e: {...nxE2EPreset(__dirname),
-    baseUrl: 'http://localhost:4200'
-  },
-});"
+            export default defineConfig({
+              e2e: {...nxE2EPreset(__dirname),
+                baseUrl: 'http://localhost:4200'
+              },
+            });"
 `;
 
 exports[`e2e migrator cypress with project root at "" cypress version >=10 should update paths in the config 1`] = `
@@ -79,6 +88,15 @@ export default defineConfig({
 });"
 `;
 
+exports[`e2e migrator cypress with project root at "projects/app1" cypress version >=10 should create a cypress.config.ts file when it does not exist 1`] = `
+"import { defineConfig } from 'cypress';
+import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
+
+export default defineConfig({
+  e2e: nxE2EPreset(__dirname)
+});"
+`;
+
 exports[`e2e migrator cypress with project root at "projects/app1" cypress version >=10 should keep paths in the e2e config when they differ from the nx preset defaults 1`] = `
 "import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
@@ -107,11 +125,11 @@ exports[`e2e migrator cypress with project root at "projects/app1" cypress versi
 "import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
 
-export default defineConfig({
-  e2e: {...nxE2EPreset(__dirname),
-    baseUrl: 'http://localhost:4200'
-  },
-});"
+            export default defineConfig({
+              e2e: {...nxE2EPreset(__dirname),
+                baseUrl: 'http://localhost:4200'
+              },
+            });"
 `;
 
 exports[`e2e migrator cypress with project root at "projects/app1" cypress version >=10 should update paths in the config 1`] = `

packages/angular/src/generators/ng-add/migrators/projects/e2e.migrator.spec.ts

@@ -840,13 +840,8 @@ describe('e2e migrator', () => {
             'apps/app1-e2e/cypress.config.ts',
             'utf-8'
           );
-          expect(cypressConfig).toBe(`import { defineConfig } from 'cypress';
-import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
 
-export default defineConfig({
-  e2e: nxE2EPreset(__dirname)
-});
-`);
+          expect(cypressConfig).toMatchSnapshot();
         });
 
         it('should update e2e config with the nx preset', async () => {
@@ -856,11 +851,11 @@ export default defineConfig({
             joinPathFragments(root, 'cypress.config.ts'),
             `import { defineConfig } from 'cypress';
 
-export default defineConfig({
-  e2e: {
-    baseUrl: 'http://localhost:4200'
-  },
-});`
+            export default defineConfig({
+              e2e: {
+                baseUrl: 'http://localhost:4200'
+              },
+            });`
           );
           const project = addProject('app1', {
             root,