Tests Reagieren-Haken Mit Enzym Reagieren und Bibliothek zum Testen

0
9

Als Sie beginnen, Sie zu nutzen, Reagieren die Haken in Ihren Anwendungen, werden Sie wollen sicher sein, der code, den Sie schreiben, ist nichts weniger als solid. Es gibt nichts wie Versand-buggy-code. Ein Weg, sicher zu sein, dein code ist bug-frei ist zum schreiben von tests. Und die Tests Reagieren Haken nicht viel anders aus, wie Reagieren die Anwendungen getestet werden, im Allgemeinen.

In diesem tutorial schauen wir uns an, wie Sie dies tun, indem Sie ein to-do-Anwendung gebaut, mit Haken. Wir übernehmen das schreiben von tests mithilfe der Ezyme und Reagieren Bibliothek zum Testen, die sind beide in der Lage, genau das zu tun. Wenn Sie das neue Enzym, die wir eigentlich gebucht über es eine Weile zurück, die zeigen, wie es verwendet werden kann, mit Scherz in Anwendungen Reagieren. Es ist nicht eine schlechte Idee zu überprüfen, dass wir da in Graben-Tests Reagieren Haken.

Hier ist, was wir testen wollen

Ein ziemlich standard-to-do-Komponente sieht wie folgt aus:

importieren Reagieren, { useState, useRef } von “reagieren”;
const Todo = () => {
const [todos, setTodos] = useState([
{ id: 1, item: “Fehler Beheben” },
{ id: 2, item: “Nehmen Sie den Papierkorb” }
]);
const todoRef = useRef();
const removeTodo = id => {
setTodos(todos.filter(todo => todo.id !== id));
};
const addTodo = data => {
lassen id = todos.Länge + 1;
setTodos([
…Aufgaben,
{
id,
item: Daten
}
]);
};
const handleNewTodo = e => {
e.preventDefault();
const Eintrag = todoRef.aktuellen;
addTodo(item.Wert);
Element.Wert = “”;
};
return (
<div className=”container”>
<div className=”row”>
<div className=”col-md-6″>
<h2>Add Todo</h2>
</div>
</div>
<form> –
<div className=”row”>
<div className=”col-md-6″>
<input
type=”text”
Autofokus
ref={todoRef}
Platzhalter=”Geben Sie eine Aufgabe”
className=”form-control”
Daten-testid=”input”
/>
</div>
</div>
<div className=”row”>
<div className=”col-md-6″>
<- Taste
type=”submit”
onClick={handleNewTodo}
className=”btn btn-primary”
>
Aufgabe Hinzufügen
</button>
</div>
</div>
</form>
<div className=”Zeile todo-Liste”>
<div className=”col-md-6″>
<h3>Liste</h3>
{!todos.Länge ? (
<div className=”no-task”>Keine Aufgabe!</div>
) : (
<ul data-testid=”todos”>
{todo-Liste.anzeigen(todo => {
return (
<li key={todo.id}>
<div>
<span>{todo.item}</span>
<- Taste
className=”btn btn-danger”
Daten-testid=”löschen-button”
onClick={() => removeTodo(todo.id)}
>
X
</button>
</div>
</li>
);
})}
</ul>
)}
</div>
</div>
</div>
);
};
export Standard-Todo;

Test mit Enzym

Wir brauchen, um die Pakete zu installieren, bevor wir mit den Tests beginnen. Zeit, um Feuer-up-terminal!

npm install –save-dev-Enzym Enzym-adapter-16

Innerhalb der src-Verzeichnis, erstellen Sie eine Datei namens setupTests.js. Dies ist, was wir verwenden, um zu konfigurieren, Enzym-adapter.

import-Enzym von “Enzym”;
import Adapter von “Enzym-adapter-reagieren-16”;
Enzym.konfigurieren({ adapter: new Adapter() });

Jetzt können wir mit dem schreiben beginnen unsere tests! Wir testen möchte vier Dinge:

  1. Dass die Komponente gerendert wird
  2. Dass die ersten to-dos angezeigt werden, wenn es rendert
  3. Wir erstellen eine neue Aufgabe, und wieder drei andere
  4. Das können wir löschen eines der ersten to-dos und haben nur eine to-do-Links

In deinem src-Verzeichnis, erstellen Sie einen Ordner namens __tests__ und erstellen Sie die Datei, wo Sie dann schreiben Sie Ihre Todo-Komponente tests in es. Nennen wir diese Datei Todo.test.js.

Mit, dass getan haben, können wir den import der Pakete, die wir brauchen, und erstellen Sie eine describe-block, wo werden wir füllen Sie in unsere tests.

importieren Reagieren “reagieren”;
import { flach, mount } von “Enzym”;
import Todo von “../Todo”;

