Wie du deine Anwendungen mit Jest testest

Softwaretests sind wichtig, um sicherzustellen, dass deine Anwendungen wie erwartet funktionieren, vor allem wenn du Änderungen einführst. Das frühzeitige Aufspüren und Beheben von Fehlern in der Entwicklung ist entscheidend für einen stabilen, qualitativ hochwertigen Code.

Unter den vielen verfügbaren Tools und Frameworks für JavaScript-Tests ist Jest eines der beliebtesten. Jest ist ein Produkt von Meta und bietet umfangreiche Testfunktionen für JavaScript-Anwendungen und solche, die mit JavaScript-Frameworks erstellt wurden.

Wir wollen das Jest-Framework und seine Funktionen kennenlernen und herausfinden, wie du es am besten in deinen Entwicklungsprozess integrieren kannst.

Was ist Jest?

Jest ist ein flexibles Framework und einfach zu bedienen. Zusätzlich zu den Kernfunktionen für das Testen von JavaScript bietet es Konfigurationen und Plugins für das Testen von Babel, Webpack, Vite, Parcel oder TypeScript-basierten Anwendungen.

Jest wird von vielen Entwicklern genutzt und verfügt über eine Reihe von Plugins, die von der Community entwickelt und gepflegt werden. Es zeichnet sich durch seine Benutzerfreundlichkeit aus: Für JavaScript-Tests sind keine zusätzlichen Konfigurationen oder Plug-ins erforderlich. Du kannst aber auch fortgeschrittenere Tests durchführen – wie z. B. das Testen von JavaScript-Frameworks – indem du einige zusätzliche Konfigurationsoptionen verwendest.

So richtest du Jest für dein JavaScript-Projekt ein

Sehen wir uns an, wie du Jest in einem bestehenden JavaScript-Projekt einrichtest.

Voraussetzungen

Um diesem Tutorial folgen zu können, musst du über folgende Voraussetzungen verfügen:

• Node.js ist installiert.
• npm (bereits Teil von Node.js) oder Yarn installiert.
• Das npm-Paket von Jest ist installiert.

Installiere das Jest-Paket

1. Wenn du noch kein Projekt hast, um diesem Tutorial zu folgen, kannst du dieses Repo als Ausgangspunkt verwenden.

Der starter-files Zweig bietet dir eine Basis, um die Anwendung zu bauen, während du dem Tutorial folgst. Verweise auf die main Verzweigung, um den Code des Leitfadens zu sehen und deinen Code zu überprüfen.

2. Um Jest mit npm zu installieren, gehe in deinem Terminal in das Projektverzeichnis und führe den folgenden Befehl aus:

npm install --save-dev jest

Die Option --save-dev weist npm an, das Paket unter devDependencies zu installieren, das die Abhängigkeiten enthält, die du für die Entwicklung brauchst.

Jest konfigurieren

Obwohl Jest in der Regel ohne zusätzliche Konfiguration funktioniert, gibt es zwei Möglichkeiten, seine Leistungsfähigkeit zu erweitern: in der package.json-Datei und über eine Jest-Konfigurationsdatei.

Jest in package.json konfigurieren

Füge in deiner package.json-Datei ein Objekt mit dem Namen jest mit den unten abgebildeten Eigenschaften hinzu:

{
  …
  "jest": {
    "displayName": "Ecommerce",
    "globals": {
      "PROJECT_NAME": "Ecommerce TD"
    },
    "bail": 20,
    "verbose": true
  },
}

Während des Tests durchsucht Jest dieses Objekt und wendet diese Konfigurationen an. Auf der Konfigurationsseite von Jest kannst du weitere Optionen einsehen, aber die Eigenschaften dieses Objekts sind:

