Zum Hauptinhalt springen
Version: 30.0

Erste Schritte

Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Installiere Jest mit deinem bevorzugten Paketmanager:

npm install --save-dev jest

Beginnen wir mit dem Schreiben eines Tests für eine hypothetische Funktion, die zwei Zahlen addiert. Erstelle zuerst eine sum.js-Datei:

function sum(a, b) {
  return a + b;
}
module.exports = sum;

Erstelle dann eine Datei namens sum.test.js. Diese wird unseren eigentlichen Test enthalten:

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Füge folgenden Abschnitt in deine package.json ein:

{
  "scripts": {
    "test": "jest"
  }
}

Führe abschließend yarn test oder npm test aus, und Jest gibt diese Meldung aus:

PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

Du hast soeben deinen ersten Test mit Jest erfolgreich geschrieben!

Dieser Test verwendete expect und toBe, um zu prüfen, ob zwei Werte exakt identisch sind. Um mehr über die weiteren Testmöglichkeiten von Jest zu erfahren, siehe Matcher verwenden.

Ausführung über die Kommandozeile​

Du kannst Jest direkt über die CLI ausführen (falls es global in deinem PATH verfügbar ist, z.B. via yarn global add jest oder npm install jest --global) mit verschiedenen nützlichen Optionen.

So führst du Jest für Dateien aus, die auf my-test passen, verwendest config.json als Konfigurationsdatei und zeigst nach Ausführung eine native Systembenachrichtigung an:

jest my-test --notify --config=config.json

Wenn du mehr über die Ausführung von jest über die Kommandozeile lernen möchtest, sieh dir die Seite Jest CLI-Optionen an.

Zusätzliche Konfiguration​

Erzeuge eine grundlegende Konfigurationsdatei​

Basierend auf deinem Projekt stellt Jest dir einige Fragen und erstellt eine grundlegende Konfigurationsdatei mit einer kurzen Beschreibung für jede Option:

npm init jest@latest

Babel verwenden​

Um Babel zu verwenden, installiere die erforderlichen Abhängigkeiten:

npm install --save-dev babel-jest @babel/core @babel/preset-env

Konfiguriere Babel für deine aktuelle Node-Version, indem du eine babel.config.js-Datei im Stammverzeichnis deines Projekts erstellst:

babel.config.js
module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

Die ideale Konfiguration für Babel hängt von deinem Projekt ab. Weitere Details findest du in der Babel-Dokumentation.

Making your Babel config jest-aware

Jest will set process.env.NODE_ENV to 'test' if it's not set to something else. You can use that in your configuration to conditionally setup only the compilation needed for Jest, e.g.

babel.config.js
module.exports = api => {
  const isTest = api.env('test');
  // You can use isTest to determine what presets and plugins to use.

  return {
    // ...
  };
};
Hinweis

babel-jest is automatically installed when installing Jest and will automatically transform files if a babel configuration exists in your project. To avoid this behavior, you can explicitly reset the transform configuration option:

jest.config.js
module.exports = {
  transform: {},
};

Verwendung mit Bundlern​

In den meisten Fällen musst du nichts Besonderes tun, um mit verschiedenen Bundlern zu arbeiten - die Ausnahme ist, wenn du Plugins oder Konfigurationen hast, die Dateien generieren oder eigene Dateiauflösungsregeln verwenden.

Webpack verwenden​

Jest kann in Projekten verwendet werden, die webpack zur Verwaltung von Assets, Styles und Kompilierung einsetzen. Webpack stellt einige einzigartige Herausforderungen dar. Siehe den Webpack-Leitfaden für den Einstieg.

Vite verwenden​

Jest wird von Vite aufgrund von Inkompatibilitäten mit dem Vite-Plugin-System nicht unterstützt.

Es gibt Beispiele für die Jest-Integration mit Vite in der vite-jest-Bibliothek. Diese Bibliothek ist jedoch nicht mit Vite-Versionen nach 2.4.2 kompatibel.

