Einführung in Jest

Jest ist eine Bibliothek zum Testen von JavaScript-Code.

Es handelt sich um ein von Facebook verwaltetes Open-Source-Projekt, das sich besonders gut zum Testen von React-Code eignet, aber nicht darauf beschr?nkt ist: Es kann jeden JavaScript-Code testen. Seine St?rken sind:

• es geht schnell
• es kann Snapshot-Tests durchführen
• Es ist eigensinnig und bietet alles sofort einsatzbereit, ohne dass Sie Entscheidungen treffen müssen

export default function sum(a, n) {
  return a + b;
}

divide.test.js

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

Matcher

Ein Matcher ist eine Methode, mit der Sie Werte testen k?nnen.

• toBe vergleicht strikte Gleichheit mit ===
• toEqual vergleicht die Werte zweier Variablen. Wenn es sich um ein Objekt oder Array handelt, prüft es die Gleichheit aller Eigenschaften oder Elemente
• toBeNull ist wahr, wenn ein Nullwert übergeben wird
• toBeDefined ist wahr, wenn ein definierter Wert übergeben wird (im Gegensatz zu oben)
• toBeUndefined ist wahr, wenn ein undefinierter Wert übergeben wird
• toBeCloseTo wird verwendet, um Gleitkommawerte zu vergleichen und Rundungsfehler zu vermeiden
• toBeTruthy wahr, wenn der Wert als wahr angesehen wird (wie es bei einem ?Wenn“ der Fall ist)
• toBeFalsy wahr, wenn der Wert als falsch angesehen wird (wie es bei einem ?Wenn“ der Fall ist)
• toBeGreaterThan wahr, wenn das Ergebnis von Expect() h?her ist als das Argument
• toBeGreaterThanOrEqual wahr, wenn das Ergebnis von Expect() gleich dem Argument oder h?her als das Argument ist
• toBeLessThan wahr, wenn das Ergebnis von Expect() kleiner ist als das Argument
• toBeLessThanOrEqual wahr, wenn das Ergebnis von Expect() gleich dem Argument oder kleiner als das Argument ist
• toMatch wird verwendet, um Zeichenfolgen mit dem Mustervergleich regul?rer Ausdrücke zu vergleichen
• toContain wird in Arrays verwendet, true, wenn das erwartete Array das Argument in seiner Elementmenge enth?lt
• toHaveLength(number): prüft die L?nge eines Arrays
• toHaveProperty(key, value): prüft, ob ein Objekt eine Eigenschaft hat, und prüft optional seinen Wert
• toThrow prüft, ob eine von Ihnen übergebene Funktion eine Ausnahme (allgemein) oder eine bestimmte Ausnahme ausl?st
• toBeInstanceOf(): prüft, ob ein Objekt eine Instanz einer Klasse ist

Abh?ngigkeiten

Eine Abh?ngigkeit ist ein Codeabschnitt, von dem Ihre Anwendung abh?ngt. Es k?nnte sich um eine Funktion/ein Objekt in unserem Projekt oder eine Abh?ngigkeit eines Drittanbieters (z. B. Axios) handeln

Ein Code wird zu einer echten Abh?ngigkeit, wenn Ihre eigene Anwendung ohne ihn nicht funktionieren kann.

Zum Beispiel, wenn Sie in Ihrer Anwendung eine Funktion implementieren, um E-Mails zu senden, API-Anfragen zu stellen oder ein Konfigurationsobjekt zu erstellen usw.

Es gibt zwei M?glichkeiten, wie wir in unserem Code in einem js-Projekt Abh?ngigkeiten hinzufügen k?nnen:

Importe

export default function sum(a, n) {
  return a + b;
}

Abh?ngigkeitsinjektion

Nur ??ein schicker Begriff für ein einfaches Konzept.

Wenn Ihre Funktion einige Funktionen von einer externen Abh?ngigkeit ben?tigt, fügen Sie sie einfach als Argument ein.

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

Unit-Tests

Unit-Tests werden von Softwareentwicklern geschrieben und ausgeführt, um sicherzustellen, dass ein Abschnitt einer Anwendung (bekannt als ?Einheit“) seinem Design entspricht und sich wie vorgesehen verh?lt.