beschreiben(“Todo”, () => {
// Tests gehen hier mit `es` blockiert
});
Test 1: Die Komponente gerendert wird

Für diese werden wir nutzen, flach machen. Flache rendering ermöglicht es uns, zu überprüfen, ob die render-Methode der Komponente aufgerufen wird — das ist es, was wir wollen, bestätigen Sie hier, weil das ist der Beweis, die wir brauchen, dass die Komponente gerendert wird.

es(“rendert”, () => {
flach(<Todo />);
});
Test 2: Erste to-dos angezeigt

Hier ist, wo wir nutzen die mount-Methode, die es uns erlaubt, tiefer zu gehen als das, was flache gibt uns. Auf diese Weise können wir überprüfen Sie die Länge der to-do-Elemente.

es(“zeigt erste to-dos”, () => {
const wrapper = mount(<Todo />);
erwarten(wrapper.find(“li”)).toHaveLength(2);
});
Test 3: Wir erstellen eine neue Aufgabe, und wieder drei andere

Lassen Sie uns nachdenken über den Prozess bei der Erstellung eines neuen to-do:

  1. Die Benutzer einen Wert in das Eingabefeld ein.
  2. Klickt der Benutzer auf den submit-button.
  3. Wir erhalten insgesamt drei Aufgaben, wo die Dritte ist die neu erstellte.

es ()”fügt ein neues Element”, () => {
const wrapper = mount(<Todo />);
wrapper.find(“input”).Beispiel().value = “Update fehlschlägt test”;
erwarten(wrapper.find(“input”).Beispiel().Wert).toEqual(“Update fehlschlägt test”);
wrapper.find(‘[type=”submit”]’).simulieren(“Klick”);
erwarten(wrapper.find(“li”)).toHaveLength(3);
erwarten(
wrapper
.find(“li div span”)
.last()
.text()
).toEqual(“Update fehlschlägt test”);
});

Wir montieren die Komponenten dann verwenden wir find() und instance () – Methoden, um den Wert des input-Feldes. Wir behaupten, dass der Wert des Eingabe-Feldes auf “Fix Versagen im test”, bevor weiter zu gehen, zu simulieren, ein click-Ereignis, sollte das hinzufügen der neuen Artikel auf der to-do-Liste.

Wir endlich behaupten, dass wir drei Punkte auf der Liste, und dass das Dritte Element ist gleich die, die wir erstellt haben.

Test 4: Wir löschen können, eines der ersten to-dos und haben nur eine to-do-Links
es(“entfernt ein Element”, () => {
const wrapper = mount(<Todo />);
wrapper
.find(“li-button”)
.ersten()
.simulieren(“Klick”);
erwarten(wrapper.find(“li”)).toHaveLength(1);
erwarten(wrapper.find(“li span”).Karte(item => item.text())).toEqual([
“Nehmen Sie den Papierkorb”
]);
});

In diesem Szenario sind wir wieder bei der to-do-mit einer simulierten click-Ereignis auf das erste Element. Es wird erwartet, dass dies ruft die removeTodo () – Methode, die gelöscht werden soll, das Element, auf das geklickt wurde. Dann sind wir die überprüfung der zahlen der Artikel, die wir haben, und der Wert des einen, wird zurückgegeben.

Der Quellcode für diese vier tests sind hier auf GitHub für Sie heraus zu überprüfen.

Tests Mit reagieren-testing-Bibliothek

Wir schreiben drei tests für diese:

  1. Die anfängliche zu-tun macht
  2. Wir können hinzufügen, ein neues
  3. Wir können löschen Sie eine Aufgabe

Beginnen wir mit der Installation der Pakete, die wir benötigen:

npm install –save-dev @testing-library/Scherz-dom @testing-library/reagieren

Als Nächstes können wir den import der Pakete und Dateien:

importieren Reagieren “reagieren”;
import { render, fireEvent } von “@Test-Bibliothek/reagieren”;
import Todo von “../Todo”;
import “@Test-Bibliothek/Scherz-dom/verlängern-rechnen”;

