+
Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 30, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 26 additions & 8 deletions apps/docs-app/docs/features/testing/vitest.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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,
Expand All @@ -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
{
Expand All @@ -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"
}
}
}
Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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()],
}));
```
2 changes: 1 addition & 1 deletion packages/create-analog/template-angular-v16/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
}
},
"test": {
"builder": "@analogjs/platform:vitest"
"builder": "@analogjs/vitest-angular:test"
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/create-analog/template-angular-v17/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
}
},
"test": {
"builder": "@analogjs/platform:vitest"
"builder": "@analogjs/vitest-angular:test"
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/create-analog/template-blog/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
}
},
"test": {
"builder": "@analogjs/platform:vitest"
"builder": "@analogjs/vitest-angular:test"
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/create-analog/template-latest/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
}
},
"test": {
"builder": "@analogjs/platform:vitest"
"builder": "@analogjs/vitest-angular:test"
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export function addAnalogProjectConfig(
},
},
test: {
[builders]: `@analogjs/platform:vitest`,
[builders]: `@analogjs/vitest-angular:test`,
},
},
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};

Expand All @@ -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,
};

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import '@analogjs/vite-plugin-angular/setup-vitest';
import '@analogjs/vitest-angular/setup-zone';

import {
BrowserDynamicTestingModule,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down
22 changes: 15 additions & 7 deletions packages/nx-plugin/src/utils/versions/dev-dependencies.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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 = [
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down
5 changes: 3 additions & 2 deletions packages/nx-plugin/src/utils/versions/ng_15_X/versions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
9 changes: 5 additions & 4 deletions packages/nx-plugin/src/utils/versions/ng_16_X/versions.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
9 changes: 5 additions & 4 deletions packages/nx-plugin/src/utils/versions/ng_17_X/versions.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
9 changes: 5 additions & 4 deletions packages/nx-plugin/src/utils/versions/ng_18_X/versions.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
Loading
点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载