• displayName – Jest fügt den Wert dieser Eigenschaft als Beschriftung zu deinen Testergebnissen hinzu.
• globals – Enthält einen Objektwert, um globale Variablen zu definieren, die in deinen Testumgebungen verfügbar sind.
• bail – Standardmäßig führt Jest alle Tests durch und zeigt die Fehler in den Ergebnissen an. bail weist Jest an, nach einer bestimmten Anzahl von Fehlern aufzuhören.
• verbose – Bei der Einstellung true werden während der Testausführung einzelne Testberichte angezeigt.

Jest in einer Konfigurationsdatei konfigurieren

Du kannst Jest auch in einer jest.config.js-Datei konfigurieren. Jest unterstützt auch die Erweiterungen .ts, .mjs, .cjs und .json. Beim Ausführen von Tests sucht Jest nach diesen Dateien und wendet die Einstellungen in der gefundenen Datei an.

Nehmen wir zum Beispiel diese jest.config.js-Datei:

const config = {
  displayName: "Ecommerce",
  globals: {
    "PROJECT_NAME": "Ecommerce TD"
  },
  bail: 20,
  verbose: true
}

module.exports = config;

Der Code exportiert ein Jest-Konfigurationsobjekt mit den gleichen Eigenschaften wie im vorherigen Beispiel.

Du kannst auch eine benutzerdefinierte Datei verwenden, die ein JSON-serialisierbares Konfigurationsobjekt enthält, und den Dateipfad beim Ausführen deiner Tests an die Option --config übergeben.

Eine einfache Testdatei erstellen

Nachdem du Jest konfiguriert hast, erstellst du deine Testdateien. Jest überprüft die Testdateien deines Projekts, führt sie aus und liefert die Ergebnisse. Testdateien haben normalerweise ein Format wie [Name].test.js oder [Name]-test.js. Dieses Muster macht es sowohl für Jest als auch für dein Team einfach, deine Testdateien zu identifizieren.

Nehmen wir eine string-format.js-Datei mit dem folgenden Code:

function truncate(
  str,
  count,
  withEllipsis = true
) {
  if (str.length < = count)
    return str

  const substring = str.substr(0, count)

  if (!withEllipsis)
    return substring

  return substring + '...'
}

module.exports = { truncate }

Die Funktion truncate() kürzt Strings auf eine bestimmte Länge mit der Option, ein Auslassungszeichen hinzuzufügen.

Den Test schreiben

1. Erstelle eine Testdatei mit dem Namen string-format.test.js.
2. Damit deine Dateien übersichtlich bleiben, legst du die Datei string-format.test.js im selben Verzeichnis ab wie die Datei string-format.js oder in einem speziellen Testverzeichnis. Unabhängig davon, wo sich deine Testdatei innerhalb des Projekts befindet, findet Jest sie und führt sie aus. Mit Jest kannst du deine Anwendungen in verschiedenen Szenarien testen.
3. Schreibe einen einfachen Test in string-format.test.js wie folgt:

const { truncate } = require('./string-format')

test('truncates a string correctly', () = > {
  expect(truncate("I am going home", 6)).toBe('I am g...')
})

Der Testfall hat die Beschreibung truncates a string correctly. Dieser Code verwendet die von Jest bereitgestellte Funktion expect, die prüft, ob ein Wert mit dem erwarteten Ergebnis übereinstimmt.

Der Code übergibt truncate("I am going home", 6) als Argument an expect. Dieser Code testet den Wert, der beim Aufruf von truncate mit den Argumenten "I am going home" und 6 zurückgegeben wird. Der Aufruf von expect gibt ein Erwartungsobjekt zurück, das Zugriff auf die Jest-Matches bietet.

Es enthält auch den toBe Matcher, der "I am g…" als Argument hat. Der toBe Matcher testet die Gleichheit zwischen den erwarteten und den tatsächlichen Werten.

Ausführen des Tests

Um deine Tests auszuführen, definierst du den Befehl jest.

1. Füge dieses test Skript in die package.json Datei deines Projekts ein:

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

2. Führe nun npm run test, npm test oder npm t in deinem Terminal aus. Dadurch wird Jest für das Projekt ausgeführt.

Wenn du die Tests ausführst, ist das das Ergebnis:

