Mit Cypress zu Schreiben Tests für eine Anwendung Reagieren

0
34

End-to-End tests geschrieben werden, die zur Geltendmachung der Fluss einer Anwendung von Anfang bis Ende. Statt den Umgang mit den tests selbst — wissen Sie, manuell durch klicken auf alle über der Anwendung — Sie können einen test schreiben, der ausgeführt wird, wie Sie die Anwendung erstellen. Das nennen wir kontinuierliche integration und es ist eine schöne Sache. Code schreiben, speichern Sie es und lassen Sie tooling tun die schmutzige Arbeit zu machen sicher, dass es nicht etwas zu brechen.

>Cypress ist nur eine end-to-end-Test-framework, das alle, die einen Klick für uns arbeiten, und das ist, was wir jetzt betrachten werden, in diesem post. Es ist wirklich für jede moderne JavaScript-Bibliothek, aber wir integrieren Sie Reagieren in den Beispielen.

Lassen Sie uns eine app zu testen

In diesem tutorial, wir schreiben tests, um zu decken eine todo-Anwendung, die ich aufgebaut habe. Sie können Klon des repository zu Folgen, wie wir Sie stecken Sie es in Cypress.

git clone [email protected]:kinsomicrote/cypress-reagieren-tutorial.git

Navigieren in der Anwendung, und installieren Sie die Abhängigkeiten:

cd cypress-reagieren-tutorial
Garn installieren

Cypress ist nicht Teil der Abhängigkeiten, aber Sie können es installieren, indem Sie dies ausführen:

Garn hinzufügen cypress –dev

Nun, diesen Befehl ausführen zu öffnen Cypress:

node_modules/.bin/cypress öffnen

Die Eingabe dieser Befehl an das terminal über und über bekommen kann anstrengend sein, aber Sie können fügen Sie dieses Skript in das Paket.json-Datei im Projekt root:

“cypress”: “cypress öffnen”

Nun, alles, was Sie tun müssen, ist tun npm führen cypress einmal und Zypressen stehen zu allen Zeiten. Um ein Gefühl von dem, was die Anwendung werden wir die Prüfung aussieht, können Sie beginnen, Reagieren die Anwendung durch ausführen von Garn beginnen.

Wir werden beginnen, indem Sie einen test, um zu bestätigen, dass Cypress arbeitet. In der cypress/integration Ordner, erstellen Sie eine neue Datei namens init.spec.js. Der test behauptet, dass true gleich true ist. Wir brauchen nur darauf, um zu bestätigen, dass die Arbeit, um sicherzustellen, dass Cypress ist und läuft für die gesamte Anwendung.

beschreiben(‘Cypress’, () => {
es(‘funktioniert’, () => {
erwarten(true).zu.gleich(true)
})
})

Sie sollten eine Liste von tests zu öffnen. Gehen Sie dorthin und wählen init.spec.js.

Das sollte durch den test zu führen und ein pop-up-Bildschirm, zeigt der test vorbei.

Während wir noch in init.spec.js fügen wir einen test, um zu behaupten, dass wir besuchen können Sie die app durch drücken http://localhost:3000 in den browser. Dieses werde sicherstellen, dass die app selbst läuft.