Wir m?chten unseren Code isoliert testen, die tats?chliche Implementierung etwaiger Abh?ngigkeiten ist uns egal.
Wir m?chten

• dass unsere Codeeinheit wie erwartet funktioniert
• gibt die erwarteten Ergebnisse zurück
• ruft alle Mitarbeiter (Abh?ngigkeiten) auf, wie es sollte

Und hier kommt die Verspottung unserer Abh?ngigkeiten ins Spiel.

Verspottung

Bei Unit-Tests bieten uns Mocks die F?higkeit, die von einer Abh?ngigkeit bereitgestellte Funktionalit?t zu unterdrücken und eine M?glichkeit, zu beobachten, wie unser Code mit der Abh?ngigkeit interagiert.

Mocks sind besonders nützlich, wenn es teuer oder unpraktisch ist, eine Abh?ngigkeit direkt in unsere Tests einzubeziehen, beispielsweise in F?llen, in denen Ihr Code HTTP-Aufrufe an eine API durchführt oder mit der Datenbankschicht interagiert.

Es ist vorzuziehen, die Antworten für diese Abh?ngigkeiten auszublenden und gleichzeitig sicherzustellen, dass sie nach Bedarf aufgerufen werden. Hier kommen Mocks zum Einsatz.

Durch die Verwendung von Scheinfunktionen k?nnen wir Folgendes wissen:

• Die Anzahl der eingegangenen Anrufe.
• ArgumentWerte, die bei jedem Aufruf verwendet werden.
• Der ?Kontext“ oder dieser Wert bei jedem Aufruf.
• Wie die Funktion beendet wurde und welche Werte erzeugt wurden.

Spott im Scherz

Es gibt mehrere M?glichkeiten, Scheinfunktionen zu erstellen.

• Mit der Methode jest.fn k?nnen wir direkt eine neue Scheinfunktion erstellen.
• Wenn Sie eine Objektmethode verspotten, k?nnen Sie jest.spyOn verwenden.
• Und wenn Sie ein ganzes Modul verspotten m?chten, k?nnen Sie jest.mock verwenden.

Die jest.fn-Methode ist für sich genommen eine Funktion h?herer Ordnung.

Es handelt sich um eine Factory-Methode, die neue, ungenutzte Scheinfunktionen erstellt.

Funktionen in JavaScript sind erstklassige Bürger, sie k?nnen als Argumente weitergegeben werden.

Jede Scheinfunktion hat einige besondere Eigenschaften. Die Mock-Eigenschaft ist von grundlegender Bedeutung. Bei dieser Eigenschaft handelt es sich um ein Objekt, das alle Scheinstatusinformationen darüber enth?lt, wie die Funktion aufgerufen wurde. Dieses Objekt enth?lt drei Array-Eigenschaften:

• Anrufe [Argumente jedes Anrufs]
• Instanzen ['dieser' Wert bei jedem Aufruf]
• Ergebnisse [der Wert, den die Funktion beendet hat], die Ergebnisseigenschaft hat einen Typ (Rückgabe oder Wurf) und einen Wert
  • Die Funktion gibt explizit einen Wert zurück.
  • Die Funktion wird ohne Return-Anweisung vollst?ndig ausgeführt (was der Rückgabe von undefiniert entspricht
  ).
  • Die Funktion gibt einen Fehler aus.

export default function sum(a, n) {
  return a + b;
}

• https://codesandbox.io/s/implementing-mock-functions-tkc8b

Schein-Basic

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

Verspottung injizierter Abh?ngigkeiten

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Spottmodule

Verspotten Sie eine Funktion mit jest.fn

// Constructor Injection

// DatabaseManager class takes a database connector as a dependency
class DatabaseManager {
    constructor(databaseConnector) {
        // Dependency injection of the database connector
        this.databaseConnector = databaseConnector;
    }

    updateRow(rowId, data) {
        // Use the injected database connector to perform the update
        this.databaseConnector.update(rowId, data);
    }
}

// parameter injection, takes a database connector instance in as an argument; easy to test!
function updateRow(rowId, data, databaseConnector) {
    databaseConnector.update(rowId, data);
}