Die Ergebnisse zeigen eine Testsuite (die Datei string-format.test.js), einen erfolgreich ausgeführten Test ("truncates a string correctly") und die displayName (Ecommerce), die du in der Konfiguration festgelegt hast.

3. Wenn du in string-format.js einen zusätzlichen Punkt einfügst, um den Code zu unterbrechen und den Test auszuführen, schlägt er fehl:

Dieses Ergebnis deutet darauf hin, dass du die Funktiontruncate beschädigt oder Aktualisierungen vorgenommen hast, die eine Aktualisierung der Tests erfordern.

Wie man Tests mit Jest schreibt

Jest-Test-Syntax

Die proprietäre Syntax von Jest ist einfach zu verwenden. Jest stellt deinem Projekt globale Methoden und Objekte für das Schreiben von Tests zur Verfügung. Einige der grundlegenden Begriffe sind describe, test, expect und Matcher.

• describe: Diese Funktion fasst zusammengehörige Tests in einer Datei zusammen.
• test: Diese Funktion führt den Test aus. Sie ist ein Alias für it. Sie enthält Assertions für die Werte, die du testen willst.
• expect: Diese Funktion deklariert die Assertions für verschiedene Werte. Sie ermöglicht den Zugriff auf Matcher für verschiedene Formen von Assertions.
• Abgleicher: Mit ihnen kannst du einen Wert auf verschiedene Arten behaupten. Du kannst Wertgleichheit, boolesche Gleichheit und kontextbezogene Gleichheit (z. B. ob ein Array den Wert enthält) behaupten.

Um sie zu verwenden, schau dir das folgende Beispiel an:

1. Ersetze den Test in der Datei string-format.test.js durch den folgenden Code:

describe("all string formats work as expected", () = > {
  test("truncates a string correctly", () = > {
    expect(
      truncate("I am going home", 6)
    ).toBe("I am g...")
  })
})

2. Führe den Code aus.

Das Ergebnis sieht wie folgt aus:

Der Screenshot zeigt, dass das Label in der Funktion describe einen Block erzeugt. Obwohl describe optional ist, ist die Gruppierung der Tests in einer Datei mit mehr Kontext hilfreich.

Tests in Testsuiten organisieren

In Jest besteht ein Testfall aus der Funktion test, der Funktion expect und einem Matcher. Eine Sammlung von zusammenhängenden Testfällen ist eine Testsuite. Im vorherigen Beispiel ist string-format.test.js eine Testsuite, die einen Testfall zum Testen der Datei string-format.js enthält.

Angenommen, du hast noch weitere Dateien in deinem Projekt, wie file-operations.js, api-logger.js und number-format.js. Du kannst für diese Dateien Testsuiten erstellen, wie file-operations.test.js, api-logger.test.js und number-format.test.js.

Einfache Assertions mit Jest Matchers schreiben

Wir haben uns ein Beispiel für die Verwendung des toBe Matchers angesehen. Assertions mit anderen Jest-Matchern sind:

• toEqual – Zum Testen von „tiefer“ Gleichheit in Objektinstanzen.
• toBeTruthy – Um zu prüfen, ob ein Wert in einem booleschen Kontext wahr ist.
• toBeFalsy – Um zu prüfen, ob ein Wert in einem booleschen Kontext falsch ist.
• toContain – Um zu prüfen, ob ein Array einen Wert enthält.
• toThrow – Um zu prüfen, ob eine aufgerufene Funktion einen Fehler auslöst.
• stringContaining – Um zu prüfen, ob eine Zeichenkette eine Teilzeichenkette enthält.

Schauen wir uns Beispiele für einige dieser Matcher an.

Du könntest zum Beispiel von einer Funktion oder einem Code erwarten, dass er ein Objekt mit bestimmten Eigenschaften und Werten zurückgibt.

1. Teste diese Funktion mit dem folgenden Codeschnipsel. In diesem Fall willst du sicherstellen, dass das zurückgegebene Objekt mit dem erwarteten Objekt übereinstimmt.