es (“Besuche den app’, () => {
cy.besuchen Sie(‘http://localhost:3000’)
})

Wir rufen Sie die Methode visit() und leiten Sie die URL der app. Wir haben Zugriff auf ein globales Objekt namens cy für den Aufruf von Methoden zur Verfügung, um uns auf Cypress.

Zu vermeiden, schreiben Sie die URL immer wieder, können wir eine Basis-URL, die verwendet werden können, während die tests, die wir schreiben. Öffnen Sie die Zypresse.json-Datei im home-Verzeichnis der Anwendung und fügen Sie die URL definieren, die es gibt:

{
“baseUrl”: “http://localhost:3000”
}

Sie können ändern Sie die test-block wie folgt Aussehen:

es (“Besuche den app’, () => {
cy.besuchen Sie(‘/’)
})

…und sollte der test weiterhin passieren. 🤞

Test-Formular-Steuerelemente und-Eingänge

Der test, den wir schreiben werden, wird behandelt, wie Benutzer interagieren mit der todo-Anwendung. Zum Beispiel, wir wollen sicherstellen, dass die Eingabe in den Fokus, wenn die app lädt, damit die Benutzer mit der Eingabe Aufgaben sofort. Wir wollen auch sicherstellen, dass es eine Standard-Aufgabe, in der es, so dass die Liste nicht leer ist, standardmäßig. Wenn es keine Aufgaben, wir wollen zeigen text, der dem Benutzer sagt, wie viel.

Um loszulegen, gehen Sie vor und erstellen Sie eine neue Datei in den Ordner für die integration genannt form.spec.js. Der name der Datei ist nicht so wichtig. Wir sind voranstellen von “form”, weil das, was wir testen wollen ist letztlich eine form Eingang. Sie können es nennen wollen etwas anderes, je nachdem, wie Sie planen, organisieren tests.

Wir werden hinzufügen einen describe-block der Datei:

beschreiben(‘Form’ () = > {
beforeEach(() => {
cy.besuchen Sie(‘/’)
})

es (“es konzentriert sich die input’, () => {
cy.fokussiert().sollte(‘have.class’, ‘form-control’)
})
})

Die beforeEach-block wird verwendet, um zu vermeiden, unnötige Wiederholung. Für jeden block testen, die wir brauchen, um besuchen Sie die Anwendung. Es wäre überflüssig zu wiederholen, dass die Linie jedes mal beforeEach sorgt Cypress Besuche die Anwendung in jedem Fall.

Für den test, lassen Sie uns überprüfen Sie, dass das DOM-element in den Fokus, wenn die Anwendung zum ersten mal geladen wird, hat eine Klasse der form-control. Wenn Sie überprüfen die Quell-Datei, Sie werden sehen, dass die input-element hat eine Klasse namens form-Steuerelement festgelegt, und wir müssen Autofokus als einer der element-Attribute:

<input
type=”text”
Autofokus
Wert={das.Zustand.ein Element,}
onChange={das.handleInputChange}
Platzhalter=”Geben Sie eine Aufgabe”
className=”form-control”
/>

Wenn Sie speichern, gehen Sie zurück zum test-Bildschirm, und wählen Sie form.spec.js um den test auszuführen.

Die nächste Sache, die wir tun werden, ist zu testen, ob ein Benutzer erfolgreich geben Sie einen Wert in das Eingabefeld ein.

es(‘Eingaben akzeptiert’, () => {
const Eingabe = “Erfahren Sie mehr über Cypress”
cy.get(‘.form-control’)
.Typ(Eingabe)
.sollte(‘haben.Wert’, Eingabe)
})

Wir haben Hinzugefügt, text (“Lernen über Zypresse”) auf den Eingang. Dann machen wir Gebrauch von cy.bekommen, erhalten Sie das DOM-element mit der form-control Klasse name. Wir könnten auch etwas tun, wie cy.get(‘input’) und das gleiche Ergebnis erhalten. Nach Erhalt das element, cy.type() wird verwendet, um geben Sie den Wert, den wir zugewiesen input, dann können wir behaupten, dass das DOM-element mit der Klasse form-control hat einen Wert, der mit dem Wert von Eingang.

In anderen Worten:

Unsere Anwendung sollten außerdem zwei Aufgaben, die erstellt wurden, standardmäßig aktiviert, wenn die app läuft. Es ist wichtig, wir haben einen test, der überprüft, dass Sie tatsächlich aufgeführt.

Was wollen wir? In unserem code, wir nutzen das Listenelement (<li>) – element für die Anzeige von Aufgaben als Elemente in einer Liste. Da haben wir zwei Elemente, die standardmäßig in der Liste aufgeführt, bedeutet dies, dass die Liste sollte eine Länge von zwei am start. So, der test wird so Aussehen:

es(‘zeigt eine Liste der todo’, () => {
cy.get(‘li’)
.sollte(‘haben.Länge’, 2)
})

Oh! Und was wäre diese app, wenn ein Benutzer nicht in der Lage war, eine neue Aufgabe hinzufügen, um der Liste? Das sollten wir besser testen als gut.

es(‘fügt eine neue todo’, () => {
const Eingabe = “Erfahren Sie mehr über cypress”
cy.get(‘.form-control’)
.Typ(Eingabe)
.Typ(‘{enter}’)
.get(‘li’)
.sollte(‘haben.Länge’, 3)
})

Das sieht ähnlich zu dem, was wir schrieben in den letzten beiden tests. Wir erhalten die Eingangs-und simulieren, geben Sie einen Wert in es. Dann simulieren wir das Einreichen einer Aufgabe, sollte aktualisieren Sie die Status der Anwendung, wodurch sich die Länge von 2 bis 3. Also, wirklich, wir bauen aus, was wir bereits haben!

Ändern Sie den Wert von drei auf zwei wird durch den test zu scheitern — das ist, was wir erwarten, denn die Liste soll zwei Aufgaben standardmäßig und Absenden einmal erzeugen soll, insgesamt drei.

Sie werden sich vielleicht Fragen, was passieren würde, wenn der Benutzer löscht einen (oder beide) der Standard-Aufgaben, bevor Sie versuchen zu Unterwerfen, eine neue Aufgabe. Nun, wir könnten einen test schreiben für die, die als gut, aber wir sind nicht so, dass die Annahme, in diesem Beispiel, da wir nur bestätigen wollen, dass Aufgaben eingereicht werden können. Dies ist eine einfache Möglichkeit für uns zu testen, die basic-Abgabe-Funktionalität, wie wir uns entwickeln und wir können das Konto für fortgeschrittene/edge Fällen später.

Die Letzte Funktion, die wir testen müssen, ist das löschen von Aufgaben. Wir wollen zuerst löschen Sie eines der Standard-task-Elemente und dann sehen, ob es eine Verbleibende, sobald die Löschung passiert. Es ist die gleiche Art von Geschäft, wie vor, aber wir sollten erwarten, dass eine Position nach Links in der Liste statt der drei, die wir erwartet, dass beim hinzufügen einer neuen task in der Liste.

es(‘löscht eine todo’, () => {
cy.get(‘li’)
.ersten()
.find(‘.btn-danger’)
.klicken Sie auf()
.get(‘li’)
.sollte(‘haben.Länge’, 1)
})

OK, also was passiert, wenn wir das löschen der Standard-tasks in der Liste und die Liste ist komplett leer? Nehmen wir an, Sie möchten die Anzeige dieses Textes, wenn keine Elemente mehr in der Liste: “Alle Ihre Aufgaben abgeschlossen sind. Gut gemacht!”

Dies ist nicht allzu Verschieden von dem, was wir vorher gemacht haben. Sie können es ausprobieren, erst dann kommen Sie zurück, um zu sehen, den code für Sie.

es.nur(‘löscht alle todo’, () => {
cy.get(‘li’)
.ersten()
.find(‘.btn-danger’)
.klicken Sie auf()
.get(‘li’)
.ersten()
.find(‘.btn-danger’)
.klicken Sie auf()
.get(‘.Nein-Aufgabe’)
.sollte(‘haben.text’, ‘Alle Ihre Aufgaben abgeschlossen sind. Gut gemacht!’)
})

Beide tests ähnlich sehen: wir Holen das Listenelement element, Ziel des ersten und nutzen Sie von cy.find() zum suchen für das DOM-element mit einem btn-danger class name (die wiederum ist eine völlig willkürliche Klasse Namen für die Schaltfläche löschen in diesem Beispiel-app). Wir simulieren ein click-event auf das element zum löschen der Aufgabe.

Ich bin der überprüfung für die “Keine Aufgabe!” in diesem bestimmten test.

Prüfung Netzwerk Anfragen

Netzwerk-Anfragen sind irgendwie eine große Sache, denn das ist oft die Quelle der Daten in einer Anwendung verwendet werden. Sagen wir, wir haben eine Komponente in unsere app, macht eine Anfrage an den server, um Daten zu erhalten, die angezeigt wird, um Benutzer. Lassen Sie uns sagen, die Komponente markup sieht wie folgt aus:

Klasse App erweitert Reagieren.Komponente {
state = {
isLoading: true,
Benutzer: [],
Fehler: null
};
fetchUsers() {
fetch(`https://jsonplaceholder.typicode.com/users`)
.dann(response => Antwort.json())
.dann(Daten =>
diese.setState({
Benutzer: Daten,
isLoading: false,
})
)
.catch(error => diese.setState({ error, isLoading: false }));
}
componentDidMount() {
diese.fetchUsers();
}
render() {
const { isLoading, Benutzer, Fehler } = diese.Zustand;
return (
<Reagieren.Fragment>
<h1>Random User</h1>
{Fehler ? <p>{error.message}</p> : null}
{!isLoading ? (
Benutzer.anzeigen(user => {
const { username, name, E-Mail } = Benutzer;
return (
<div key={Benutzername}>
<p>Name: {name}</p>
<p>E-Mail-Adresse: {email}</p>
<hr />
</div>
);
})
) : (
<h3>Loading…</h3>
)}
</Reagieren.Fragment>
);
}
}

Hier nutzen wir die JSON-Platzhalter-API als Beispiel. Wir haben einen test wie diesen zu testen, die Antwort bekommen wir von dem server:

beschreiben(‘Request’, () => {
es(‘zeigt eine zufällige Benutzer-API’, () => {
cy.request(‘https://jsonplaceholder.typicode.com/users’)
.sollte((Reaktion) => {
erwarten(response.status).zu.eq(200)
erwarten(response.Körper).zu.haben.Länge(10)
erwarten(Antwort).zu.haben.Eigenschaft(‘Header’)
erwarten(Antwort).zu.haben.Eigenschaft(‘duration’)
})
})
})

Der nutzen der Tests, die der server (im Gegensatz zu stubbing es) ist, dass wir sicher sind, die Antwort, die wir bekommen, ist die gleiche wie die, die ein Benutzer erhalten. Erfahren Sie mehr über Netzwerk-Anforderungen und wie können Sie die stub-Netzwerk-Anfragen, finden Sie auf dieser Seite in der Cypress-Dokumentation.

Ausführen der tests von der Kommandozeile

Cypress tests ausführen können, aus dem terminal, ohne die mitgelieferte UI:

./node_modules/.bin/cypress run

…oder

npx cypress run

Wir führen die form-tests haben wir geschrieben:

npx cypress run –record –spec “cypress/integration/form.spec.js”

Terminal sollte die Ausgabe der Ergebnisse direkt dort mit einer Zusammenfassung von dem, was getestet wurde.

Es gibt eine Menge mehr über die Verwendung von Cypress mit der Befehlszeile in der Dokumentation.

Das ist ein wrap!

Prüfungen sind etwas, das entweder sich die Menschen aufgeregt oder ängstlich, je nachdem, wer Sie sprechen. Hoffentlich, was wir angeschaut haben in diesem Beitrag bekommt jeder aufgeregt über die Implementierung von tests in einer Anwendung und zeigt, wie relativ einfach es sein kann. Cypress ist ein hervorragendes Werkzeug, und ich habe festgestellt, mich erreichen in meiner eigenen Arbeit, aber es gibt andere als gut. Unabhängig davon, welches tool Sie verwenden (und wie Sie sich fühlen über tests), hoffentlich sehen Sie die Vorteile des Tests und mehr gezwungen, um Sie auszuprobieren.

Verwandte Ressourcen

  • Cypress: Schreiben Sie Ihren Ersten Test
  • GitHub: Cypress-repository
  • CSS-Tricks: Erste Schritte mit Reagieren Test-Bibliothek
  • CSS-Tricks: Schreiben von Tests für Anwendungen Reagieren Mit Scherz-und Enzym –
  • CSS-Tricks: – Tests für Visual Regressionen mit Percy