Zum Hauptinhalt springen

Hinzufügen von Vitest zu einem bestehenden Projekt

Vitest kann mit wenigen Schritten zu bestehenden Angular-Workspaces hinzugefügt werden.

Verwendung eines Schemas/Generators​

Vitest kann mit Hilfe eines Schemas/Generators für Angular CLI- oder Nx-Workspaces installiert und eingerichtet werden.

Installiere zunächst das Paket @analogjs/platform:

npm install @analogjs/platform --save-dev

Führe anschließend das Schema aus, um die Vite-Konfiguration und die Testkonfigurationsdateien einzurichten und die Testkonfiguration zu aktualisieren.

ng g @analogjs/platform:setup-vitest --project [your-project-name]

Gehe dann zu Tests durchführen

Manuelle Installation​

Um Vitest manuell hinzuzufügen, installiere die erforderlichen Pakete:

npm install @analogjs/vite-plugin-angular @analogjs/vitest-angular jsdom --save-dev

Einrichtung für die Durchführung von Tests für Node​

Um Vitest einzurichten, erstelle eine vite.config.ts im Stammverzeichnis des Projekts:

/// <reference types="vitest" />
import { defineConfig } from 'vite';

import angular from '@analogjs/vite-plugin-angular';

export default defineConfig(({ mode }) => ({
  plugins: [angular()],
  test: {
    globals: true,
    setupFiles: ['src/test-setup.ts'],
    environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    reporters: ['default'],
  },
  define: {
    'import.meta.vitest': mode !== 'production',
  },
}));

Als nächstes wird eine Datei src/test-setup.ts definiert, um das TestBed einzurichten:

import '@analogjs/vitest-angular/setup-zone';

import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
import { getTestBed } from '@angular/core/testing';

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);

Als Nächstes aktualisiere das Ziel test in der Datei angular.json, um den Builder @analogjs/vitest-angular:test zu verwenden:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "your-project": {
      "projectType": "application",
      "architect": {
        "build": ...,
        "serve": ...,
        "extract-i18n": ...,
        "test": {
          "builder": "@analogjs/vitest-angular:test"
        }
      }
    }
  }
}

Du kannst auch ein neues Ziel hinzufügen und es vitest nennen, um es neben deinem test-Ziel auszuführen.

Schließlich füge die Datei src/test-setup.ts zum Array files in der Datei tsconfig.spec.json im Stammverzeichnis des Projekts hinzu, setze das target auf es2016 und aktualisiere die types.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "target": "es2016",
    "types": ["vitest/globals", "node"]
  },
  "files": ["src/test-setup.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

Gehe dann zu Tests durchführen

Einrichtung für die Ausführung von Tests im Browser​

Wenn die Tests lieber in einem Browser durchgeführt werden sollen, bietet Vitest auch experimentelle Unterstützung für Browsertests.

Führe zunächst die Schritte für die Einrichtung für die Durchführung von Tests für Node aus.

Installiere dann die erforderlichen Pakete für die Ausführung von Tests im Browser:

npm install @vitest/browser playwright --save-dev

Aktualisiere das Objekt test in der Datei vite.config.ts.

  • Entferne die Eigenschaft environment: 'jsdom'.
  • Füge eine browser-Konfiguration für Vitest hinzu.
/// <reference types="vitest" />
import { defineConfig } from 'vite';

import angular from '@analogjs/vite-plugin-angular';

export default defineConfig(({ mode }) => ({
  plugins: [angular()],
  test: {
    globals: true,
    setupFiles: ['src/test-setup.ts'],
    // environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    reporters: ['default'],
    // Vitest browser config
    browser: {
      enabled: true,
      name: 'chromium',
      headless: false, // set to true in CI
      provider: 'playwright',
    },
  },
  define: {
    'import.meta.vitest': mode !== 'production',
  },
}));

Tests durchführen​

Um Unit-Tests durchzuführen, verwende den Befehl test:

npm run test

Snapshot-Tests​

Für Snapshot-Tests kann toMatchSnapshot aus der API expect verwendet werden.

Im Folgenden findest du ein kleines Beispiel für die Erstellung eines Snapshot-Tests:

// card.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { CardComponent } from './card.component';

describe('CardComponent', () => {
  let fixture: ComponentFixture<CardComponent>;
  let component: CardComponent;

  beforeEach(() =>
    TestBed.configureTestingModule({
      imports: [CardComponent],
    })
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(CardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create the app', () => {
    expect(fixture).toMatchSnapshot();
  });
});

Nachdem der Test ausgeführ wurde, wird im Ordner __snapshots__ eine Datei card.component.spec.ts.snap mit dem folgenden Inhalt erstellt:

// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`CardComponent > should create the app 1`] = `
  <component-code>
`;

Die erstellten Snapshots sollten überprüft und zur Versionskontrolle hinzugefügt werden.

Verwendung von TypeScript-Konfigurationspfad-Aliasen​

Wenn paths in der tsconfig.json verwendet werden, kann die Unterstützung für diese Aliase in der vite.config.ts hinzufügt werden.

Mit Angular-CLI​

Installiere zunächst das Paket vite-tsconfig-paths.

npm install vite-tsconfig-paths --save-dev

Als Nächstes füge das Plugin zum Array plugins in der Datei vite.config.ts hinzu, wobei root als relativer Pfad zum Stamm des Projekts festgelegt wird.

/// <reference types="vitest" />
import { defineConfig } from 'vite';

import angular from '@analogjs/vite-plugin-angular';
import viteTsConfigPaths from 'vite-tsconfig-paths';

export default defineConfig(({ mode }) => ({
  plugins: [angular(), viteTsConfigPaths()],
}));

Mit Nx​

Für Nx-Arbeitsbereiche importiere und verwende das Plugin nxViteTsPaths aus dem Paket @nx/vite.

/// <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()],
}));