Skip to content

Commit f6c2d00

Browse files
brandonrobertsbrandonroberts
authored
feat: setup Vitest with standalone vitest-angular package (#1184)
1 parent bfb9b28 commit f6c2d00

File tree

14 files changed

+69
-39
lines changed

14 files changed

+69
-39
lines changed

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

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ yarn add @analogjs/platform --dev
3131
<TabItem value="pnpm">
3232

3333
```shell
34-
pnpm install -w @analogjs/platform
34+
pnpm install -w @analogjs/platform --save-dev
3535
```
3636

3737
</TabItem>
@@ -53,23 +53,23 @@ To add Vitest manually, install the necessary packages:
5353
<TabItem value="npm">
5454

5555
```shell
56-
npm install @analogjs/vite-plugin-angular @analogjs/platform jsdom @nx/vite --save-dev
56+
npm install @analogjs/vite-plugin-angular @analogjs/vitest-angular jsdom --save-dev
5757
```
5858

5959
</TabItem>
6060

6161
<TabItem label="Yarn" value="yarn">
6262

6363
```shell
64-
yarn add @analogjs/vite-plugin-angular @analogjs/platform jsdom @nx/vite --dev
64+
yarn add @analogjs/vite-plugin-angular @analogjs/vitest-angular jsdom --dev
6565
```
6666

6767
</TabItem>
6868

6969
<TabItem value="pnpm">
7070

7171
```shell
72-
pnpm install -w @analogjs/vite-plugin-angular @analogjs/platform jsdom @nx/vite
72+
pnpm install -w @analogjs/vite-plugin-angular @analogjs/vitest-angular jsdom --save-dev
7373
```
7474

7575
</TabItem>
@@ -103,7 +103,7 @@ export default defineConfig(({ mode }) => ({
103103
Next, define a `src/test-setup.ts` file to setup the `TestBed`:
104104

105105
```ts
106-
import '@analogjs/vite-plugin-angular/setup-vitest';
106+
import '@analogjs/vitest-angular/setup-zone';
107107

108108
import {
109109
BrowserDynamicTestingModule,
@@ -117,7 +117,7 @@ getTestBed().initTestEnvironment(
117117
);
118118
```
119119

120-
Next, update the `test` target in the `angular.json` to use the `@analogjs/platform:vitest` builder:
120+
Next, update the `test` target in the `angular.json` to use the `@analogjs/vitest-angular:test` builder:
121121

122122
```json
123123
{
@@ -132,7 +132,7 @@ Next, update the `test` target in the `angular.json` to use the `@analogjs/platf
132132
"serve": ...,
133133
"extract-i18n": ...,
134134
"test": {
135-
"builder": "@analogjs/platform:vitest"
135+
"builder": "@analogjs/vitest-angular:test"
136136
}
137137
}
138138
}
@@ -307,6 +307,8 @@ The snapshots generated should be reviewed and added to version control.
307307
308308
If you are using `paths` in your `tsconfig.json`, support for those aliases can be added to the `vite.config.ts`.
309309
310+
### With Angular CLI
311+
310312
First, install the `vite-tsconfig-paths` package.
311313
312314
<Tabs groupId="package-manager">
@@ -329,7 +331,7 @@ yarn add vite-tsconfig-paths --dev
329331
<TabItem value="pnpm">
330332
331333
```shell
332-
pnpm install -w vite-tsconfig-paths
334+
pnpm install -w vite-tsconfig-paths --save-dev
333335
```
334336
335337
</TabItem>
@@ -348,3 +350,19 @@ export default defineConfig(({ mode }) => ({
348350
plugins: [angular(), viteTsConfigPaths()],
349351
}));
350352
```
353+
354+
### With Nx
355+
356+
For Nx workspaces, import and use the `nxViteTsPaths` plugin from the `@nx/vite` package.
357+
358+
```ts
359+
/// <reference types="vitest" />
360+
import { defineConfig } from 'vite';
361+
362+
import angular from '@analogjs/vite-plugin-angular';
363+
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
364+
365+
export default defineConfig(({ mode }) => ({
366+
plugins: [angular(), nxViteTsPaths()],
367+
}));
368+
```

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
}
4747
},
4848
"test": {
49-
"builder": "@analogjs/platform:vitest"
49+
"builder": "@analogjs/vitest-angular:test"
5050
}
5151
}
5252
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
}
4747
},
4848
"test": {
49-
"builder": "@analogjs/platform:vitest"
49+
"builder": "@analogjs/vitest-angular:test"
5050
}
5151
}
5252
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
}
4747
},
4848
"test": {
49-
"builder": "@analogjs/platform:vitest"
49+
"builder": "@analogjs/vitest-angular:test"
5050
}
5151
}
5252
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
}
4747
},
4848
"test": {
49-
"builder": "@analogjs/platform:vitest"
49+
"builder": "@analogjs/vitest-angular:test"
5050
}
5151
}
5252
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export function addAnalogProjectConfig(
5151
},
5252
},
5353
test: {
54-
[builders]: `@analogjs/platform:vitest`,
54+
[builders]: `@analogjs/vitest-angular:test`,
5555
},
5656
},
5757
};

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function updateTestTarget(
2424
angularJsonPath,
2525
(json) => {
2626
json.projects[schema.project].architect.test = {
27-
builder: '@analogjs/platform:vitest',
27+
builder: '@analogjs/vitest-angular:test',
2828
...commonConfig,
2929
};
3030

@@ -38,7 +38,7 @@ export function updateTestTarget(
3838
const projectConfig = projects.get(schema.project);
3939

4040
projectConfig.targets.test = {
41-
executor: '@analogjs/platform:vitest',
41+
executor: '@analogjs/vitest-angular:test',
4242
...commonConfig,
4343
};
4444

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import '@analogjs/vite-plugin-angular/setup-vitest';
1+
import '@analogjs/vitest-angular/setup-zone';
22

33
import {
44
BrowserDynamicTestingModule,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function updateTestTarget(
1919
angularJsonPath,
2020
(json) => {
2121
json.projects[schema.project].architect.test = {
22-
builder: '@analogjs/platform:vitest',
22+
builder: '@analogjs/vitest-angular:test',
2323
};
2424

2525
return json;
@@ -32,7 +32,7 @@ export function updateTestTarget(
3232
const projectConfig = projects.get(schema.project);
3333

3434
projectConfig.targets.test = {
35-
executor: '@analogjs/platform:vitest',
35+
executor: '@analogjs/vitest-angular:test',
3636
};
3737

3838
updateProjectConfiguration(tree, schema.project, projectConfig);

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

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { lt } from 'semver';
22
import {
33
V16_X_ANALOG_JS_PLATFORM,
44
V16_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
5+
V16_X_ANALOG_JS_VITEST_ANGULAR,
56
V16_X_JSDOM,
67
V16_X_NX_VITE,
78
V16_X_VITE_TSCONFIG_PATHS,
@@ -11,6 +12,7 @@ import { stripIndents } from '@nx/devkit';
1112
import {
1213
V17_X_ANALOG_JS_PLATFORM,
1314
V17_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
15+
V17_X_ANALOG_JS_VITEST_ANGULAR,
1416
V17_X_JSDOM,
1517
V17_X_NX_VITE,
1618
V17_X_VITE_TSCONFIG_PATHS,
@@ -23,6 +25,7 @@ import {
2325
V15_X_JSDOM,
2426
V15_X_VITE_TSCONFIG_PATHS,
2527
V15_X_VITEST,
28+
V15_X_ANALOG_JS_VITEST_ANGULAR,
2629
} from './ng_15_X/versions';
2730
import {
2831
V18_X_ANALOG_JS_PLATFORM,
@@ -31,6 +34,7 @@ import {
3134
V18_X_JSDOM,
3235
V18_X_VITE_TSCONFIG_PATHS,
3336
V18_X_VITEST,
37+
V18_X_ANALOG_JS_VITEST_ANGULAR,
3438
} from './ng_18_X/versions';
3539

3640
const devDependencyKeys = [
@@ -64,6 +68,7 @@ const getDevDependencies = (escapedAngularVersion: string) => {
6468
return {
6569
'@analogjs/platform': V15_X_ANALOG_JS_PLATFORM,
6670
'@analogjs/vite-plugin-angular': V15_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
71+
'@analogjs/vitest-angular': V15_X_ANALOG_JS_VITEST_ANGULAR,
6772
'@nx/vite': V15_X_NX_VITE,
6873
jsdom: V15_X_JSDOM,
6974
'vite-tsconfig-paths': V15_X_VITE_TSCONFIG_PATHS,
@@ -76,29 +81,32 @@ const getDevDependencies = (escapedAngularVersion: string) => {
7681
return {
7782
'@analogjs/platform': V16_X_ANALOG_JS_PLATFORM,
7883
'@analogjs/vite-plugin-angular': V16_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
84+
'@analogjs/vitest-angular': V16_X_ANALOG_JS_VITEST_ANGULAR,
7985
'@nx/vite': V16_X_NX_VITE,
8086
jsdom: V16_X_JSDOM,
8187
'vite-tsconfig-paths': V16_X_VITE_TSCONFIG_PATHS,
8288
vitest: V16_X_VITEST,
8389
};
8490
}
8591

86-
// install 16.x deps for versions <18.0.0
92+
// install 17.x deps for versions <18.0.0
8793
if (lt(escapedAngularVersion, '18.0.0')) {
8894
return {
89-
'@analogjs/platform': V16_X_ANALOG_JS_PLATFORM,
90-
'@analogjs/vite-plugin-angular': V16_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
91-
'@nx/vite': V16_X_NX_VITE,
92-
jsdom: V16_X_JSDOM,
93-
'vite-tsconfig-paths': V16_X_VITE_TSCONFIG_PATHS,
94-
vitest: V16_X_VITEST,
95+
'@analogjs/platform': V17_X_ANALOG_JS_PLATFORM,
96+
'@analogjs/vite-plugin-angular': V17_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
97+
'@analogjs/vitest-angular': V17_X_ANALOG_JS_VITEST_ANGULAR,
98+
'@nx/vite': V17_X_NX_VITE,
99+
jsdom: V17_X_JSDOM,
100+
'vite-tsconfig-paths': V17_X_VITE_TSCONFIG_PATHS,
101+
vitest: V17_X_VITEST,
95102
};
96103
}
97104

98105
// return latest 18.x deps for versions >18.0.0
99106
return {
100107
'@analogjs/platform': V18_X_ANALOG_JS_PLATFORM,
101108
'@analogjs/vite-plugin-angular': V18_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
109+
'@analogjs/vitest-angular': V18_X_ANALOG_JS_VITEST_ANGULAR,
102110
'@nx/vite': V18_X_NX_VITE,
103111
jsdom: V18_X_JSDOM,
104112
'vite-tsconfig-paths': V18_X_VITE_TSCONFIG_PATHS,

0 commit comments

Comments
 (0)