Eine Alternative ist Vitest, der eine zu Jest kompatible API bietet.

Parcel verwenden​

Jest kann in Projekten verwendet werden, die parcel-bundler zur Verwaltung von Assets, Styles und Kompilierung ähnlich wie webpack einsetzen. Parcel benötigt keine Konfiguration. Siehe die offizielle Dokumentation für den Einstieg.

TypeScript verwenden​

Über babel​

Jest unterstützt TypeScript über Babel. Stelle zunächst sicher, dass du die Anweisungen unter Babel verwenden befolgt hast. Installiere dann @babel/preset-typescript:

npm install --save-dev @babel/preset-typescript

Füge anschließend @babel/preset-typescript zur Liste der Presets in deiner babel.config.js hinzu.

babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

Es gibt jedoch einige Einschränkungen bei der Verwendung von TypeScript mit Babel. Da die TypeScript-Unterstützung in Babel reines Transpilieren ist, überprüft Jest während der Testausführung nicht Ihre Typen. Falls Sie dies benötigen, können Sie stattdessen ts-jest verwenden oder den TypeScript-Compiler tsc separat (oder als Teil Ihres Build-Prozesses) ausführen.

Über ts-jest​

ts-jest ist ein TypeScript-Präprozessor mit Source-Map-Unterstützung für Jest, der es ermöglicht, Jest zum Testen von in TypeScript geschriebenen Projekten zu verwenden.

npm install --save-dev ts-jest

Damit Jest TypeScript mit ts-jest transpilieren kann, müssen Sie möglicherweise eine Konfigurationsdatei erstellen.

Typdefinitionen​

Es gibt zwei Möglichkeiten, die Jest Global APIs für in TypeScript geschriebene Testdateien zu typisieren.

Sie können die mitgelieferten Typdefinitionen verwenden, die mit Jest aktualisiert werden. Installieren Sie das Paket @jest/globals:

npm install --save-dev @jest/globals

Und importieren Sie die APIs daraus:

sum.test.ts
import {describe, expect, test} from '@jest/globals';
import {sum} from './sum';

describe('sum module', () => {
  test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
});
Tipp

Siehe die zusätzliche Dokumentation zur Verwendung von describe.each/test.each und mock functions.

Alternativ können Sie das Paket @types/jest installieren. Es bietet Typen für Jest-Globals ohne Importnotwendigkeit.

npm install --save-dev @types/jest
Hinweis

@types/jest ist eine Drittanbieter-Bibliothek, die bei DefinitelyTyped gepflegt wird. Daher sind die neuesten Jest-Funktionen oder Versionen möglicherweise noch nicht abgedeckt. Versuchen Sie, die Versionen von Jest und @types/jest möglichst genau abzustimmen. Beispiel: Bei Verwendung von Jest 27.4.0 ist die Installation von @types/jest in Version 27.4.x ideal.

Verwendung mit ESLint​

Jest kann ohne weitere Konfiguration mit ESLint verwendet werden, sofern Sie die Jest Global-Helfer (describe, it, etc.) aus @jest/globals importieren, bevor Sie sie in Ihrer Testdatei verwenden. Dies ist notwendig, um no-undef-Fehler von ESLint zu vermeiden, das die Jest-Globals nicht kennt.

Falls Sie diese Imports vermeiden möchten, können Sie Ihre ESLint-Umgebung für diese Globals konfigurieren, indem Sie die jest-Umgebung hinzufügen:

import {defineConfig} from 'eslint/config';
import globals from 'globals';

export default defineConfig([
  {
    files: ['**/*.js'],
    languageOptions: {
      globals: {
        ...globals.jest,
      },
    },
    rules: {
      'no-unused-vars': 'warn',
      'no-undef': 'warn',
    },
  },
]);

Oder verwenden Sie eslint-plugin-jest, das einen ähnlichen Effekt hat:

{
  "overrides": [
    {
      "files": ["tests/**/*"],
      "plugins": ["jest"],
      "env": {
        "jest/globals": true
      }
    }
  ]
}