expect({
  name: "Joe",
  age: 40
}).toBe({
  name: "Joe",
  age: 40
})

In diesem Beispiel wird toBe verwendet. Der Test schlägt fehl, da dieser Matcher nicht auf tiefe Gleichheit prüft – er prüft den Wert, nicht alle Eigenschaften.

2. Verwende den toEqual Matcher, um auf tiefe Gleichheit zu prüfen:

expect({
  name: "Joe",
  age: 40
}).toEqual({
  name: "Joe",
  age: 40
})

Dieser Test ist erfolgreich, da beide Objekte „tief gleich“ sind, d.h. alle ihre Eigenschaften sind gleich.

3. Probiere ein weiteres Matcher-Beispiel aus, das prüft, ob das definierte Array ein bestimmtes Element enthält.

expect(["orange", "pear", "apple"]).toContain("mango")

Dieser Test schlägt fehl, weil toContain behauptet, dass das Array ["orange", "pear", "apple"] einen erwarteten Wert "mango" enthält, das Array aber nicht.

4. Verwende Variablen für den gleichen Test wie im folgenden Code:

const fruits = ["orange", "pear", "apple"];
const expectedFruit = "mango";

expect(fruits).toContain(expectedFruit)

Asynchronen Code testen

Bis jetzt haben wir synchronen Code getestet – Ausdrücke, die einen Wert zurückgeben, bevor der Code die folgende Zeile ausführt. Du kannst Jest auch für asynchronen Code mit async, await, oder Promises verwenden.

Die Datei apis.js enthält zum Beispiel eine Funktion, mit der eine API-Anfrage gestellt wird:

function getTodos() {
  return fetch('https://jsonplaceholder.typicode.com/todos/1')
}

Die Funktion getTodos sendet eine GET Anfrage an https://jsonplaceholder.typicode.com/todos/1.

1. Erstelle eine Datei namens apis.test.js mit dem folgenden Code, um die gefälschte API zu testen:

const { getTodos } = require('./apis')

test("gets a todo object with the right properties", () = > {
  return getTodos()
    .then((response) = > {
      return response.json()
    })
    .then((data) = > {
      expect(data).toHaveProperty('userId')
      expect(data).toHaveProperty('id')
      expect(data).toHaveProperty('title')
      expect(data).toHaveProperty('completed')
      expect(data).toHaveProperty('description')
    })
})

Dieser Testfall ruft die Funktion getTodos auf, die ein todo Objekt abruft. Wenn er das Promise auflöst, verwendet er die Methode .then, um den aufgelösten Wert zu erhalten.

In diesem Wert gibt der Code response.json() zurück, der ein weiteres Promise ist, das die Antwort in das JSON-Format umwandelt. Eine weitere Methode .then erhält das JSON-Objekt, das die expect und Matcher enthält. Der Code behauptet, dass das JSON-Objekt fünf Eigenschaften enthält: userId, id, title, completed und description.

2. Führe die Tests aus:

 

Wie der Screenshot zeigt, schlägt der Test für getTodos() fehl. Er erwartet die Eigenschaft description, aber die API gibt sie nicht zurück. Mit diesen Informationen kannst du nun das API-Management-Team deines Unternehmens bitten, diese Eigenschaft einzubauen, wenn die Anwendung sie braucht, oder die Tests so zu aktualisieren, dass sie die Antwort der API erfüllen.

3. Entferne die Behauptung für die Eigenschaft description und führe die Tests erneut durch:

 

Der Screenshot zeigt, dass alles den Test bestanden hat.

4. Versuche nun, async/await anstelle der traditionellen Promise-Verarbeitung zu verwenden:

test("gets a todo object with the right properties", async () = > {
  const response = await getTodos()
  const data = await response.json()

  expect(data).toHaveProperty("userId")
  expect(data).toHaveProperty("id")
  expect(data).toHaveProperty("title")
  expect(data).toHaveProperty("completed")
})