test(“Todo”, () => {
// Tests gehen hier
}
Test 1: Die erste zu-tun macht

Wir schreiben unsere tests in einer test-block. Der erste test wird so Aussehen:

es(“zeigt erste to-dos”, () => {
const { getByTestId } = render(<Todo />);
const todos = getByTestId(“todos”);
erwarten(todos.Kinder.Länge).toBe(2);
});

Was ist hier Los? Wir machen Gebrauch von getTestId die Rückkehr der Knoten der das element, wo die Daten-testid entspricht, die an die Methode übergeben. Das ist die <ul> – element in diesem Fall. Dann, wir prüfen es, dass es hat insgesamt zwei Kinder (jedes Kind wird ein <li> – element in der unsortierten Liste). Dieses vergehen wird als die erste zu tun ist, gleich zwei ist.

Test 2: können Wir hinzufügen eines neuen zu-tun

Wir sind auch die Nutzung der getTestById hier wieder den Knoten, entspricht dem argument, das wir sind, übergeben.

es ()”fügt ein neues to-do”, () => {
const { getByTestId, getByText } = render(<Todo />);
const Eingabe = getByTestId(“input”);
const todos = getByTestId(“todos”);
input.value = “Beheben fehlerhafte tests”;
fireEvent.klicken Sie auf(getByText(“Add Task”));
erwarten(todos.Kinder.Länge).toBe(3);
});

Wir verwenden getByTestId zurück das Eingabefeld und das ul-element, wie wir es vor. Simulieren Sie ein click-Ereignis, das fügt eine neue to-do-item verwenden wir fireEvent.klicken Sie auf() und übergeben die getByText () – Methode gibt den Knoten aus, dessen text entspricht dem argument, die wir übergeben. Von dort aus können wir dann überprüfen, um zu sehen, die Länge der to-dos, indem die überprüfung der Länge der Kinder-array.

Test 3: Wir löschen einer Aufgabe

Dies sieht ein wenig wie das, was wir habe ein wenig früher:

es(“löscht eine to-do”, () => {
const { getAllByTestId, getByTestId } = render(<Todo />);
const todos = getByTestId(“todos”);
const deleteButton = getAllByTestId(“delete-button”);
const erste = deleteButton[0];
fireEvent.klicken Sie auf(erste);
erwarten(todos.Kinder.Länge).toBe(1);
});

Wir machen Gebrauch von getAllByTestId die Rückkehr der Knoten der Schaltfläche “löschen”. Da wir nur wollen, löschen Sie ein Element, Schießen wir ein click-Ereignis auf das erste Element in der Sammlung, die gelöscht werden soll, den ersten zu tun. Dies sollte dann auch die Länge der todos Kinder gleich eins ist.

Diese tests sind auch auf GitHub.

Linting

Es gibt zwei lint-Regeln einzuhalten bei der Arbeit mit Haken:

Regel 1: Rufen Sie die Haken auf der obersten Ebene

…im Gegensatz zu inneren-Bedingungen, Schleifen, verschachtelte Funktionen.

// Tun Sie das nicht!
if (Math.random() > 0.5) {
const [ungültig, updateInvalid] = useState(false);
}

Dies geht gegen die erste Regel. Laut der offiziellen Dokumentation zu Reagieren, hängt von der Reihenfolge in der die hooks werden aufgerufen, um ordnen Zustand und die entsprechende useState nennen. Dieser code bricht die Reihenfolge wie die hook wird nur aufgerufen werden, wenn die Bedingungen erfüllt sind.

Dies gilt auch für useEffect und anderen Haken. Schauen Sie sich die Dokumentation für weitere details.

Regel 2: Nennen Haken aus funktionalen Komponenten Reagieren

Haken sind gedacht, um verwendet werden, Reagieren funktionalen Komponenten — nicht Reagieren ist Klasse, Komponente oder eine JavaScript-Funktion.

Wir haben im Grunde abgedeckt, was nicht zu tun, wenn es um linting. Wir können vermeiden Sie diese Fehltritte mit ein npm-Paket, das speziell erzwingt diese Regeln.

npm installieren eslint-plugin-reagieren-Haken –save-dev

Hier ist, was wir hinzufügen, um das Paket-Konfigurations-Datei zu machen, ist es seine Sache tun:

{
“plugins”: [
// …
“reagieren-Haken”
],
“Regeln”: {
// …
“reagieren-Haken/rules-of-hooks”: “Fehler”,
“reagieren-Haken/erschöpfend-deps”: “warnen”
}
}

Wenn Sie die Nutzung von Create App Reagieren, dann sollten Sie wissen, dass das Paket unterstützt die lint-plugin out of the box, wie der v3.0.0.

Gehen Sie weiter und schreiben solide Reagieren-code!

Reagieren die Haken sind ebenso fehleranfällig wie alles andere in der Anwendung und du wirst wollen, um sicherzustellen, dass Sie nutzen Sie auch. Wie wir gerade gesehen, es gibt ein paar Wege, die wir gehen können, über Sie. Ob Sie verwenden Enzym-oder können Sie entweder die Verwendung von Enzym-oder Reagieren Testing Library zum schreiben von tests ist völlig bis zu Ihnen. So oder so, probieren linting, wie Sie gehen, und kein Zweifel, Sie werden froh, Sie haben.