feat: setup Vitest with standalone vitest-angular package (#1184)

apps/docs-app/docs/features/testing/vitest.md

@@ -31,7 +31,7 @@ yarn add @analogjs/platform --dev
   <TabItem value="pnpm">
 
 ```shell
-pnpm install -w @analogjs/platform
+pnpm install -w @analogjs/platform --save-dev
 ```
 
   </TabItem>
@@ -53,23 +53,23 @@ To add Vitest manually, install the necessary packages:
   <TabItem value="npm">
 
 ```shell
-npm install @analogjs/vite-plugin-angular @analogjs/platform jsdom @nx/vite --save-dev
+npm install @analogjs/vite-plugin-angular @analogjs/vitest-angular jsdom --save-dev
 ```
 
   </TabItem>
 
   <TabItem label="Yarn" value="yarn">
 
 ```shell
-yarn add @analogjs/vite-plugin-angular @analogjs/platform jsdom @nx/vite --dev
+yarn add @analogjs/vite-plugin-angular @analogjs/vitest-angular jsdom --dev
 ```
 
   </TabItem>
 
   <TabItem value="pnpm">
 
 ```shell
-pnpm install -w @analogjs/vite-plugin-angular @analogjs/platform jsdom @nx/vite
+pnpm install -w @analogjs/vite-plugin-angular @analogjs/vitest-angular jsdom --save-dev
 ```
 
   </TabItem>
@@ -103,7 +103,7 @@ export default defineConfig(({ mode }) => ({
 Next, define a `src/test-setup.ts` file to setup the `TestBed`:
 
 ```ts
-import '@analogjs/vite-plugin-angular/setup-vitest';
+import '@analogjs/vitest-angular/setup-zone';
 
 import {
   BrowserDynamicTestingModule,
@@ -117,7 +117,7 @@ getTestBed().initTestEnvironment(
 );
 ```
 
-Next, update the `test` target in the `angular.json` to use the `@analogjs/platform:vitest` builder:
+Next, update the `test` target in the `angular.json` to use the `@analogjs/vitest-angular:test` builder:
 
 ```json
 {
@@ -132,7 +132,7 @@ Next, update the `test` target in the `angular.json` to use the `@analogjs/platf
         "serve": ...,
         "extract-i18n": ...,
         "test": {
-          "builder": "@analogjs/platform:vitest"
+          "builder": "@analogjs/vitest-angular:test"
         }
       }
     }
@@ -307,6 +307,8 @@ The snapshots generated should be reviewed and added to version control.
 
 If you are using `paths` in your `tsconfig.json`, support for those aliases can be added to the `vite.config.ts`.
 
+### With Angular CLI
+
 First, install the `vite-tsconfig-paths` package.
 
 <Tabs groupId="package-manager">
@@ -329,7 +331,7 @@ yarn add vite-tsconfig-paths --dev
   <TabItem value="pnpm">
 
 ```shell
-pnpm install -w vite-tsconfig-paths
+pnpm install -w vite-tsconfig-paths --save-dev
 ```
 
   </TabItem>
@@ -348,3 +350,19 @@ export default defineConfig(({ mode }) => ({
   plugins: [angular(), viteTsConfigPaths()],
 }));
 ```
+
+### With Nx
+
+For Nx workspaces, import and use the `nxViteTsPaths` plugin from the `@nx/vite` package.
+
+```ts
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+
+import angular from '@analogjs/vite-plugin-angular';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+export default defineConfig(({ mode }) => ({
+  plugins: [angular(), nxViteTsPaths()],
+}));
+```

packages/create-analog/template-angular-v16/angular.json

@@ -46,7 +46,7 @@
           }
         },
         "test": {
-          "builder": "@analogjs/platform:vitest"
+          "builder": "@analogjs/vitest-angular:test"
         }
       }
     }

packages/create-analog/template-angular-v17/angular.json

@@ -46,7 +46,7 @@
           }
         },
         "test": {
-          "builder": "@analogjs/platform:vitest"
+          "builder": "@analogjs/vitest-angular:test"
         }
       }
     }

packages/create-analog/template-blog/angular.json

@@ -46,7 +46,7 @@
           }
         },
         "test": {
-          "builder": "@analogjs/platform:vitest"
+          "builder": "@analogjs/vitest-angular:test"
         }
       }
     }

packages/create-analog/template-latest/angular.json

@@ -46,7 +46,7 @@
           }
         },
         "test": {
-          "builder": "@analogjs/platform:vitest"
+          "builder": "@analogjs/vitest-angular:test"
         }
       }
     }

packages/nx-plugin/src/generators/app/lib/add-analog-project-config.ts

@@ -51,7 +51,7 @@ export function addAnalogProjectConfig(
         },
       },
       test: {
-        [builders]: `@analogjs/platform:vitest`,
+        [builders]: `@analogjs/vitest-angular:test`,
       },
     },
   };

packages/nx-plugin/src/generators/init/lib/update-test-target.ts

@@ -24,7 +24,7 @@ export function updateTestTarget(
       angularJsonPath,
       (json) => {
         json.projects[schema.project].architect.test = {
-          builder: '@analogjs/platform:vitest',
+          builder: '@analogjs/vitest-angular:test',
           ...commonConfig,
         };
 
@@ -38,7 +38,7 @@ export function updateTestTarget(
     const projectConfig = projects.get(schema.project);
 
     projectConfig.targets.test = {
-      executor: '@analogjs/platform:vitest',
+      executor: '@analogjs/vitest-angular:test',
       ...commonConfig,
     };
 

packages/nx-plugin/src/generators/setup-vitest/files/src/test-setup.ts__template__

@@ -1,4 +1,4 @@
-import '@analogjs/vite-plugin-angular/setup-vitest';
+import '@analogjs/vitest-angular/setup-zone';
 
 import {
   BrowserDynamicTestingModule,

packages/nx-plugin/src/generators/setup-vitest/lib/update-test-target.ts

@@ -19,7 +19,7 @@ export function updateTestTarget(
       angularJsonPath,
       (json) => {
         json.projects[schema.project].architect.test = {
-          builder: '@analogjs/platform:vitest',
+          builder: '@analogjs/vitest-angular:test',
         };
 
         return json;
@@ -32,7 +32,7 @@ export function updateTestTarget(
     const projectConfig = projects.get(schema.project);
 
     projectConfig.targets.test = {
-      executor: '@analogjs/platform:vitest',
+      executor: '@analogjs/vitest-angular:test',
     };
 
     updateProjectConfiguration(tree, schema.project, projectConfig);

packages/nx-plugin/src/utils/versions/dev-dependencies.ts

@@ -2,6 +2,7 @@ import { lt } from 'semver';
 import {
   V16_X_ANALOG_JS_PLATFORM,
   V16_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
+  V16_X_ANALOG_JS_VITEST_ANGULAR,
   V16_X_JSDOM,
   V16_X_NX_VITE,
   V16_X_VITE_TSCONFIG_PATHS,
@@ -11,6 +12,7 @@ import { stripIndents } from '@nx/devkit';
 import {
   V17_X_ANALOG_JS_PLATFORM,
   V17_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
+  V17_X_ANALOG_JS_VITEST_ANGULAR,
   V17_X_JSDOM,
   V17_X_NX_VITE,
   V17_X_VITE_TSCONFIG_PATHS,
@@ -23,6 +25,7 @@ import {
   V15_X_JSDOM,
   V15_X_VITE_TSCONFIG_PATHS,
   V15_X_VITEST,
+  V15_X_ANALOG_JS_VITEST_ANGULAR,
 } from './ng_15_X/versions';
 import {
   V18_X_ANALOG_JS_PLATFORM,
@@ -31,6 +34,7 @@ import {
   V18_X_JSDOM,
   V18_X_VITE_TSCONFIG_PATHS,
   V18_X_VITEST,
+  V18_X_ANALOG_JS_VITEST_ANGULAR,
 } from './ng_18_X/versions';
 
 const devDependencyKeys = [
@@ -64,6 +68,7 @@ const getDevDependencies = (escapedAngularVersion: string) => {
     return {
       '@analogjs/platform': V15_X_ANALOG_JS_PLATFORM,
       '@analogjs/vite-plugin-angular': V15_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
+      '@analogjs/vitest-angular': V15_X_ANALOG_JS_VITEST_ANGULAR,
       '@nx/vite': V15_X_NX_VITE,
       jsdom: V15_X_JSDOM,
       'vite-tsconfig-paths': V15_X_VITE_TSCONFIG_PATHS,
@@ -76,29 +81,32 @@ const getDevDependencies = (escapedAngularVersion: string) => {
     return {
       '@analogjs/platform': V16_X_ANALOG_JS_PLATFORM,
       '@analogjs/vite-plugin-angular': V16_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
+      '@analogjs/vitest-angular': V16_X_ANALOG_JS_VITEST_ANGULAR,
       '@nx/vite': V16_X_NX_VITE,
       jsdom: V16_X_JSDOM,
       'vite-tsconfig-paths': V16_X_VITE_TSCONFIG_PATHS,
       vitest: V16_X_VITEST,
     };
   }
 
-  // install 16.x deps for versions <18.0.0
+  // install 17.x deps for versions <18.0.0
   if (lt(escapedAngularVersion, '18.0.0')) {
     return {
-      '@analogjs/platform': V16_X_ANALOG_JS_PLATFORM,
-      '@analogjs/vite-plugin-angular': V16_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
-      '@nx/vite': V16_X_NX_VITE,
-      jsdom: V16_X_JSDOM,
-      'vite-tsconfig-paths': V16_X_VITE_TSCONFIG_PATHS,
-      vitest: V16_X_VITEST,
+      '@analogjs/platform': V17_X_ANALOG_JS_PLATFORM,
+      '@analogjs/vite-plugin-angular': V17_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
+      '@analogjs/vitest-angular': V17_X_ANALOG_JS_VITEST_ANGULAR,
+      '@nx/vite': V17_X_NX_VITE,
+      jsdom: V17_X_JSDOM,
+      'vite-tsconfig-paths': V17_X_VITE_TSCONFIG_PATHS,
+      vitest: V17_X_VITEST,
     };
   }
 
   // return latest 18.x deps for versions >18.0.0
   return {
     '@analogjs/platform': V18_X_ANALOG_JS_PLATFORM,
     '@analogjs/vite-plugin-angular': V18_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
+    '@analogjs/vitest-angular': V18_X_ANALOG_JS_VITEST_ANGULAR,
     '@nx/vite': V18_X_NX_VITE,
     jsdom: V18_X_JSDOM,
     'vite-tsconfig-paths': V18_X_VITE_TSCONFIG_PATHS,

packages/nx-plugin/src/utils/versions/ng_15_X/versions.ts

@@ -3,8 +3,9 @@ export const V15_X_ANALOG_JS_ROUTER = '~1.1.0';
 export const V15_X_ANALOG_JS_CONTENT = '~1.1.0';
 
 // devDependencies
-export const V15_X_ANALOG_JS_PLATFORM = '^1.3.0';
-export const V15_X_ANALOG_JS_VITE_PLUGIN_ANGULAR = '^1.3.0';
+export const V15_X_ANALOG_JS_PLATFORM = '^1.5.0';
+export const V15_X_ANALOG_JS_VITE_PLUGIN_ANGULAR = '^1.5.0';
+export const V15_X_ANALOG_JS_VITEST_ANGULAR = '^1.5.0';
 export const V15_X_NX_ANGULAR = '~18.0.0';
 export const V15_X_NX_VITE = '~18.0.0';
 export const V15_X_JSDOM = '^22.0.0';

packages/nx-plugin/src/utils/versions/ng_16_X/versions.ts

@@ -1,10 +1,11 @@
 // V16_X
-export const V16_X_ANALOG_JS_ROUTER = '^1.2.0';
-export const V16_X_ANALOG_JS_CONTENT = '^1.2.0';
+export const V16_X_ANALOG_JS_ROUTER = '^1.5.0';
+export const V16_X_ANALOG_JS_CONTENT = '^1.5.0';
 
 // devDependencies
-export const V16_X_ANALOG_JS_PLATFORM = '^1.2.0';
-export const V16_X_ANALOG_JS_VITE_PLUGIN_ANGULAR = '^1.2.0';
+export const V16_X_ANALOG_JS_PLATFORM = '^1.5.0';
+export const V16_X_ANALOG_JS_VITE_PLUGIN_ANGULAR = '^1.5.0';
+export const V16_X_ANALOG_JS_VITEST_ANGULAR = '^1.5.0';
 export const V16_X_NX_ANGULAR = '~18.0.0';
 export const V16_X_NX_VITE = '~18.0.0';
 export const V16_X_JSDOM = '^22.0.0';

packages/nx-plugin/src/utils/versions/ng_17_X/versions.ts

@@ -1,10 +1,11 @@
 // V17_X
-export const V17_X_ANALOG_JS_ROUTER = '^1.2.0';
-export const V17_X_ANALOG_JS_CONTENT = '^1.2.0';
+export const V17_X_ANALOG_JS_ROUTER = '^1.5.0';
+export const V17_X_ANALOG_JS_CONTENT = '^1.5.0';
 
 // devDependencies
-export const V17_X_ANALOG_JS_PLATFORM = '^1.2.0';
-export const V17_X_ANALOG_JS_VITE_PLUGIN_ANGULAR = '^1.2.0';
+export const V17_X_ANALOG_JS_PLATFORM = '^1.5.0';
+export const V17_X_ANALOG_JS_VITE_PLUGIN_ANGULAR = '^1.5.0';
+export const V17_X_ANALOG_JS_VITEST_ANGULAR = '^1.5.0';
 export const V17_X_NX_ANGULAR = '~18.0.0';
 export const V17_X_NX_VITE = '~18.0.0';
 export const V17_X_JSDOM = '^22.0.0';

packages/nx-plugin/src/utils/versions/ng_18_X/versions.ts

@@ -1,10 +1,11 @@
 // V18_X
-export const V18_X_ANALOG_JS_ROUTER = '^1.3.0';
-export const V18_X_ANALOG_JS_CONTENT = '^1.3.0';
+export const V18_X_ANALOG_JS_ROUTER = '^1.5.0';
+export const V18_X_ANALOG_JS_CONTENT = '^1.5.0';
 
 // devDependencies
-export const V18_X_ANALOG_JS_PLATFORM = '^1.3.0';
-export const V18_X_ANALOG_JS_VITE_PLUGIN_ANGULAR = '^1.3.0';
+export const V18_X_ANALOG_JS_PLATFORM = '^1.5.0';
+export const V18_X_ANALOG_JS_VITE_PLUGIN_ANGULAR = '^1.5.0';
+export const V18_X_ANALOG_JS_VITEST_ANGULAR = '^1.5.0';
 export const V18_X_NX_ANGULAR = '~19.1.0';
 export const V18_X_NX_VITE = '~19.1.0';
 export const V18_X_JSDOM = '^22.0.0';