Diese Art der Verspottung kommt aus mehreren Gründen seltener vor:

• jest.mock erledigt dies automatisch für alle Funktionen in einem Modul
• jest.spyOn macht das Gleiche, erm?glicht aber die Wiederherstellung der ursprünglichen Funktion

Verspotten Sie ein Modul mit jest.mock

Ein h?ufigerer Ansatz ist die Verwendung von jest.mock um alle Exporte eines Moduls automatisch auf die Mock-Funktion festzulegen.

// 1. The mock function factory
function fn(impl = () => {}) {
  // 2. The mock function
  const mockFn = function(...args) {
    // 4. Store the arguments used
    mockFn.mock.calls.push(args);
    mockFn.mock.instances.push(this);
    try {
      const value = impl.apply(this, args); // call impl, passing the right this
      mockFn.mock.results.push({ type: 'return', value });
      return value; // return the value
    } catch (value) {
      mockFn.mock.results.push({ type: 'throw', value });
      throw value; // re-throw the error
    }
  }
  // 3. Mock state
  mockFn.mock = { calls: [], instances: [], results: [] };
  return mockFn;
}

Spionieren oder verspotten Sie eine Funktion mit jest.spyOn

Manchmal m?chten Sie nur zusehen, wie eine Methode aufgerufen wird, aber die ursprüngliche Implementierung beibehalten. In anderen F?llen m?chten Sie m?glicherweise die Implementierung nachahmen, das Original jedoch sp?ter in der Suite wiederherstellen.

test("returns undefined by default", () => {
  const mock = jest.fn();

  let result = mock("foo");

  expect(result).toBeUndefined();
  expect(mock).toHaveBeenCalled();
  expect(mock).toHaveBeenCalledTimes(1);
  expect(mock).toHaveBeenCalledWith("foo");
});

Stellen Sie die ursprüngliche Implementierung wieder her

const doAdd = (a, b, callback) => {
  callback(a + b);
};

test("calls callback with arguments added", () => {
  const mockCallback = jest.fn();
  doAdd(1, 2, mockCallback);
  expect(mockCallback).toHaveBeenCalledWith(3);
});

Javascript und die Ereignisschleife

JavaScript ist Single-Threaded:Es kann immer nur eine Aufgabe gleichzeitig ausgeführt werden. Normalerweise ist das keine gro?e Sache, aber jetzt stellen Sie sich vor, Sie führen eine Aufgabe aus, die 30 Sekunden dauert. Ja. W?hrend dieser Aufgabe warten wir 30 Sekunden, bevor etwas anderes passieren kann (JavaScript wird standardm??ig im Hauptthread des Browsers ausgeführt. daher bleibt die gesamte Benutzeroberfl?che h?ngen).
Wir schreiben das Jahr 2020, niemand m?chte eine langsame, nicht reagierende Website.

Glücklicherweise bietet uns der Browser einige Funktionen, die die JavaScript-Engine selbst nicht bietet: eine Web-API. Dazu geh?ren die DOM-API, setTimeout, HTTP-Anfragen und so weiter. Dies kann uns helfen, ein gewisses asynchrones, nicht blockierendes Verhalten
zu schaffen

export default function sum(a, n) {
  return a + b;
}

• Call Stack – Wenn wir eine Funktion aufrufen, wird sie zu etwas hinzugefügt, das Call Stack genannt wird.
• WebAPI – setTimeout wird von der WebAPI bereitgestellt, übernimmt eine Rückruffunktion und richtet einen Timer ein, ohne den Hauptthread zu blockieren
• Warteschlange – wenn der Timer abgelaufen ist, wird der Rückruf zur Warteschlange hinzugefügt
• Ereignisschleife – prüft, ob der Aufrufstapel leer ist, prüft, ob in der Warteschlange auszuführende Rückrufe vorhanden sind, und wechselt zum auszuführenden Aufrufstapel

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

Testen von asynchronem Code mit Jest

Jest geht normalerweise davon aus, dass die Funktionen der Tests synchron ausgeführt werden.