Das Schlüsselwort async steht jetzt vor der Funktion. Der Code verwendet await vor getTodos() und await vor response.json().

Erweiterte Jest-Funktionen

Mock-Funktionen und Module

Wenn du Tests schreibst, möchtest du vielleicht einen Ausdruck mit externen Abhängigkeiten testen. In manchen Fällen, insbesondere bei Unit-Tests, sollten deine Unit-Tests von externen Effekten isoliert sein. In diesem Fall kannst du deine Funktionen oder Module mit Jest mocken, um deine Tests besser kontrollieren zu können.

1. Nehmen wir zum Beispiel eine functions.js-Datei, die den folgenden Code enthält:

function multipleCalls(count, callback) {
  if (count < 0) return;

  for (let counter = 1; counter <= count; counter++) {
    callback()
  }
}

Die Funktion multipleCalls wird basierend auf dem Wert von count ausgeführt. Sie hängt von der Callback-Funktion – der externen Abhängigkeit – ab. Ihr Zweck ist es zu wissen, ob multipleCalls die externe Abhängigkeit korrekt ausführt.

2. Um die externe Abhängigkeit zu simulieren und den Zustand der Abhängigkeit in deiner Testdatei functions.test.js zu verfolgen, benutze diesen Code:

const { multipleCalls } = require('./functions')

test("functions are called multiple times correctly", () => {
  const mockFunction = jest.fn()

  multipleCalls(5, mockFunction)

  expect(
    mockFunction.mock.calls.length
  ).toBe(5)
})

Hier erstellt die Methode fn des jest Objekts eine Mock-Funktion. Dann führt der Code multipleCalls aus, indem er 5 und die Mock-Funktion als Argumente übergibt. Dann wird behauptet, dass mockFunction fünfmal aufgerufen wird. Die Eigenschaft mock enthält Informationen darüber, wie der Code die Funktion aufruft und welche Werte zurückgegeben werden.

3. Wenn du den Test ausführst, ist dies das erwartete Ergebnis:

 

Wie gezeigt, ruft der Code die mockFunction fünfmal auf.

Im Code imitiert die Mock-Funktion eine externe Abhängigkeit. Es spielt keine Rolle, was die externe Abhängigkeit ist, wenn die Anwendung multipleCalls in der Produktion verwendet. Deinem Unit-Test ist es egal, wie die externe Abhängigkeit funktioniert. Er prüft nur, ob multipleCalls wie erwartet funktioniert.

4. Um Module nachzubilden, verwendest du die Methode mock und übergibst einen Dateipfad, der das Modul darstellt:

const {
  truncate,
} = require("./string-format")

jest.mock("./string-format.js")

Dieser Code imitiert alle Funktionen, die string-format.js exportiert, und verfolgt, wie oft er sie aufruft. Die truncate des Moduls wird zu einer Mock-Funktion, die bewirkt, dass die Funktion ihre ursprüngliche Logik verliert. Wie oft truncate in deinen Tests ausgeführt wird, kannst du in der Eigenschaft truncate.mock.calls.length herausfinden.

Wenn du einen Fehler hast oder dein Code nicht funktioniert, vergleiche deinen Code mit der vollständigen Implementierung.

React-Komponenten mit Jest und der React Testing Library testen

Wenn du noch kein Projekt hast, mit dem du diesem Tutorial folgen kannst, kannst du dieses React-Beispielprojekt als Ausgangspunkt verwenden. Der starter-files Zweig hilft dir dabei, den Code zu erstellen, während du dem Tutorial folgst. Nutze den main Zweig als Referenz, um deinen Code mit dem vollständigen Code dieses Leitfadens abzugleichen.

Du kannst Jest verwenden, um JavaScript-Frameworks wie React zu testen. Wenn du React-Projekte mit Create React App erstellst, unterstützen sie die React Testing Library und Jest bereits von Haus aus. Wenn du ein React-Projekt ohne Create React App erstellst, installiere Jest, um React mit Babel und der React Testing Library zu testen. Wenn du den starter-app Zweig klonst, musst du keine Abhängigkeiten installieren oder Konfigurationen anwenden.

