Was ist Scherz? Grundlegende Verwendung von Jest

Der Inhalt dieses Artikels handelt davon, was Jest ist? Die Einführung von Jest-bezogenem Wissen hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

1 Was ist Jest?

Jest

Jest ist Facebooks Open-Source-JavaScript-Testframework, das automatisch Behauptungen, JSDom und Abdeckung integriert Berichte und andere Testtools, die Entwickler benötigen, ist ein Testframework mit nahezu keiner Konfiguration. Und es eignet sich sehr gut zum Testen von React, dem Open-Source-Frontend-Framework von Facebook.

2 Jest installieren

2.1 package.json initialisieren

Geben Sie den folgenden Befehl in die Shell ein, um das Front-End-Projekt zu initialisieren und ein Paket zu generieren. json:

npm init -y

2.2 Jest und zugehörige Abhängigkeiten installieren

Geben Sie die folgenden Befehle in die Shell ein, um die zum Testen erforderlichen Abhängigkeiten zu installieren:

npm install -D jest babel-jest babel-core babel-preset-env regenerator-runtime

babel-jest, babel-core , regenerator-runtime, Diese Abhängigkeiten von babel-preset-env dienen dazu, dass wir die Syntaxfunktionen von ES6 für Unit-Tests verwenden können. Die von ES6 bereitgestellte Importmethode zum Importieren von Modulen wird von Jest selbst nicht unterstützt.

2.3 Fügen Sie die .babelrc-Datei hinzu

Fügen Sie die .babelrc-Datei im Stammverzeichnis des Projekts hinzu und kopieren Sie den folgenden Inhalt in die Datei:

{ 
 "presets": ["env"]
}

2.4 Ändern Sie die test im package.json-Skript

Öffnen Sie die Datei package.json und ändern Sie den Wert von test unter script in jest:

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

3. Schreiben Sie Ihren ersten Jest-Test

Erstellen Sie die SRC- und Testverzeichnisse sowie die zugehörigen Dateien.

Erstellen Sie das SRC-Verzeichnis im Projektstammverzeichnis und fügen Sie die Datei „functions.js“ im SRC-Verzeichnis hinzu.

Erstellen Sie den Test Verzeichnis im Projektstammverzeichnis und erstellen Sie die Datei „functions.test.js“ im Testverzeichnis

Jest findet automatisch alle Testdateien, die mit .spec.js- oder .test.js-Dateien im Projekt benannt sind, und führt sie aus Normalerweise schreiben wir Testdateien. Die zu befolgende Namenskonvention lautet: der Dateiname der Testdatei = der Name des zu testenden Moduls + .test.js. Das zu testende Modul lautet dann „functions.js“. Die entsprechende Testdatei heißt „functions.test.js“.

Erstellen Sie das getestete Modul in src/functions.js

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

Erstellen Sie einen Testfall in der Datei test/functions.test.js

import functions  from '../src/functions';
test('sum(2 + 2) 等于 4', () => {
  expect(functions.sum(2, 2)).toBe(4);
})

Run npm run test, Jest gibt die folgende Meldung in der Shell aus:

PASS  test/functions.test.js
  √ sum(2 + 2) 等于 4 (7ms)
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.8s

4 Mehrere häufig verwendete Jest-Behauptungen

expect(functions.sum(2, 2)).toBe( 4) ist eine Behauptung. Jest stellt uns die Expect-Funktion zur Verfügung, um die getestete Methode zu verpacken und ein Objekt zurückzugeben. Lassen Sie uns einige häufig verwendete Jest-Behauptungen vorstellen, die mehrere Matcher umfassen. Mit dem Modifikator

.not

//functions.test.js
import functions  from '../src/functions'
test('sum(2, 2) 不等于 5', () => {
  expect(functions.sum(2, 2)).not.toBe(5);
})

.not können Sie die Situation testen, in der das Ergebnis nicht einem bestimmten Wert entspricht. Dies entspricht fast genau der englischen Syntax und ist einfach verstehen.

.toEqual()

// functions.js
export default {
  getAuthor() {
      return {
            name: 'LITANGHUI',      
            age: 24,
    }
  }
}

