{"id":65646,"date":"2023-10-01T10:38:39","date_gmt":"2023-10-01T09:38:39","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=65646&#038;preview=true&#038;preview_id=65646"},"modified":"2023-10-12T17:03:49","modified_gmt":"2023-10-12T16:03:49","slug":"jest","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/jest\/","title":{"rendered":"Wie du deine Anwendungen mit Jest testest"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/de\/blog\/tools-fuer-performance-tests\/\">Softwaretests<\/a> sind wichtig, um sicherzustellen, dass deine Anwendungen wie erwartet funktionieren, vor allem wenn du \u00c4nderungen einf\u00fchrst. Das fr\u00fchzeitige Aufsp\u00fcren und Beheben von Fehlern in der Entwicklung ist entscheidend f\u00fcr einen stabilen, qualitativ hochwertigen Code.<\/p>\n<p>Unter den vielen verf\u00fcgbaren Tools und Frameworks f\u00fcr JavaScript-Tests ist Jest eines der beliebtesten. Jest ist ein Produkt von Meta und bietet umfangreiche Testfunktionen f\u00fcr JavaScript-Anwendungen und solche, die mit JavaScript-Frameworks erstellt wurden.<\/p>\n<p>Wir wollen das Jest-Framework und seine Funktionen kennenlernen und herausfinden, wie du es am besten in deinen Entwicklungsprozess integrieren kannst.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Was ist Jest?<\/h2>\n<p><a href=\"https:\/\/jestjs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jest<\/a> ist ein flexibles Framework und einfach zu bedienen. Zus\u00e4tzlich zu den Kernfunktionen f\u00fcr das Testen von JavaScript bietet es Konfigurationen und Plugins f\u00fcr das Testen von Babel, Webpack, Vite, Parcel oder <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-typescript\/\">TypeScript<\/a>-basierten Anwendungen.<\/p>\n<p>Jest wird von vielen Entwicklern genutzt und verf\u00fcgt \u00fcber eine Reihe von Plugins, die von der Community entwickelt und gepflegt werden. Es zeichnet sich durch seine Benutzerfreundlichkeit aus: F\u00fcr JavaScript-Tests sind keine zus\u00e4tzlichen Konfigurationen oder Plug-ins erforderlich. Du kannst aber auch fortgeschrittenere Tests durchf\u00fchren &#8211; wie z. B. das Testen von <a href=\"https:\/\/kinsta.com\/de\/thema\/javascript-frameworks\/\">JavaScript-Frameworks<\/a> &#8211; indem du einige zus\u00e4tzliche Konfigurationsoptionen verwendest.<\/p>\n<h2>So richtest du Jest f\u00fcr dein JavaScript-Projekt ein<\/h2>\n<p>Sehen wir uns an, wie du Jest in einem bestehenden JavaScript-Projekt einrichtest.<\/p>\n<h3>Voraussetzungen<\/h3>\n<p>Um diesem Tutorial folgen zu k\u00f6nnen, musst du \u00fcber folgende Voraussetzungen verf\u00fcgen:<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/en\/download\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a> ist installiert.<\/li>\n<li>npm (bereits Teil von Node.js) oder <a href=\"https:\/\/classic.yarnpkg.com\/lang\/en\/docs\/install\/#windows-stable\" target=\"_blank\" rel=\"noopener noreferrer\">Yarn<\/a> installiert.<\/li>\n<li>Das <a href=\"https:\/\/www.npmjs.com\/package\/jest\" target=\"_blank\" rel=\"noopener noreferrer\">npm-Paket<\/a> von Jest ist installiert.<\/li>\n<\/ul>\n<h3>Installiere das Jest-Paket<\/h3>\n<ol start=\"1\">\n<li>Wenn du noch kein Projekt hast, um diesem Tutorial zu folgen, kannst du <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-javascript\" target=\"_blank\" rel=\"noopener noreferrer\">dieses Repo<\/a> als Ausgangspunkt verwenden.<\/li>\n<\/ol>\n<p>Der <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-javascript\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\"><code>starter-files<\/code><\/a> Zweig bietet dir eine Basis, um die Anwendung zu bauen, w\u00e4hrend du dem Tutorial folgst. Verweise auf die <code><a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-javascript\/tree\/main\" target=\"_blank\" rel=\"noopener noreferrer\">main<\/a><\/code> Verzweigung, um den Code des Leitfadens zu sehen und deinen Code zu \u00fcberpr\u00fcfen.<\/p>\n<ol start=\"2\">\n<li>Um Jest mit <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-npm\/\">npm<\/a> zu installieren, gehe in deinem Terminal in das Projektverzeichnis und f\u00fchre den folgenden Befehl aus:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install --save-dev jest<\/code><\/pre>\n<p>Die Option <code>--save-dev<\/code> weist npm an, das Paket unter <code>devDependencies<\/code> zu installieren, das die Abh\u00e4ngigkeiten enth\u00e4lt, die du f\u00fcr die Entwicklung brauchst.<\/p>\n<h3>Jest konfigurieren<\/h3>\n<p>Obwohl Jest in der Regel ohne zus\u00e4tzliche Konfiguration funktioniert, gibt es zwei M\u00f6glichkeiten, seine Leistungsf\u00e4higkeit zu erweitern: in der <strong>package.json<\/strong>-Datei und \u00fcber eine Jest-Konfigurationsdatei.<\/p>\n<h4>Jest in <strong>package.json<\/strong> konfigurieren<\/h4>\n<p>F\u00fcge in deiner <strong>package.json<\/strong>-Datei ein Objekt mit dem Namen <code>jest<\/code> mit den unten abgebildeten Eigenschaften hinzu:<\/p>\n<pre><code class=\"language-json\">{\n  \u2026\n  \"jest\": {\n    \"displayName\": \"Ecommerce\",\n    \"globals\": {\n      \"PROJECT_NAME\": \"Ecommerce TD\"\n    },\n    \"bail\": 20,\n    \"verbose\": true\n  },\n}<\/code><\/pre>\n<p>W\u00e4hrend des Tests durchsucht Jest dieses Objekt und wendet diese Konfigurationen an. Auf der <a href=\"https:\/\/jestjs.io\/docs\/26.x\/configuration\" target=\"_blank\" rel=\"noopener noreferrer\">Konfigurationsseite von Jest<\/a> kannst du weitere Optionen einsehen, aber die Eigenschaften dieses Objekts sind:<\/p>\n<ul>\n<li><code>displayName<\/code> &#8211; Jest f\u00fcgt den Wert dieser Eigenschaft als Beschriftung zu deinen Testergebnissen hinzu.<\/li>\n<li><code>globals<\/code> &#8211; Enth\u00e4lt einen Objektwert, um globale Variablen zu definieren, die in deinen Testumgebungen verf\u00fcgbar sind.<\/li>\n<li><code>bail<\/code> &#8211; Standardm\u00e4\u00dfig f\u00fchrt Jest alle Tests durch und zeigt die Fehler in den Ergebnissen an. <code>bail<\/code> weist Jest an, nach einer bestimmten Anzahl von Fehlern aufzuh\u00f6ren.<\/li>\n<li><code>verbose<\/code> &#8211; Bei der Einstellung <code>true<\/code> werden w\u00e4hrend der Testausf\u00fchrung einzelne Testberichte angezeigt.<\/li>\n<\/ul>\n<h4>Jest in einer Konfigurationsdatei konfigurieren<\/h4>\n<p>Du kannst Jest auch in einer <strong>jest.config.js<\/strong>-Datei konfigurieren. Jest unterst\u00fctzt auch die Erweiterungen <strong>.ts<\/strong>, <strong>.mjs<\/strong>, <strong>.cjs<\/strong> und <strong>.json<\/strong>. Beim Ausf\u00fchren von Tests sucht Jest nach diesen Dateien und wendet die Einstellungen in der gefundenen Datei an.<\/p>\n<p>Nehmen wir zum Beispiel diese <strong>jest.config.js<\/strong>-Datei:<\/p>\n<pre><code class=\"language-js\">const config = {\n  displayName: \"Ecommerce\",\n  globals: {\n    \"PROJECT_NAME\": \"Ecommerce TD\"\n  },\n  bail: 20,\n  verbose: true\n}\n\nmodule.exports = config;<\/code><\/pre>\n<p>Der Code exportiert ein Jest-Konfigurationsobjekt mit den gleichen Eigenschaften wie im vorherigen Beispiel.<\/p>\n<p>Du kannst auch eine benutzerdefinierte Datei verwenden, die ein JSON-serialisierbares Konfigurationsobjekt enth\u00e4lt, und den Dateipfad beim Ausf\u00fchren deiner Tests an die Option <code>--config<\/code> \u00fcbergeben.<\/p>\n<h3>Eine einfache Testdatei erstellen<\/h3>\n<p>Nachdem du Jest konfiguriert hast, erstellst du deine Testdateien. Jest \u00fcberpr\u00fcft die Testdateien deines Projekts, f\u00fchrt sie aus und liefert die Ergebnisse. Testdateien haben normalerweise ein Format wie <strong>[Name].test.js<\/strong> oder <strong>[Name]-test.js<\/strong>. Dieses Muster macht es sowohl f\u00fcr Jest als auch f\u00fcr dein Team einfach, deine Testdateien zu identifizieren.<\/p>\n<p>Nehmen wir eine <strong>string-format.js<\/strong>-Datei mit dem folgenden Code:<\/p>\n<pre><code class=\"language-js\">function truncate(\n  str,\n  count,\n  withEllipsis = true\n) {\n  if (str.length &lt; = count)\n    return str\n\n  const substring = str.substr(0, count)\n\n  if (!withEllipsis)\n    return substring\n\n  return substring + '...'\n}\n\nmodule.exports = { truncate }<\/code><\/pre>\n<p>Die Funktion <code>truncate()<\/code> k\u00fcrzt Strings auf eine bestimmte L\u00e4nge mit der Option, ein Auslassungszeichen hinzuzuf\u00fcgen.<\/p>\n<h4>Den Test schreiben<\/h4>\n<ol>\n<li>Erstelle eine Testdatei mit dem Namen <strong>string-format.test.js<\/strong>.<\/li>\n<li>Damit deine Dateien \u00fcbersichtlich bleiben, legst du die Datei <strong>string-format.test.js<\/strong> im selben Verzeichnis ab wie die Datei <strong>string-format.js<\/strong> oder in einem speziellen Testverzeichnis. Unabh\u00e4ngig davon, wo sich deine Testdatei innerhalb des Projekts befindet, findet Jest sie und f\u00fchrt sie aus. Mit Jest kannst du deine Anwendungen in verschiedenen Szenarien testen.<\/li>\n<li>Schreibe einen einfachen Test in <strong>string-format.test.js<\/strong> wie folgt:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const { truncate } = require('.\/string-format')\n\ntest('truncates a string correctly', () = &gt; {\n  expect(truncate(\"I am going home\", 6)).toBe('I am g...')\n})<\/code><\/pre>\n<p>Der Testfall hat die Beschreibung <code>truncates a string correctly<\/code>. Dieser Code verwendet die von Jest bereitgestellte Funktion <code>expect<\/code>, die pr\u00fcft, ob ein Wert mit dem erwarteten Ergebnis \u00fcbereinstimmt.<\/p>\n<p>Der Code \u00fcbergibt <code>truncate(\"I am going home\", 6)<\/code> als Argument an <code>expect<\/code>. Dieser Code testet den Wert, der beim Aufruf von <code>truncate<\/code> mit den Argumenten <code>\"I am going home\"<\/code> und <code>6<\/code> zur\u00fcckgegeben wird. Der Aufruf von <code>expect<\/code> gibt ein Erwartungsobjekt zur\u00fcck, das Zugriff auf die Jest-Matches bietet.<\/p>\n<p>Es enth\u00e4lt auch den <code>toBe<\/code> Matcher, der <code>\"I am g\u2026\"<\/code> als Argument hat. Der <code>toBe<\/code> Matcher testet die Gleichheit zwischen den erwarteten und den tats\u00e4chlichen Werten.<\/p>\n<h4>Ausf\u00fchren des Tests<\/h4>\n<p>Um deine Tests auszuf\u00fchren, definierst du den Befehl <code>jest<\/code>.<\/p>\n<ol start=\"1\">\n<li>F\u00fcge dieses <code>test<\/code> Skript in die <strong>package.json<\/strong> Datei deines Projekts ein:<\/li>\n<\/ol>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"test\": \"jest\"\n}<\/code><\/pre>\n<ol start=\"2\">\n<li>F\u00fchre nun <code>npm run test<\/code>, <code>npm test<\/code> oder <code>npm t<\/code> in deinem Terminal aus. Dadurch wird Jest f\u00fcr das Projekt ausgef\u00fchrt.<\/li>\n<\/ol>\n<p>Wenn du die Tests ausf\u00fchrst, ist das das Ergebnis:<\/p>\n<figure>\n<p><figure style=\"width: 927px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-string-format-test.png\" alt=\"Das Ergebnis des Jest-Tests zeigt, dass der Test \"truncates a string correctly\" in string-format.test.js bestanden wurde\" width=\"927\" height=\"275\"><figcaption class=\"wp-caption-text\">Erfolgreiches Jest-Testergebnis f\u00fcr string-format.test.js<\/figcaption><\/figure><\/figure>\n<p>Die Ergebnisse zeigen eine Testsuite (die Datei<strong> string-format.test.js<\/strong>), einen erfolgreich ausgef\u00fchrten Test (<code>\"truncates a string correctly\"<\/code>) und die <code>displayName<\/code> (<code>Ecommerce<\/code>), die du in der Konfiguration festgelegt hast.<\/p>\n<ol start=\"3\">\n<li>Wenn du in <strong>string-format.js<\/strong> einen zus\u00e4tzlichen Punkt einf\u00fcgst, um den Code zu unterbrechen und den Test auszuf\u00fchren, schl\u00e4gt er fehl:<\/li>\n<\/ol>\n<figure>\n<p><figure style=\"width: 1100px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-truncate-failed.png\" alt=\"Das Jest-Testergebnis f\u00fcr den Test \"truncates a string correctly\" in string-format.test.js ist fehlgeschlagen. Der erwartete String des Tests ist \"i am g...\", aber der empfangene String ist \"i am g....\".\" width=\"1100\" height=\"612\"><figcaption class=\"wp-caption-text\">Fehlgeschlagenes Jest-Testergebnis f\u00fcr eine defekte truncate-Funktion<\/figcaption><\/figure><\/figure>\n<p>Dieses Ergebnis deutet darauf hin, dass du die Funktion<code>truncate<\/code> besch\u00e4digt oder Aktualisierungen vorgenommen hast, die eine Aktualisierung der Tests erfordern.<\/p>\n<h2>Wie man Tests mit Jest schreibt<\/h2>\n<h3>Jest-Test-Syntax<\/h3>\n<p>Die propriet\u00e4re Syntax von Jest ist einfach zu verwenden. Jest stellt deinem Projekt globale Methoden und Objekte f\u00fcr das Schreiben von Tests zur Verf\u00fcgung. Einige der grundlegenden Begriffe sind <code>describe<\/code>, <code>test<\/code>, <code>expect<\/code> und Matcher.<\/p>\n<ul>\n<li><code>describe<\/code>: Diese Funktion fasst zusammengeh\u00f6rige Tests in einer Datei zusammen.<\/li>\n<li><code>test<\/code>: Diese Funktion f\u00fchrt den Test aus. Sie ist ein Alias f\u00fcr <code>it<\/code>. Sie enth\u00e4lt Assertions f\u00fcr die Werte, die du testen willst.<\/li>\n<li><code>expect<\/code>: Diese Funktion deklariert die Assertions f\u00fcr verschiedene Werte. Sie erm\u00f6glicht den Zugriff auf Matcher f\u00fcr verschiedene Formen von Assertions.<\/li>\n<li>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\u00e4lt) behaupten.<\/li>\n<\/ul>\n<p>Um sie zu verwenden, schau dir das folgende Beispiel an:<\/p>\n<ol start=\"1\">\n<li>Ersetze den Test in der Datei <strong>string-format.test.js<\/strong> durch den folgenden Code:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">describe(\"all string formats work as expected\", () = &gt; {\n  test(\"truncates a string correctly\", () = &gt; {\n    expect(\n      truncate(\"I am going home\", 6)\n    ).toBe(\"I am g...\")\n  })\n})<\/code><\/pre>\n<ol start=\"2\">\n<li>F\u00fchre den Code aus.<\/li>\n<\/ol>\n<p>Das Ergebnis sieht wie folgt aus:<\/p>\n<figure>\n<p><figure style=\"width: 993px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-truncate-string.png\" alt=\"Das Jest-Testergebnis zeigt, dass der Test \"Schneidet einen String korrekt ab\" in string-format.test.js bestanden wurde. Das Testergebnis zeigt auch den Text \"Alle String-Formate funktionieren wie erwartet\" aus der Funktion describe.\" width=\"993\" height=\"292\"><figcaption class=\"wp-caption-text\">Erfolgreiches Jest-Testergebnis, das das Label describe anzeigt<\/figcaption><\/figure><\/figure>\n<p>Der Screenshot zeigt, dass das Label in der Funktion <code>describe<\/code> einen Block erzeugt. Obwohl <code>describe<\/code> optional ist, ist die Gruppierung der Tests in einer Datei mit mehr Kontext hilfreich.<\/p>\n<h3>Tests in Testsuiten organisieren<\/h3>\n<p>In Jest besteht ein Testfall aus der Funktion <code>test<\/code>, der Funktion <code>expect<\/code> und einem Matcher. Eine Sammlung von zusammenh\u00e4ngenden Testf\u00e4llen ist eine Testsuite. Im vorherigen Beispiel ist <strong>string-format.test.js<\/strong> eine Testsuite, die einen Testfall zum Testen der Datei <strong>string-format.js<\/strong> enth\u00e4lt.<\/p>\n<p>Angenommen, du hast noch weitere Dateien in deinem Projekt, wie <strong>file-operations.js<\/strong>, <strong>api-logger.js<\/strong> und <strong>number-format.js<\/strong>. Du kannst f\u00fcr diese Dateien Testsuiten erstellen, wie <strong>file-operations.test.js<\/strong>, <strong>api-logger.test.js<\/strong> und <strong>number-format.test.js<\/strong>.<\/p>\n<h3>Einfache Assertions mit Jest Matchers schreiben<\/h3>\n<p>Wir haben uns ein Beispiel f\u00fcr die Verwendung des <code>toBe<\/code> Matchers angesehen. Assertions mit <a href=\"https:\/\/jestjs.io\/docs\/expect#matchers\" target=\"_blank\" rel=\"noopener noreferrer\">anderen Jest-Matchern<\/a> sind:<\/p>\n<ul>\n<li><code>toEqual<\/code> &#8211; Zum Testen von &#8222;tiefer&#8220; Gleichheit in Objektinstanzen.<\/li>\n<li><code>toBeTruthy<\/code> &#8211; Um zu pr\u00fcfen, ob ein Wert in einem booleschen Kontext wahr ist.<\/li>\n<li><code>toBeFalsy<\/code> &#8211; Um zu pr\u00fcfen, ob ein Wert in einem booleschen Kontext falsch ist.<\/li>\n<li><code>toContain<\/code> &#8211; Um zu pr\u00fcfen, ob ein Array einen Wert enth\u00e4lt.<\/li>\n<li><code>toThrow<\/code> &#8211; Um zu pr\u00fcfen, ob eine aufgerufene Funktion einen Fehler ausl\u00f6st.<\/li>\n<li><code>stringContaining<\/code> &#8211; Um zu pr\u00fcfen, ob eine Zeichenkette eine Teilzeichenkette enth\u00e4lt.<\/li>\n<\/ul>\n<p>Schauen wir uns Beispiele f\u00fcr einige dieser Matcher an.<\/p>\n<p>Du k\u00f6nntest zum Beispiel von einer Funktion oder einem Code erwarten, dass er ein Objekt mit bestimmten Eigenschaften und Werten zur\u00fcckgibt.<\/p>\n<ol start=\"1\">\n<li>Teste diese Funktion mit dem folgenden Codeschnipsel. In diesem Fall willst du sicherstellen, dass das zur\u00fcckgegebene Objekt mit dem erwarteten Objekt \u00fcbereinstimmt.<\/li>\n<\/ol>\n<pre><code class=\"language-js\">expect({\n  name: \"Joe\",\n  age: 40\n}).toBe({\n  name: \"Joe\",\n  age: 40\n})<\/code><\/pre>\n<p>In diesem Beispiel wird <code>toBe<\/code> verwendet. Der Test schl\u00e4gt fehl, da dieser Matcher nicht auf tiefe Gleichheit pr\u00fcft &#8211; er pr\u00fcft den Wert, nicht alle Eigenschaften.<\/p>\n<ol start=\"2\">\n<li>Verwende den <code>toEqual<\/code> Matcher, um auf tiefe Gleichheit zu pr\u00fcfen:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">expect({\n  name: \"Joe\",\n  age: 40\n}).toEqual({\n  name: \"Joe\",\n  age: 40\n})<\/code><\/pre>\n<p>Dieser Test ist erfolgreich, da beide Objekte &#8222;tief gleich&#8220; sind, d.h. alle ihre Eigenschaften sind gleich.<\/p>\n<ol start=\"3\">\n<li>Probiere ein weiteres Matcher-Beispiel aus, das pr\u00fcft, ob das definierte Array ein bestimmtes Element enth\u00e4lt.<\/li>\n<\/ol>\n<pre><code class=\"language-js\">expect([\"orange\", \"pear\", \"apple\"]).toContain(\"mango\")<\/code><\/pre>\n<p>Dieser Test schl\u00e4gt fehl, weil <code>toContain<\/code> behauptet, dass das Array <code>[\"orange\", \"pear\", \"apple\"]<\/code> einen erwarteten Wert <code>\"mango\"<\/code> enth\u00e4lt, das Array aber nicht.<\/p>\n<ol start=\"4\">\n<li>Verwende Variablen f\u00fcr den gleichen Test wie im folgenden Code:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const fruits = [\"orange\", \"pear\", \"apple\"];\nconst expectedFruit = \"mango\";\n\nexpect(fruits).toContain(expectedFruit)<\/code><\/pre>\n<h3>Asynchronen Code testen<\/h3>\n<p>Bis jetzt haben wir synchronen Code getestet &#8211; Ausdr\u00fccke, die einen Wert zur\u00fcckgeben, bevor der Code die folgende Zeile ausf\u00fchrt. Du kannst Jest auch f\u00fcr asynchronen Code mit <code>async<\/code>, <code>await<\/code>, oder Promises verwenden.<\/p>\n<p>Die Datei<strong> apis.js<\/strong> enth\u00e4lt zum Beispiel eine Funktion, mit der eine <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/\" target=\"_blank\" rel=\"noopener noreferrer\">API-Anfrage<\/a> gestellt wird:<\/p>\n<pre><code class=\"language-js\">function getTodos() {\n  return fetch('https:\/\/jsonplaceholder.typicode.com\/todos\/1')\n}\n<\/code><\/pre>\n<p>Die Funktion <code>getTodos<\/code> sendet eine <code>GET<\/code> Anfrage an <code>https:\/\/jsonplaceholder.typicode.com\/todos\/1<\/code>.<\/p>\n<ol start=\"1\">\n<li>Erstelle eine Datei namens <strong>apis.test.js<\/strong> mit dem folgenden Code, um die <a href=\"https:\/\/jsonplaceholder.typicode.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">gef\u00e4lschte API<\/a> zu testen:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const { getTodos } = require('.\/apis')\n\ntest(\"gets a todo object with the right properties\", () = &gt; {\n  return getTodos()\n    .then((response) = &gt; {\n      return response.json()\n    })\n    .then((data) = &gt; {\n      expect(data).toHaveProperty('userId')\n      expect(data).toHaveProperty('id')\n      expect(data).toHaveProperty('title')\n      expect(data).toHaveProperty('completed')\n      expect(data).toHaveProperty('description')\n    })\n})<\/code><\/pre>\n<p>Dieser Testfall ruft die Funktion <code>getTodos<\/code> auf, die ein <code>todo<\/code> Objekt abruft. Wenn er das Promise aufl\u00f6st, verwendet er die Methode <code>.then<\/code>, um den aufgel\u00f6sten Wert zu erhalten.<\/p>\n<p>In diesem Wert gibt der Code <code>response.json()<\/code> zur\u00fcck, der ein weiteres Promise ist, das die Antwort in das JSON-Format umwandelt. Eine weitere Methode <code>.then<\/code> erh\u00e4lt das JSON-Objekt, das die <code>expect<\/code> und Matcher enth\u00e4lt. Der Code behauptet, dass das JSON-Objekt f\u00fcnf Eigenschaften enth\u00e4lt: <code>userId<\/code>, <code>id<\/code>, <code>title<\/code>, <code>completed<\/code> und <code>description<\/code>.<\/p>\n<ol start=\"2\">\n<li>F\u00fchre die Tests aus:<\/li>\n<\/ol>\n<figure>\n<figure style=\"width: 1197px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-apis-failed.png\" alt=\"Das Jest-Testergebnis f\u00fcr den Test \"Ermittelt ein Todo-Objekt mit den richtigen Eigenschaften\" in apis.test.js ist fehlgeschlagen. Das Ergebnis zeigt, dass die erwartete Eigenschaft \"description\" f\u00fcr das Objekt nicht existiert.\" width=\"1197\" height=\"794\"><figcaption class=\"wp-caption-text\">Das Jest-Testergebnis zeigt einen fehlgeschlagenen Test f\u00fcr asynchronen Code<\/figcaption><\/figure>\n<p>\u00a0<\/figure>\n<p>Wie der Screenshot zeigt, schl\u00e4gt der Test f\u00fcr <code>getTodos()<\/code> fehl. Er erwartet die Eigenschaft <code>description<\/code>, aber die API gibt sie nicht zur\u00fcck. 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\u00fcllen.<\/p>\n<ol start=\"3\">\n<li>Entferne die Behauptung f\u00fcr die Eigenschaft <code>description<\/code> und f\u00fchre die Tests erneut durch:<\/li>\n<\/ol>\n<figure>\n<figure style=\"width: 1198px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-async.png\" alt=\"Das Ergebnis des Jest-Tests zeigt an, dass der Test \"K\u00fcrzt einen String korrekt ab\" in string-format.test.js und der Test \"Holt ein Todo-Objekt mit den richtigen Eigenschaften\" in apis.test.js bestanden wurde.\" width=\"1198\" height=\"397\"><figcaption class=\"wp-caption-text\">Das Jest-Testergebnis zeigt einen bestandenen Test f\u00fcr asynchronen Code<\/figcaption><\/figure>\n<p>\u00a0<\/p>\n<p style=\"text-align: left\">Der Screenshot zeigt, dass alles den Test bestanden hat.<\/p>\n<\/figure>\n<ol start=\"4\">\n<li>Versuche nun, <code>async\/await<\/code> anstelle der traditionellen Promise-Verarbeitung zu verwenden:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">test(\"gets a todo object with the right properties\", async () = &gt; {\n  const response = await getTodos()\n  const data = await response.json()\n\n  expect(data).toHaveProperty(\"userId\")\n  expect(data).toHaveProperty(\"id\")\n  expect(data).toHaveProperty(\"title\")\n  expect(data).toHaveProperty(\"completed\")\n})<\/code><\/pre>\n<p>Das Schl\u00fcsselwort <code>async<\/code> steht jetzt vor der Funktion. Der Code verwendet <code>await<\/code> vor <code>getTodos()<\/code> und <code>await<\/code> vor <code>response.json()<\/code>.<\/p>\n<h2>Erweiterte Jest-Funktionen<\/h2>\n<h3>Mock-Funktionen und Module<\/h3>\n<p>Wenn du Tests schreibst, m\u00f6chtest du vielleicht einen Ausdruck mit externen Abh\u00e4ngigkeiten testen. In manchen F\u00e4llen, 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\u00f6nnen.<\/p>\n<ol start=\"1\">\n<li>Nehmen wir zum Beispiel eine <strong>functions.js<\/strong>-Datei, die den folgenden Code enth\u00e4lt:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">function multipleCalls(count, callback) {\n  if (count &lt; 0) return;\n\n  for (let counter = 1; counter &lt;= count; counter++) {\n    callback()\n  }\n}<\/code><\/pre>\n<p>Die Funktion <code>multipleCalls<\/code> wird basierend auf dem Wert von <code>count<\/code> ausgef\u00fchrt. Sie h\u00e4ngt von der Callback-Funktion &#8211; der externen Abh\u00e4ngigkeit &#8211; ab. Ihr Zweck ist es zu wissen, ob <code>multipleCalls<\/code> die externe Abh\u00e4ngigkeit korrekt ausf\u00fchrt.<\/p>\n<ol start=\"2\">\n<li>Um die externe Abh\u00e4ngigkeit zu simulieren und den Zustand der Abh\u00e4ngigkeit in deiner Testdatei <strong>functions.test.js<\/strong> zu verfolgen, benutze diesen Code:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const { multipleCalls } = require('.\/functions')\n\ntest(\"functions are called multiple times correctly\", () =&gt; {\n  const mockFunction = jest.fn()\n\n  multipleCalls(5, mockFunction)\n\n  expect(\n    mockFunction.mock.calls.length\n  ).toBe(5)\n})<\/code><\/pre>\n<p>Hier erstellt die Methode <code>fn<\/code> des <code>jest<\/code> Objekts eine Mock-Funktion. Dann f\u00fchrt der Code <code>multipleCalls<\/code> aus, indem er <code>5<\/code> und die Mock-Funktion als Argumente \u00fcbergibt. Dann wird behauptet, dass <code>mockFunction<\/code> f\u00fcnfmal aufgerufen wird. Die Eigenschaft <code>mock<\/code> enth\u00e4lt Informationen dar\u00fcber, wie der Code die Funktion aufruft und welche Werte zur\u00fcckgegeben werden.<\/p>\n<ol start=\"3\">\n<li>Wenn du den Test ausf\u00fchrst, ist dies das erwartete Ergebnis:<\/li>\n<\/ol>\n<figure>\n<figure style=\"width: 1191px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-multiplecalls.png\" alt=\"Das Jest-Testergebnis zeigt, dass die drei Tests bestanden wurden: \"Schneidet eine Zeichenkette korrekt ab\", \"Funktionen werden mehrfach korrekt aufgerufen\" und \"Erh\u00e4lt ein Todo-Objekt mit den richtigen Eigenschaften\".\" width=\"1191\" height=\"465\"><figcaption class=\"wp-caption-text\">Erfolgreiches Jest-Testergebnis mit einer Mock-Funktion<\/figcaption><\/figure>\n<p>\u00a0<\/figure>\n<p>Wie gezeigt, ruft der Code die <code>mockFunction<\/code> f\u00fcnfmal auf.<\/p>\n<p>Im Code imitiert die Mock-Funktion eine externe Abh\u00e4ngigkeit. Es spielt keine Rolle, was die externe Abh\u00e4ngigkeit ist, wenn die Anwendung <code>multipleCalls<\/code> in der Produktion verwendet. Deinem Unit-Test ist es egal, wie die externe Abh\u00e4ngigkeit funktioniert. Er pr\u00fcft nur, ob <code>multipleCalls<\/code> wie erwartet funktioniert.<\/p>\n<ol start=\"4\">\n<li>Um Module nachzubilden, verwendest du die Methode <code>mock<\/code> und \u00fcbergibst einen Dateipfad, der das Modul darstellt:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const {\n  truncate,\n} = require(\".\/string-format\")\n\njest.mock(\".\/string-format.js\")<\/code><\/pre>\n<p>Dieser Code imitiert alle Funktionen, die <strong>string-format.js<\/strong> exportiert, und verfolgt, wie oft er sie aufruft. Die <code>truncate<\/code> des Moduls wird zu einer Mock-Funktion, die bewirkt, dass die Funktion ihre urspr\u00fcngliche Logik verliert. Wie oft <code>truncate<\/code> in deinen Tests ausgef\u00fchrt wird, kannst du in der Eigenschaft <code>truncate.mock.calls.length<\/code> herausfinden.<\/p>\n<p>Wenn du einen Fehler hast oder dein Code nicht funktioniert, vergleiche deinen Code mit der <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-javascript\/tree\/main\" target=\"_blank\" rel=\"noopener noreferrer\">vollst\u00e4ndigen Implementierung<\/a>.<\/p>\n<h2>React-Komponenten mit Jest und der React Testing Library testen<\/h2>\n<p>Wenn du noch kein Projekt hast, mit dem du diesem Tutorial folgen kannst, kannst du <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-react\" target=\"_blank\" rel=\"noopener noreferrer\">dieses React-Beispielprojekt<\/a> als Ausgangspunkt verwenden. Der <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-react\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\"><code>starter-files<\/code><\/a> Zweig hilft dir dabei, den Code zu erstellen, w\u00e4hrend du dem Tutorial folgst. Nutze den <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-react\/tree\/main\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>main<\/code><\/a> Zweig als Referenz, um deinen Code mit dem vollst\u00e4ndigen Code dieses Leitfadens abzugleichen.<\/p>\n<p>Du kannst Jest verwenden, um JavaScript-Frameworks wie <a href=\"https:\/\/kinsta.com\/de\/thema\/react\/\">React<\/a> zu testen. Wenn du React-Projekte mit <a href=\"https:\/\/create-react-app.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">Create React App<\/a> erstellst, unterst\u00fctzen 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 <a href=\"https:\/\/github.com\/kentcdodds\/react-testing-library\" target=\"_blank\" rel=\"noopener noreferrer\">React Testing Library<\/a> zu testen. Wenn du den <code>starter-app<\/code> Zweig klonst, musst du keine Abh\u00e4ngigkeiten installieren oder Konfigurationen anwenden.<\/p>\n<ol start=\"1\">\n<li>Wenn du das Beispielprojekt verwendest, installierst du mit diesem Befehl die erforderlichen Abh\u00e4ngigkeiten:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install --save-dev babel-jest @babel\/preset-env @babel\/preset-react react-testing-library<\/code><\/pre>\n<p>Du kannst auch <a href=\"https:\/\/www.npmjs.com\/package\/enzyme\" target=\"_blank\" rel=\"noopener noreferrer\">Enzyme<\/a> anstelle der React Testing Library verwenden.<\/p>\n<ol start=\"2\">\n<li>Aktualisiere deine Babel-Konfigurationen in <strong>babel.config.js <\/strong>oder erstelle diese Datei, wenn sie nicht existiert:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">module.exports = {\n  presets: [\n    '@babel\/preset-env',\n      ['@babel\/preset-react', {runtime: 'automatic'}],\n  ],\n};<\/code><\/pre>\n<ol start=\"3\">\n<li>Betrachte die Datei <strong>src\/SubmitButton.js <\/strong>, die den folgenden Code enth\u00e4lt:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">import React, { useState } from 'react'\n\nexport default function SubmitButton(props) {\n  const {id, label, onSubmit} = props\n  const [isLoading, setisLoading] = useState(false)\n\n  const submit = () =&gt; {\n    setisLoading(true)\n    onSubmit()\n  }\n\n  return <button disabled=\"disabled\" data-testid=\"{id}\"><\/button><\/code><\/pre>\n<p>Diese <code>SubmitButton<\/code> Komponente erh\u00e4lt drei Props:<\/p>\n<ul>\n<li><code>id<\/code> &#8211; Den Bezeichner der Schaltfl\u00e4che.<\/li>\n<li><code>label<\/code> &#8211; Welcher Text auf der Schaltfl\u00e4che angezeigt werden soll.<\/li>\n<li><code>onSubmit<\/code> &#8211; Die Funktion, die ausgel\u00f6st werden soll, wenn jemand auf die Schaltfl\u00e4che klickt.<\/li>\n<\/ul>\n<p>Der Code weist das Attribut <code>id<\/code> dem Attribut <code>data-testid<\/code> zu, das ein Element f\u00fcr den Test identifiziert.<\/p>\n<p>Die Komponente verfolgt auch den Zustand <code>isLoading<\/code> und aktualisiert ihn auf <code>true<\/code>, wenn jemand auf die Schaltfl\u00e4che klickt.<\/p>\n<ol start=\"4\">\n<li>Erstelle den Test f\u00fcr diese Komponente. F\u00fcge den folgenden Code in die Datei <strong>SubmitButton.test.js<\/strong> ein:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">import {fireEvent, render, screen} from \"@testing-library\/react\"\nimport \"@testing-library\/jest-dom\"\nimport SubmitButton from \".\/SubmitButton\"\n\ntest(\"SubmitButton becomes disabled after click\", () =&gt; {\n  const submitMock = jest.fn()\n\n  render(\n    &lt;SubmitButton\n      id=\"submit-details\"\n      label=\"Submit\"\n      onSubmit={submitMock}\n    \/ &gt;\n  )\n\n  expect(screen.getByTestId(\"submit-details\")).not.toBeDisabled()\n\n  fireEvent.submit(screen.getByTestId(\"submit-details\"))\n\n  expect(screen.getByTestId(\"submit-details\")).toBeDisabled()\n})<\/code><\/pre>\n<p>Der obige Code rendert die Komponente <code>SubmitButton<\/code> und verwendet die Abfragemethode <code>screen.getByTestId<\/code>, um den DOM-Knoten \u00fcber das Attribut <code>data-testid<\/code> abzurufen.<\/p>\n<p>Das erste <code>expect<\/code> ist <code>getByTestId(\"submit-details\")<\/code> und verwendet den <code>not<\/code> Modifikator und den <code>toBeDisabled<\/code> Matcher (der von <code>react-testing-library<\/code> aus zug\u00e4nglich ist), um festzustellen, dass die Schaltfl\u00e4che nicht deaktiviert ist. Verwende den <code>not<\/code> Modifikator mit jedem Matcher, um das Gegenteil des Matchers zu best\u00e4tigen.<\/p>\n<p>Dann l\u00f6st der Code das Ereignis <code>submit<\/code> auf der Komponente aus und \u00fcberpr\u00fcft, ob die Schaltfl\u00e4che deaktiviert ist. Weitere benutzerdefinierte Matcher findest du in <a href=\"https:\/\/github.com\/testing-library\/jest-dom#custom-matchers\" target=\"_blank\" rel=\"noopener noreferrer\">der Dokumentation der Testbibliothek<\/a>.<\/p>\n<ol start=\"5\">\n<li>F\u00fchre nun die Tests aus. Wenn du den Zweig <code>starter-files<\/code> geklont hast, stelle sicher, dass du alle Projektabh\u00e4ngigkeiten installiert hast, indem du <code>npm install<\/code> ausf\u00fchrst, bevor du deine Tests startest.<\/li>\n<\/ol>\n<figure>\n<p><figure style=\"width: 941px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-truncate-react.png\" alt=\"Das Jest-Testergebnis zeigt, dass die vier Tests bestanden wurden: \"Schneidet eine Zeichenkette korrekt ab\", \"Funktionen werden mehrfach korrekt aufgerufen\", \"Erh\u00e4lt ein Todo-Objekt mit den richtigen Eigenschaften\" und \"SubmitButton wird nach dem Klick deaktiviert\".\" width=\"941\" height=\"353\"><figcaption class=\"wp-caption-text\">Das Jest-Testergebnis zeigt, dass ein React-Komponententest bestanden wurde<\/figcaption><\/figure><\/figure>\n<h3>Code-Coverage-Berichte ausf\u00fchren<\/h3>\n<p>Jest bietet auch Code Coverage Reports, die zeigen, wie viel von deinem Projekt du testest.<\/p>\n<ol start=\"1\">\n<li>\u00dcbergib die Option <code>--coverage<\/code> an Jest. Aktualisiere in deinem Jest-Skript in <strong>package.json <\/strong>(im JavaScript-Projekt) den Jest-Befehl mit dieser Abdeckungsoption:<\/li>\n<\/ol>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"test\": \"jest --coverage\"\n}<\/code><\/pre>\n<ol start=\"2\">\n<li>F\u00fchre <code>npm run test<\/code> aus, um deinen Code zu testen. Du erh\u00e4ltst einen Bericht wie den folgenden:<\/li>\n<\/ol>\n<figure>\n<figure style=\"width: 1183px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-coverage-report.png\" alt=\"Das Ergebnis des Jest-Tests zeigt die Abdeckung f\u00fcr die vier Tests. Das Ergebnis zeigt, dass \"SubmitButton.js\" eine Abdeckung von 100% hat, w\u00e4hrend \"string-format.js\" 76,92% Abdeckung hat. Es zeigt auch, dass \"string-format.js\" in Zeile 7 und Zeile 12 nicht abgedeckt ist.\" width=\"1183\" height=\"631\"><figcaption class=\"wp-caption-text\">Erfolgreicher Jest-Abdeckungsbericht f\u00fcr jede Testsuite<\/figcaption><\/figure>\n<p>Dieser Bericht zeigt, dass Jest 100% der Funktionen in<\/figure>\n<p><strong>SubmitButton.js<\/strong> und <strong>string-format.js<\/strong> getestet hat. Er zeigt auch, dass Jest keine Anweisungen und Zeilen in <strong>string-format.js<\/strong> getestet hat. Die Testabdeckung zeigt, dass die aufgedeckten Zeilen in <strong>string-format.js<\/strong> 7 und 12 sind.<\/p>\n<p>In Zeile 7 wird <code>return str<\/code> in der Funktion <code>truncate<\/code> nicht ausgef\u00fchrt, weil die Bedingung <code>if (str.length &lt;= count)<\/code> <code>false<\/code> zur\u00fcckgibt.<\/p>\n<p>In Zeile 12, ebenfalls in der Funktion <code>truncate<\/code>, wird <code>return substring<\/code> nicht ausgef\u00fchrt, weil die Bedingung <code>if (!withEllipsis)<\/code> zur\u00fcckgibt <code>false.<\/code><\/p>\n<h2>Integriere Jest in deinen Entwicklungsworkflow<\/h2>\n<p>Schauen wir uns an, wie du diese Tests integrieren kannst, um deinen Entwicklungsworkflow zu verbessern.<\/p>\n<h3>Tests im \u00dcberwachungsmodus ausf\u00fchren<\/h3>\n<p>Anstatt die Tests manuell auszuf\u00fchren, kannst du sie automatisch ausf\u00fchren lassen, wenn du deinen Code mit dem Watch Mode \u00e4nderst.<\/p>\n<ol start=\"1\">\n<li>Um den \u00dcberwachungsmodus zu aktivieren, aktualisiere dein Jest-Befehlsskript in <strong>package.json <\/strong>(im JavaScript-Projekt), indem du die Option <code>--watchAll<\/code> hinzuf\u00fcgst:<\/li>\n<\/ol>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"test\": \"jest --coverage --watchAll\"\n}<\/code><\/pre>\n<ol start=\"2\">\n<li><code>npm run test<\/code> ausf\u00fchren. Er l\u00f6st Jest im \u00dcberwachungsmodus aus:<\/li>\n<\/ol>\n<figure>\n<p><figure style=\"width: 1197px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-watch-mode.png\" alt=\"Jest im \u00dcberwachungsmodus mit vier bestandenen Tests und einer Liste von Befehlen, die im \u00dcberwachungsmodus verwendet werden k\u00f6nnen: f, um nur fehlgeschlagene Tests auszuf\u00fchren; o, um nur Tests auszuf\u00fchren, die sich auf ge\u00e4nderte Dateien beziehen; p, um nach einem Regex-Muster f\u00fcr den Dateinamen zu filtern; t, um nach einem Regex-Muster f\u00fcr den Testnamen zu filtern; q, um den \u00dcberwachungsmodus zu beenden; Enter, um einen Testlauf zu starten.\" width=\"1197\" height=\"730\"><figcaption class=\"wp-caption-text\">Jest im \u00dcberwachungsmodus ausf\u00fchren<\/figcaption><\/figure><\/figure>\n<p>Die Tests laufen jedes Mal, wenn du dein Projekt \u00e4nderst. Dieser Ansatz f\u00f6rdert kontinuierliches Feedback, w\u00e4hrend du deine Anwendung erstellst.<\/p>\n<h3>Pre-Commit Hooks einrichten<\/h3>\n<p>In Git-Umgebungen f\u00fchren Hooks Skripte aus, wenn ein bestimmtes Ereignis eintritt (z. B. ein Pull-, Push- oder Commit-Ereignis). Pre-Commit-Hooks legen fest, welche Skripte f\u00fcr das Pre-Commit-Ereignis ausgef\u00fchrt werden (das der Code ausl\u00f6st, bevor ein Commit durchgef\u00fchrt wird).<\/p>\n<p>Der Commit ist nur dann erfolgreich, wenn das Skript keinen Fehler ausl\u00f6st.<\/p>\n<p>Die Ausf\u00fchrung von Jest vor dem Pre-Commit stellt sicher, dass keiner deiner Tests vor dem Commit fehlschl\u00e4gt.<\/p>\n<p>Du kannst verschiedene Bibliotheken verwenden, um Git-Hooks in deinem Projekt einzurichten, zum Beispiel <a href=\"https:\/\/www.npmjs.com\/package\/ghooks\" target=\"_blank\" rel=\"noopener noreferrer\">ghooks<\/a>.<\/p>\n<ol start=\"1\">\n<li>Installiere <code>ghooks<\/code> unter <code>devDependencies<\/code>:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install ghooks --save-dev<\/code><\/pre>\n<ol start=\"2\">\n<li>F\u00fcge ein <code>configs<\/code> Objekt in der obersten Ebene deiner <strong>package.json<\/strong> Datei (im JavaScript Projekt) hinzu.<\/li>\n<li>F\u00fcge ein <code>ghooks<\/code> Objekt unter <code>configs<\/code> hinzu.<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>F\u00fcge eine Eigenschaft mit einem Schl\u00fcssel von <code>pre-commit<\/code> und einem Wert von <code>jest<\/code> hinzu.<\/li>\n<\/ol>\n<pre><code class=\"language-json\">{\n  \u2026\n  \"config\": {\n    \"ghooks\": {\n      \"pre-commit\": \"jest\"\n    }\n  },\n}<\/code><\/pre>\n<ol start=\"5\">\n<li>Best\u00e4tige den Code. Der Code l\u00f6st den Pre-Commit-Hook aus, der Jest ausf\u00fchrt:<\/li>\n<\/ol>\n<figure>\n<p><figure style=\"width: 1183px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-pre-commit.png\" alt=\"Ausf\u00fchrung von Jest w\u00e4hrend einer Pre-Commit-Phase. Wenn du eine \u00dcbergabe mit git commit -m im Terminal vornimmst, wird Jest ausgef\u00fchrt und die Ergebnisse der Tests werden angezeigt.\" width=\"1183\" height=\"803\"><figcaption class=\"wp-caption-text\">Jest w\u00e4hrend des pre-commit mit ghooks ausf\u00fchren<\/figcaption><\/figure><\/figure>\n<h2>Zusammenfassung<\/h2>\n<p>Jetzt wei\u00dft du, wie du Jest in deinen Entwicklungsworkflow integrieren kannst, damit es automatisch ausgef\u00fchrt wird, sobald du eine \u00c4nderung vornimmst. Auf diese Weise erh\u00e4ltst du kontinuierliches Feedback und kannst Codeprobleme schnell beheben, bevor du deine \u00c4nderungen in die Produktion \u00fcberf\u00fchrst.<\/p>\n<p>Wenn du <a href=\"https:\/\/sevalla.com\/application-hosting\/\">deine Anwendung bei Kinsta hostest<\/a>, 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\u00e4hle zwischen 27 Rechenzentren und einem HTTP\/3-f\u00e4higen CDN mit 300+ PoPs.<\/p>\n<p>Mit isolierter Containertechnologie, zwei starken Firewalls und fortschrittlichem DDoS-Schutz auf Basis von Cloudflare bist du sicher. Und mit der <a href=\"https:\/\/kinsta.com\/de\/docs\/kinsta-api\/\">Kinsta-API<\/a> kannst du Apps integrieren oder Workflows automatisieren.<\/p>\n<p>Richte Jest ein und st\u00f6bere noch heute in den Ressourcen von Kinsta, um <a href=\"https:\/\/kinsta.com\/javascript\/\">deine JavaScript-Anwendungen zu verbessern<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Softwaretests sind wichtig, um sicherzustellen, dass deine Anwendungen wie erwartet funktionieren, vor allem wenn du \u00c4nderungen einf\u00fchrst. Das fr\u00fchzeitige Aufsp\u00fcren und Beheben von Fehlern in der &#8230;<\/p>\n","protected":false},"author":290,"featured_media":65647,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[951,952],"class_list":["post-65646","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-javascript-frameworks","topic-javascript-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wie du deine Anwendungen mit Jest testest - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Wir lernen das beliebte Jest-Framework, seine Funktionen und die besten M\u00f6glichkeiten, es in deinen Entwicklungsprozess zu integrieren, kennen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/jest\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie du deine Anwendungen mit Jest testest\" \/>\n<meta property=\"og:description\" content=\"Wir lernen das beliebte Jest-Framework, seine Funktionen und die besten M\u00f6glichkeiten, es in deinen Entwicklungsprozess zu integrieren, kennen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/jest\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-01T09:38:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-12T16:03:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/09\/jest.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marcia Ramos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Wir lernen das beliebte Jest-Framework, seine Funktionen und die besten M\u00f6glichkeiten, es in deinen Entwicklungsprozess zu integrieren, kennen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/09\/jest.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcia Ramos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"17\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jest\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jest\/\"},\"author\":{\"name\":\"Marcia Ramos\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\"},\"headline\":\"Wie du deine Anwendungen mit Jest testest\",\"datePublished\":\"2023-10-01T09:38:39+00:00\",\"dateModified\":\"2023-10-12T16:03:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jest\/\"},\"wordCount\":3104,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jest\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/09\/jest.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/jest\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jest\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/jest\/\",\"name\":\"Wie du deine Anwendungen mit Jest testest - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jest\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jest\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/09\/jest.jpg\",\"datePublished\":\"2023-10-01T09:38:39+00:00\",\"dateModified\":\"2023-10-12T16:03:49+00:00\",\"description\":\"Wir lernen das beliebte Jest-Framework, seine Funktionen und die besten M\u00f6glichkeiten, es in deinen Entwicklungsprozess zu integrieren, kennen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jest\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/jest\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jest\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/09\/jest.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/09\/jest.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jest\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript-Frameworks\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/javascript-frameworks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie du deine Anwendungen mit Jest testest\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\",\"name\":\"Marcia Ramos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"caption\":\"Marcia Ramos\"},\"description\":\"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 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.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/marciadiasramos\/\"],\"honorificSuffix\":\"B.Sc.\",\"gender\":\"Female\",\"knowsLanguage\":[\"English\",\"Portuguese\"],\"jobTitle\":\"Editorial Team Lead\",\"worksFor\":\"Kinsta Inc.\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/marciaramos\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie du deine Anwendungen mit Jest testest - Kinsta\u00ae","description":"Wir lernen das beliebte Jest-Framework, seine Funktionen und die besten M\u00f6glichkeiten, es in deinen Entwicklungsprozess zu integrieren, kennen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/jest\/","og_locale":"de_DE","og_type":"article","og_title":"Wie du deine Anwendungen mit Jest testest","og_description":"Wir lernen das beliebte Jest-Framework, seine Funktionen und die besten M\u00f6glichkeiten, es in deinen Entwicklungsprozess zu integrieren, kennen.","og_url":"https:\/\/kinsta.com\/de\/blog\/jest\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-10-01T09:38:39+00:00","article_modified_time":"2023-10-12T16:03:49+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/09\/jest.jpg","type":"image\/jpeg"}],"author":"Marcia Ramos","twitter_card":"summary_large_image","twitter_description":"Wir lernen das beliebte Jest-Framework, seine Funktionen und die besten M\u00f6glichkeiten, es in deinen Entwicklungsprozess zu integrieren, kennen.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/09\/jest.jpg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Marcia Ramos","Gesch\u00e4tzte Lesezeit":"17\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/jest\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/jest\/"},"author":{"name":"Marcia Ramos","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116"},"headline":"Wie du deine Anwendungen mit Jest testest","datePublished":"2023-10-01T09:38:39+00:00","dateModified":"2023-10-12T16:03:49+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/jest\/"},"wordCount":3104,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/jest\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/09\/jest.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/jest\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/jest\/","url":"https:\/\/kinsta.com\/de\/blog\/jest\/","name":"Wie du deine Anwendungen mit Jest testest - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/jest\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/jest\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/09\/jest.jpg","datePublished":"2023-10-01T09:38:39+00:00","dateModified":"2023-10-12T16:03:49+00:00","description":"Wir lernen das beliebte Jest-Framework, seine Funktionen und die besten M\u00f6glichkeiten, es in deinen Entwicklungsprozess zu integrieren, kennen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/jest\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/jest\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/jest\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/09\/jest.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/09\/jest.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/jest\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"JavaScript-Frameworks","item":"https:\/\/kinsta.com\/de\/thema\/javascript-frameworks\/"},{"@type":"ListItem","position":3,"name":"Wie du deine Anwendungen mit Jest testest"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116","name":"Marcia Ramos","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","caption":"Marcia Ramos"},"description":"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 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.","sameAs":["https:\/\/www.linkedin.com\/in\/marciadiasramos\/"],"honorificSuffix":"B.Sc.","gender":"Female","knowsLanguage":["English","Portuguese"],"jobTitle":"Editorial Team Lead","worksFor":"Kinsta Inc.","url":"https:\/\/kinsta.com\/de\/blog\/author\/marciaramos\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/65646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=65646"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/65646\/revisions"}],"predecessor-version":[{"id":66260,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/65646\/revisions\/66260"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/65646\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/65646\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/65646\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/65646\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/65646\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/65646\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/65646\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/65646\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/65647"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=65646"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=65646"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=65646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}