1. Wenn du das Beispielprojekt verwendest, installierst du mit diesem Befehl die erforderlichen Abhängigkeiten:

npm install --save-dev babel-jest @babel/preset-env @babel/preset-react react-testing-library

Du kannst auch Enzyme anstelle der React Testing Library verwenden.

2. Aktualisiere deine Babel-Konfigurationen in babel.config.js oder erstelle diese Datei, wenn sie nicht existiert:

module.exports = {
  presets: [
    '@babel/preset-env',
      ['@babel/preset-react', {runtime: 'automatic'}],
  ],
};

3. Betrachte die Datei src/SubmitButton.js , die den folgenden Code enthält:

import React, { useState } from 'react'

export default function SubmitButton(props) {
  const {id, label, onSubmit} = props
  const [isLoading, setisLoading] = useState(false)

  const submit = () => {
    setisLoading(true)
    onSubmit()
  }

  return 

Diese SubmitButton Komponente erhält drei Props:

• id – Den Bezeichner der Schaltfläche.
• label – Welcher Text auf der Schaltfläche angezeigt werden soll.
• onSubmit – Die Funktion, die ausgelöst werden soll, wenn jemand auf die Schaltfläche klickt.

Der Code weist das Attribut id dem Attribut data-testid zu, das ein Element für den Test identifiziert.

Die Komponente verfolgt auch den Zustand isLoading und aktualisiert ihn auf true, wenn jemand auf die Schaltfläche klickt.

4. Erstelle den Test für diese Komponente. Füge den folgenden Code in die Datei SubmitButton.test.js ein:

import {fireEvent, render, screen} from "@testing-library/react"
import "@testing-library/jest-dom"
import SubmitButton from "./SubmitButton"

test("SubmitButton becomes disabled after click", () => {
  const submitMock = jest.fn()

  render(
    <SubmitButton
      id="submit-details"
      label="Submit"
      onSubmit={submitMock}
    / >
  )

  expect(screen.getByTestId("submit-details")).not.toBeDisabled()

  fireEvent.submit(screen.getByTestId("submit-details"))

  expect(screen.getByTestId("submit-details")).toBeDisabled()
})

Der obige Code rendert die Komponente SubmitButton und verwendet die Abfragemethode screen.getByTestId, um den DOM-Knoten über das Attribut data-testid abzurufen.

Das erste expect ist getByTestId("submit-details") und verwendet den not Modifikator und den toBeDisabled Matcher (der von react-testing-library aus zugänglich ist), um festzustellen, dass die Schaltfläche nicht deaktiviert ist. Verwende den not Modifikator mit jedem Matcher, um das Gegenteil des Matchers zu bestätigen.

Dann löst der Code das Ereignis submit auf der Komponente aus und überprüft, ob die Schaltfläche deaktiviert ist. Weitere benutzerdefinierte Matcher findest du in der Dokumentation der Testbibliothek.

5. Führe nun die Tests aus. Wenn du den Zweig starter-files geklont hast, stelle sicher, dass du alle Projektabhängigkeiten installiert hast, indem du npm install ausführst, bevor du deine Tests startest.

Code-Coverage-Berichte ausführen

Jest bietet auch Code Coverage Reports, die zeigen, wie viel von deinem Projekt du testest.

1. Übergib die Option --coverage an Jest. Aktualisiere in deinem Jest-Skript in package.json (im JavaScript-Projekt) den Jest-Befehl mit dieser Abdeckungsoption:

"scripts": {
  "test": "jest --coverage"
}

2. Führe npm run test aus, um deinen Code zu testen. Du erhältst einen Bericht wie den folgenden:

Dieser Bericht zeigt, dass Jest 100% der Funktionen in

SubmitButton.js und string-format.js getestet hat. Er zeigt auch, dass Jest keine Anweisungen und Zeilen in string-format.js getestet hat. Die Testabdeckung zeigt, dass die aufgedeckten Zeilen in string-format.js 7 und 12 sind.

In Zeile 7 wird return str in der Funktion truncate nicht ausgeführt, weil die Bedingung if (str.length <= count) false zurückgibt.

In Zeile 12, ebenfalls in der Funktion truncate, wird return substring nicht ausgeführt, weil die Bedingung if (!withEllipsis) zurückgibt false.

Integriere Jest in deinen Entwicklungsworkflow

Schauen wir uns an, wie du diese Tests integrieren kannst, um deinen Entwicklungsworkflow zu verbessern.

Tests im Überwachungsmodus ausführen

Anstatt die Tests manuell auszuführen, kannst du sie automatisch ausführen lassen, wenn du deinen Code mit dem Watch Mode änderst.

1. Um den Überwachungsmodus zu aktivieren, aktualisiere dein Jest-Befehlsskript in package.json (im JavaScript-Projekt), indem du die Option --watchAll hinzufügst:

"scripts": {
  "test": "jest --coverage --watchAll"
}

2. npm run test ausführen. Er löst Jest im Überwachungsmodus aus:

Die Tests laufen jedes Mal, wenn du dein Projekt änderst. Dieser Ansatz fördert kontinuierliches Feedback, während du deine Anwendung erstellst.

Pre-Commit Hooks einrichten

In Git-Umgebungen führen Hooks Skripte aus, wenn ein bestimmtes Ereignis eintritt (z. B. ein Pull-, Push- oder Commit-Ereignis). Pre-Commit-Hooks legen fest, welche Skripte für das Pre-Commit-Ereignis ausgeführt werden (das der Code auslöst, bevor ein Commit durchgeführt wird).

Der Commit ist nur dann erfolgreich, wenn das Skript keinen Fehler auslöst.

Die Ausführung von Jest vor dem Pre-Commit stellt sicher, dass keiner deiner Tests vor dem Commit fehlschlägt.

Du kannst verschiedene Bibliotheken verwenden, um Git-Hooks in deinem Projekt einzurichten, zum Beispiel ghooks.

1. Installiere ghooks unter devDependencies:

npm install ghooks --save-dev

2. Füge ein configs Objekt in der obersten Ebene deiner package.json Datei (im JavaScript Projekt) hinzu.
3. Füge ein ghooks Objekt unter configs hinzu.

4. Füge eine Eigenschaft mit einem Schlüssel von pre-commit und einem Wert von jest hinzu.

{
  …
  "config": {
    "ghooks": {
      "pre-commit": "jest"
    }
  },
}

5. Bestätige den Code. Der Code löst den Pre-Commit-Hook aus, der Jest ausführt:

Zusammenfassung

Jetzt weißt du, wie du Jest in deinen Entwicklungsworkflow integrieren kannst, damit es automatisch ausgeführt wird, sobald du eine Änderung vornimmst. Auf diese Weise erhältst du kontinuierliches Feedback und kannst Codeprobleme schnell beheben, bevor du deine Änderungen in die Produktion überführst.

Wenn du deine Anwendung bei Kinsta hostest, profitierst du von einer schnellen und sicheren Infrastruktur, da du deine Projekte auf einer Infrastruktur bereitstellst, die auf dem Premium Tier-Netzwerk und den C2-Maschinen von Google Cloud Platform basiert. Wähle zwischen 37 Rechenzentren und einem HTTP/3-fähigen CDN mit 260+ PoPs.

Mit isolierter Containertechnologie, zwei starken Firewalls und fortschrittlichem DDoS-Schutz auf Basis von Cloudflare bist du sicher. Und mit der Kinsta-API kannst du Apps integrieren oder Workflows automatisieren.

Richte Jest ein und stöbere noch heute in den Ressourcen von Kinsta, um deine JavaScript-Anwendungen zu verbessern.

Marcia Ramos Kinsta

I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 7 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.

• LinkedIn