// functions.test.js
import functions  from '../src/functions';
test('getAuthor()返回的对象深度相等', () => {
  expect(functions.getAuthor()).toEqual(functions.getAuthor());
})
test('getAuthor()返回的对象内存地址不同', () => {
  expect(functions.getAuthor()).not.toBe(functions.getAuthor());
})

.toEqual Matcher prüft rekursiv, ob alle Attribute und Attributwerte des Objekts gleich sind. Wenn Sie also Anwendungstypen vergleichen möchten, verwenden Sie bitte die . toEqual-Matcher anstelle von .toBe.

.toHaveLength

// functions.js
export default {
  getIntArray(num) {
      if (!Number.isInteger(num)) {
            throw Error('"getIntArray"只接受整数类型的参数');
    }
        let result = [];    
        for (let i = 0, len = num; i < len; i++) {
      result.push(i);
    }    
    return result;
  }
}

// functions.test.js
import functions  from '../src/functions';
test('getIntArray(3)返回的数组长度应该为3', () => {
  expect(functions.getIntArray(3)).toHaveLength(3);
})

.toHaveLength kann bequem verwendet werden, um zu testen, ob die Länge von String- und Array-Typen den Erwartungen entspricht.

.toThrow

// functions.test.js
import functions  from '../src/functions';
test('getIntArray(3.3)应该抛出错误', () => {
  function getIntArrayWrapFn() {
    functions.getIntArray(3.3);
  }
  expect(getIntArrayWrapFn).toThrow('"getIntArray"只接受整数类型的参数');
})

.toThorw ermöglicht es uns möglicherweise zu testen, ob die zu testende Methode wie erwartet eine Ausnahme auslöst, aber was bei der Verwendung beachtet werden muss, ist: Wir müssen eine Funktion verwenden, die wird getestet. Erstellen Sie einen Wrapper für die Funktion, genau wie getIntArrayWrapFn es oben getan hat, andernfalls schlägt die Behauptung fehl, weil die Funktion einen Fehler auslöst.

.toMatch

// functions.test.js
import functions  from '../src/functions';
test('getAuthor().name应该包含"li"这个姓氏', () => {
  expect(functions.getAuthor().name).toMatch(/li/i);
})

.toMatch übergibt einen regulären Ausdruck, der es uns ermöglicht, einen regulären Abgleich von Zeichenfolgentypen durchzuführen.

5 Testen Sie die asynchrone Funktion

Axios installieren
Hier verwenden wir die am häufigsten verwendeten Axios der http-Anforderungsbibliothek für die Anforderungsverarbeitung

npm install axios

Schreiben Sie http Anforderungsfunktion
Wir werden http://jsonplaceholder.typicode.com/users/1 anfordern, Dies ist die von JSONPlaceholder bereitgestellte Scheinanforderungsadresse

JSONPlaceholder

// functions.js
import axios from 'axios';
export default {
  fetchUser() {
      return axios.get('http://jsonplaceholder.typicode.com/users/1')
      .then(res => res.data)
      .catch(error => console.log(error));
  }
}

// functions.test.js
import functions  from '../src/functions';
test('fetchUser() 可以请求到一个含有name属性值为Leanne Graham的对象', () => {
  expect.assertions(1);  
  return functions.fetchUser()
    .then(data => {
      expect(data.name).toBe('Leanne Graham');
    });
})

Oben haben wir „expect.assertions(1)“ aufgerufen, was dafür sorgt, dass in asynchronen Testfällen eine Assertion in der Callback-Funktion ausgeführt wird. Dies ist beim Testen von asynchronem Code sehr effektiv.

Verwenden Sie Async und Wait, um asynchronen Code zu optimieren

test('fetchUser() 可以请求到一个用户名字为Leanne Graham', async () => {
  expect.assertions(1);
    const data =  await functions.fetchUser();
  expect(data.name).toBe('Leanne Graham')
})

Natürlich, da wir Babel installiert haben, warum nicht die Syntax von Async und Wait verwenden, um unseren asynchronen Testcode zu optimieren? Sie müssen alle als Expect.Assertions-Methode bezeichnet werden.

Das obige ist der detaillierte Inhalt vonWas ist Scherz? Grundlegende Verwendung von Jest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!