Wenn wir einen asynchronen Vorgang durchführen, Jest aber nicht mitteilen, dass er auf das Ende des Tests warten soll, wird ein falsch positives Ergebnis ausgegeben.

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Asynchrone Muster
Es gibt verschiedene Muster für die Handhabung asynchroner Vorg?nge in JavaScript. Die am h?ufigsten verwendeten sind:

• Rückrufe
• Versprechen & Async/Warten

Rückrufe testen

Sie k?nnen keinen Test in einem Rückruf haben, da Jest ihn nicht ausführt – die Ausführung der Testdatei endet, bevor der Rückruf aufgerufen wird. Um dies zu beheben, übergeben Sie einen Parameter an die Testfunktion, den Sie bequem als erledigt aufrufen k?nnen. Jest wartet, bis Sie done() aufrufen, bevor es den Test beendet:

// Constructor Injection

// DatabaseManager class takes a database connector as a dependency
class DatabaseManager {
    constructor(databaseConnector) {
        // Dependency injection of the database connector
        this.databaseConnector = databaseConnector;
    }

    updateRow(rowId, data) {
        // Use the injected database connector to perform the update
        this.databaseConnector.update(rowId, data);
    }
}

// parameter injection, takes a database connector instance in as an argument; easy to test!
function updateRow(rowId, data, databaseConnector) {
    databaseConnector.update(rowId, data);
}

Versprechen

Bei Funktionen, die Versprechen zurückgeben, geben wir ein Versprechen aus dem Test zurück:

// 1. The mock function factory
function fn(impl = () => {}) {
  // 2. The mock function
  const mockFn = function(...args) {
    // 4. Store the arguments used
    mockFn.mock.calls.push(args);
    mockFn.mock.instances.push(this);
    try {
      const value = impl.apply(this, args); // call impl, passing the right this
      mockFn.mock.results.push({ type: 'return', value });
      return value; // return the value
    } catch (value) {
      mockFn.mock.results.push({ type: 'throw', value });
      throw value; // re-throw the error
    }
  }
  // 3. Mock state
  mockFn.mock = { calls: [], instances: [], results: [] };
  return mockFn;
}

Asynchron/warten

Um Funktionen zu testen, die Versprechen zurückgeben, k?nnen wir auch async/await verwenden, was die Syntax sehr unkompliziert und einfach macht:

test("returns undefined by default", () => {
  const mock = jest.fn();

  let result = mock("foo");

  expect(result).toBeUndefined();
  expect(mock).toHaveBeenCalled();
  expect(mock).toHaveBeenCalledTimes(1);
  expect(mock).toHaveBeenCalledWith("foo");
});

Tipps

• Wir müssen ein gutes Verst?ndnis dafür haben, was unsere Funktion tut und was wir testen werden
• Denken Sie über das Verhalten des Codes nach, den wir testen
• Bereiten Sie die Bühne:
  • Abh?ngigkeiten nachahmen/ausspionieren
  • Interagiert unser Code mit globalen Objekten? wir k?nnen sie auch verspotten/ausspionieren
  • Interagieren unsere Tests mit dem DOM? Wir k?nnen einige gef?lschte Elemente erstellen, mit denen wir arbeiten k?nnen
  • Strukturieren Sie Ihre Tests
  • Gegeben ...
  • Wenn ich anrufe ....
  • Dann ... erwarte ich .....

const doAdd = (a, b, callback) => {
  callback(a + b);
};

test("calls callback with arguments added", () => {
  const mockCallback = jest.fn();
  doAdd(1, 2, mockCallback);
  expect(mockCallback).toHaveBeenCalledWith(3);
});

Links

• https://medium.com/@rickhanlonii/understanding-jest-mocks-f0046c68e53c
• https://jestjs.io/docs/en/mock-functions
• https://codesandbox.io/s/implementing-mock-functions-tkc8b
• https://github.com/BulbEnergy/jest-mock-examples
• https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
• https://jestjs.io/docs/en/asynchronous
• https://www.pluralsight.com/guides/test-asynchronous-code-jest

Das obige ist der detaillierte Inhalt vonEinführung in Jest: Unit-Tests, Mocking und asynchroner Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!