Heim  >  Artikel  >  Web-Frontend  >  Testen Sie Ihre JavaScript-App mit Jest

Testen Sie Ihre JavaScript-App mit Jest

WBOY
WBOYOriginal
2024-08-13 06:37:28740Durchsuche

Test Your JavaScript App With Jest

Testen ist ein entscheidender Teil der Softwareentwicklung, der sicherstellt, dass sich Ihre Anwendung wie erwartet verhält. Eines der beliebtesten Test-Frameworks im JavaScript-Ökosystem ist Jest. Jest wurde von Facebook entwickelt und ist für seine Einfachheit und Benutzerfreundlichkeit bekannt, was es zu einer ausgezeichneten Wahl sowohl für Anfänger als auch für erfahrene Entwickler macht.

Erste Schritte mit Jest

Bevor wir uns mit Beispielen befassen, richten wir Jest in Ihrem Projekt ein. Wenn Sie es noch nicht getan haben, können Sie es mit npm:
installieren

npm install --save-dev jest

Fügen Sie als Nächstes ein Testskript zu Ihrer package.json hinzu:

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

Jetzt sind Sie bereit, einige Tests zu schreiben!
Lassen Sie uns eine einfache Funktion zum Testen erstellen. Erstellen Sie eine Datei mit dem Namen math.js:

// math.js
function add(a, b) {
  return a + b;
}
module.exports = add;

Jetzt schreiben wir einen Test für diese Funktion. Erstellen Sie eine Datei mit dem Namen math.test.js:

// math.test.js
const add = require('./math');

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

In diesem Test verwenden wir die Testfunktion, um einen Testfall zu definieren. Die Expect-Funktion wird verwendet, um sicherzustellen, dass das Ergebnis von add(1, 2) gleich 3 ist.

Durchführen der Tests

Sie können Ihre Tests ausführen, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

npm test

Sie sollten eine Ausgabe sehen, die anzeigt, dass Ihr Test bestanden wurde.

Asynchronen Code testen

Jest unterstützt auch das Testen von asynchronem Code. Ändern wir unsere math.js-Datei so, dass sie eine asynchrone Funktion enthält:

// math.js
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('peanut butter');
    }, 1000);
  });
}

module.exports = { add, fetchData };

Jetzt schreiben wir einen Test für fetchData:

// math.test.js
const { add, fetchData } = require('./math');

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

test('fetches data', async () => {
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

In diesem Test markieren wir die Testfunktion als asynchron und verwenden „await“, um auf die Auflösung des Versprechens zu warten.

Mocking-Funktionen

Jest bietet leistungsstarke Spottfunktionen. Nehmen wir an, Sie haben eine Funktion, die einen API-Aufruf durchführt. Sie können diese Funktion verspotten, um ihr Verhalten während Tests zu steuern.
Hier ist ein Beispiel:

// api.js
const axios = require('axios');

async function getUser() {
  const response = await axios.get('https://api.example.com/user');
  return response.data;
}

module.exports = getUser;

Sie können Axios in Ihrem Test verspotten:

// api.test.js
const axios = require('axios');
const getUser = require('./api');

jest.mock('axios');

test('fetches user data', async () => {
  const user = { name: 'John Doe' };
  axios.get.mockResolvedValue({ data: user });

  const result = await getUser();
  expect(result).toEqual(user);
});

In diesem Test verspotten wir die axios.get-Methode, um eine vordefinierte Antwort zurückzugeben, sodass wir getUser testen können, ohne einen tatsächlichen API-Aufruf durchzuführen.

Jest ist ein leistungsstarkes Testframework, mit dem Sie ganz einfach Tests für Ihre JavaScript-Anwendungen schreiben und ausführen können. Mit seiner einfachen Syntax, der Unterstützung für asynchronen Code und den integrierten Mocking-Funktionen kann Jest Ihnen dabei helfen, sicherzustellen, dass Ihr Code zuverlässig und wartbar ist. Beginnen Sie noch heute mit der Integration von Jest in Ihre Projekte und genießen Sie die Vorteile automatisierter Tests.

Das obige ist der detaillierte Inhalt vonTesten Sie Ihre JavaScript-App mit Jest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn