Eine vorläufige Studie zum Vue-Unit-Testing

Vorwort

Unter Unit-Tests versteht man die Überprüfung und Verifizierung der kleinsten testbaren Einheit in der Software. Was die Bedeutung von Units beim Unit-Testen betrifft, sollte die spezifische Bedeutung im Allgemeinen je nach tatsächlicher Situation bestimmt werden. Beispielsweise bezieht sich eine Unit in der Sprache C auf eine Funktion, in Java auf eine Klasse und in grafischer Software auf ein Fenster oder ein Menü. In Front-End-Frameworks wie Vue, React und Angular ist das Unit-Testen von Komponenten das Wichtigste.

Warum Unit-Tests einführen?

In der heutigen Zeit boomen verschiedene Programmiersprachen, Entwicklungsframeworks und Integrationstools, aber Softwareentwickler kämpfen immer noch an vorderster Front und sind überfordert mit Fehlern, Legacy-Code, technischen Schulden und Refactoring. Wenn Ihr Projekt groß genug ist, ist es sehr wahrscheinlich, dass beim Stapeln von Modulen und Komponenten die vorherigen Module beeinträchtigt werden. Die betroffenen Module haben den Test jedoch bestanden, und bei unserer Iteration werden nur wenige Tester das System erneut testen. Daher weist das betroffene Modul bei der Online-Bereitstellung wahrscheinlich einen unsichtbaren Fehler auf. Aus diesem Grund verwenden wir automatisierte Tests. Die wichtigste Rolle besteht darin, den korrekten Betrieb des gesamten Systems und die Robustheit des Systems in jeder Iteration für große Projekte sicherzustellen. Die folgenden Punkte sind zusammengefasst:

• Automatisiertes Testen spart Zeit
• Reduzieren Sie Fehler auf niedriger Ebene
• Bietet Dokumentation, die das Komponentenverhalten beschreibt
• Kann beim Schreiben von Unit-Tests den Code verbessern
• Erleichtert das Lesen von Komponenten und fördert das Refactoring
• Beweisen Sie, dass Ihre Arbeit erledigt ist
• Gut für Codeüberprüfung
• Code-Leistung
• Geben Sie einige Kennzahlen an
  

Übersicht zu Unit-Tests

Unit-Tests werden normalerweise für den kleinsten Teil einer Anwendung durchgeführt. In Vue sind Komponenten die zu testenden Einheiten (siehe später).

Beginnen wir zunächst mit einem einfachen Unit-Test. Im Code verwenden wir die Sum-Funktion, um die Summe zweier Zahlen zu berechnen.

Unit-Tests sind Funktionen, die eine Funktion einzeln im Quellcode aufrufen und sicherstellen, dass sie sich korrekt verhält. Sehen Sie sich das folgende Beispiel an. Dabei handelt es sich um ein relativ einfaches Programm, das eine Summenfunktion exportiert und dann die Funktion ausführt. Dabei wird sichergestellt, dass ein Fehler ausgegeben wird, wenn sie nicht zurückkehrt.

// Summe.js
exportiere Standardfunktion Summe(a,b){
    gib a + b zurück
}
// Summe.spec.js
importiere Summe aus './sum.js'
Funktion testSumme(){
    wenn(Summe(1,2)!==3){
        wirf einen neuen Fehler ('Summe(1,2) gibt nicht 3 zurück')
    }
}
testSumme()

Da Unit-Tests an isolierten Einheiten durchgeführt werden, können Codeprobleme beim Schreiben guter Unit-Tests präzise aufgedeckt werden.

Darüber hinaus können wir beim Testen auf Snapshot-Tests achten. Snapshot-Tests ähneln der Differenzerkennung. Beim Snapshot-Test wird das laufende Programm mit Screenshots verglichen. Wenn es einen Unterschied gibt, wird ein Fehler angezeigt. Beim Vue-Test bietet vueTestUtil ähnliche Funktionen, mit denen serialisierbare Werte in js und Dom-Ausgaben in Komponenten verglichen werden können.

Testentwicklungsmuster

Wenn Sie sich für Testentwicklung interessieren, haben Sie vielleicht schon von Test Driven Development (TDD) und Behavior Driven Development (BDD) gehört.

1. Testgetriebene Entwicklung (TDD)

Testgetriebene Entwicklung, kurz TDD, ist eine neue Entwicklungsmethode, die sich vom traditionellen Softwareentwicklungsprozess unterscheidet. Dabei muss vor dem Schreiben von Code für eine bestimmte Funktion Testcode geschrieben werden, und anschließend muss nur noch funktionaler Code geschrieben werden, der den Test besteht. Der gesamte Entwicklungsprozess wird dabei durch Tests gesteuert. Dies hilft beim Schreiben von prägnantem, nutzbarem und qualitativ hochwertigem Code und beschleunigt den Entwicklungsprozess

Bevor Entwickler die Geschäftslogik schreiben, sollten sie zunächst einige Testfälle schreiben. Wenn Sie diese Testfälle ausführen, erhalten Sie ein fehlgeschlagenes Ergebnis, da wir die zu testende Geschäftslogik überhaupt nicht implementiert haben. Implementieren Sie diese Geschäftslogiken und führen Sie die Testfälle aus, um die Erfolgsquote zu überprüfen. Wenn Sie ein guter Entwickler sind, können diese Fälle möglicherweise durch Korrektur der Testfälle oder Refactoring behoben werden.

Wenn wir neue Funktionen entwickeln, wiederholen wir immer noch die oben genannten Schritte. Der Kern besteht darin, die Testfälle voranzustellen. Das Flussdiagramm sieht wie folgt aus:

Beispiel: Lassen Sie uns TDD anhand eines konkreten Beispiels beschreiben. Angenommen, unsere aktuelle Anforderung besteht darin, eine Fakultätsfunktion zu implementieren. Wir verwenden Jest, um diesen Testfall zu implementieren.

var fac = erfordern("../src/index.js");

test("Geben Sie eine negative Zahl ein, sollte NaN zurückgeben ", () => {
  erwarte(fac(-1)).soll(NaN);
});

test("Geben Sie 0 ein, sollte 1 zurückgeben ", () => {
  erwarten(fac(0)).toBe(1);
});

test("Eingabe 1, sollte 1 zurückgeben ", () => {
  erwarten(fac(1)).toBe(1);
});

test("Geben Sie 2 ein, es sollte 2 zurückgeben", () => {
  erwarten(fac(2)).toBe(2);
});

test("Geben Sie 3 ein, es sollte 6 zurückgeben", () => {
  erwarten(fac(3)).toBe(6);
});

Das Ausführen dieses Testfalls wird definitiv fehlschlagen, da wir die fac-Funktion noch nicht implementiert haben. Als Nächstes implementieren wir die Fakultätsfunktion.

modul.exporte = Funktion fac(n) {
  wenn (n < 0), gib NaN zurück;
  wenn (n === 0) gib 1 zurück;
  gibt n * fac(n - 1) zurück;
};

Nun führen wir diesen Testfall erneut aus und erhalten die folgenden Ergebnisse:

Wie Sie sehen, sind alle Fälle bestanden. Dies ist der TDD-Entwicklungsmodus.

2. Verhaltensgesteuerte Entwicklung (BDD)

Bei der traditionellen Softwareentwicklung erhalten Geschäftsmitarbeiter Anforderungen und übergeben sie an Anforderungsanalysten, die Anforderungsspezifikationen oder Designs schreiben. Softwareentwickler führen dann auf der Grundlage der Anforderungsspezifikationen Architekturdesign und Codeentwicklung durch. Tester schreiben dann auf der Grundlage der Anforderungsspezifikationen Testfälle zum Testen. Von der Anforderungsgenerierung bis zur Testlieferung sind mehrere verschiedene Rollen involviert, und während dieser Zeit können leicht Informationsverluste und Missverständnisse auftreten. Solange in einem Link ein Fehler vorliegt, wird es für das F&E-Team schwierig sein, ein qualifiziertes Produkt zu liefern.

BDD ist eine agile Softwareentwicklungstechnik, die die Zusammenarbeit zwischen Entwicklern, Qualitätssicherung und nicht-technischen oder geschäftlichen Teilnehmern an der Software fördert und sich besonders für agile Projekte eignet.

Ich möchte es anhand eines Beispiels beschreiben:

var fac = erfordern("../src/index.js");

describe("Überprüfen Sie die Fakultätsfunktion fac:", function () {
  it("Geben Sie eine negative Zahl ein, sollte NaN zurückgeben ", () => {
    erwarte(fac(-1)).soll(NaN);
  });

  it("Geben Sie 0 ein, sollte 1 zurückgeben ", () => {
    erwarten(fac(0)).toBe(1);
  });

  it("Eingabe 1, sollte 1 zurückgeben ", () => {
    erwarten(fac(1)).toBe(1);
  });

  it("Eingabe 2, sollte 2 zurückgeben", () => {
    erwarten(fac(2)).toBe(2);
  });

  it("Eingabe 3, sollte 6 zurückgeben", () => {
    erwarten(fac(3)).toBe(6);
  });
});

Führen Sie den Testfall aus und erhalten Sie das Ergebnis:

Beim Vergleich des Codeinhalts mit den Testergebnissen stellten wir fest, dass der Unterschied nicht so groß ist. Der Hauptunterschied liegt in der Formulierung. Der BDD-Testfall sieht aus wie das Lesen eines Dokuments. Die Struktur ist sehr klar. Sie spielt eine wichtige Rolle bei der Teamzusammenarbeit, beim Lesen des Codes und bei der Förderung des Refactorings. Wenn Sie den Testfall flüssig lesen können, können Sie natürlich besseren Code schreiben.

Die hier aufgeführten Beispiele sollen lediglich den Unterschied zur testgesteuerten Entwicklung beschreiben und stellen keine echte verhaltensgesteuerte Entwicklung dar. Verhaltensgesteuerte Entwicklung ähnelt eher einer konzeptionellen Theorie.

Zusammenfassung: BDD konzentriert sich mehr auf Funktionalität als nur auf Ergebnisse. Um ein berühmtes Sprichwort aus der Branche zu zitieren: BDD hilft Entwicklern beim Entwerfen von Software und TDD hilft Entwicklern beim Testen von Software.

Unit-Tests in Vue

Mithilfe von Unit-Tests können Sie unabhängige Codeeinheiten isoliert testen, um den Entwicklern Vertrauen in ihren Code zu vermitteln. Durch das Schreiben detaillierter und aussagekräftiger Tests können Sie sicher sein, dass Ihre Anwendung funktionsfähig und stabil bleibt, während Sie neue Funktionen erstellen oder vorhandenen Code umgestalten. Das Unit-Testen einer Vue-Anwendung unterscheidet sich nicht wesentlich vom Unit-Testen anderer Anwendungstypen.

Frameworkauswahl

Wenn Sie ein Vue-Entwickler sind, sollten Sie mit dem Schreiben von Vorlagen in Vue-Komponenten sehr vertraut sein. Die Vorlagensyntax von Vorlage, Stil und Skript ist direkter und natürlicher als die Jsx-Syntax in React. Es ist sehr sinnvoll, Komponenten als kleinste Testeinheit in Vue zu verwenden.

Obwohl Unit-Tests normalerweise nicht direkt mit dem Framework in Zusammenhang stehen, müssen Sie sie anhand des Funktionsumfangs, der Leistung und Unterstützung für vorkompilierte Einzeldateikomponenten, des durch Unit-Tests generierten Werts und der Benutzerfreundlichkeit des Entwicklungsprozesses bewerten.

Erstklassiges Fehlerreporting

Die Bereitstellung nützlicher Fehlermeldungen bei fehlgeschlagenen Tests ist für ein Unit-Test-Framework von entscheidender Bedeutung. Dies ist die Aufgabe einer Assertion-Bibliothek. Eine Behauptung mit qualitativ hochwertigen Fehlermeldungen kann den zum Debuggen des Problems erforderlichen Zeitaufwand minimieren. Eine Assertionsbibliothek sollte Ihnen nicht nur mitteilen, welcher Test fehlgeschlagen ist, sondern auch weiteren Kontext und die Gründe für das Fehlschlagen des Tests liefern, z. B. das erwartete Ergebnis im Vergleich zum tatsächlich erzielten Ergebnis. Einige Unit-Test-Frameworks wie Jest enthalten Assertion-Bibliotheken. Bei anderen, beispielsweise Mocha, müssen Sie eine separate Assertion-Bibliothek (normalerweise Chai) installieren.

Aktive Community und Team

Da die wichtigsten Unit-Test-Frameworks Open Source sind, ist eine aktive Community für Teams von entscheidender Bedeutung, die ihre Tests langfristig pflegen und sicherstellen möchten, dass das Projekt selbst aktiv bleibt. Der zusätzliche Bonus besteht darin, dass Ihnen eine aktive Community zusätzliche Unterstützung bietet, wenn Sie auf Probleme stoßen.

Hier erwägen wir die Verwendung des Jest-Frameworks, einem auf Einfachheit ausgerichteten JavaScript-Test-Framework. Eine einzigartige Funktion ist die Möglichkeit, Snapshots zu Testzwecken zu generieren, was eine weitere Möglichkeit zur Überprüfung von Anwendungseinheiten bietet.

Jest ist der Testrunner mit den meisten Funktionen. Es erfordert nur eine minimale Konfiguration, hat JSDOM standardmäßig installiert, verfügt über integrierte Behauptungen und bietet eine sehr gute Befehlszeilen-Benutzererfahrung.

Scherzinformationen

Offizielle Jest-Website

Offizielles Vue CLI-Plugin – Jest

Vue stellt offiziell eine sehr praktische Testtool-Bibliothek bereit: Vue Test Utils. Als Nächstes erklären wir, wie Sie mit Vue Test Utils Unit-Tests an Vue-Komponenten durchführen.

Vue Test Utilities

Es bietet eine umfangreiche API mit leistungsstarken Funktionen wie dem Rendern von Komponenteninstanzen, Selektoren, der Simulation des Einfügens globaler Komponenten, der Simulation von Zuständen, Datenflüssen, Lebenszyklen, Ereignissen und sogar der Simulation des Routings. Probieren wir es aus.

Installieren:

Die Installation von Vue Test Utils ist nicht schwierig. Wir wählen zuerst einen Test-Runner aus. Wir können zwischen Jest und Mocha wählen. Hier wählen wir Jest.

Wenn Sie Vue-cli noch nicht zum Erstellen eines Projekts verwendet haben, können Sie beim Erstellen eines Projekts mit Vue-cli Jest auswählen. Das Framework installiert automatisch Vue Test Utils und führt Folgendes aus:

 vue erstellen vue-test

Wenn Sie bereits ein über Vue-cli erstelltes Projekt haben, können Sie Folgendes ausführen:

    vue fügt @vue/unit-jest hinzu

Jest konfigurieren: Die Jest-Konfiguration kann in jest.config.js oder jest.config.json im Stammverzeichnis abgelegt werden

modul.exporte = {
  Vorgabe: "@vue/cli-plugin-unit-jest", // Einzelnes Test-Plug-in-ModulDateierweiterungen: ["js", "json", "vue", "less", "css"], // Suffixtransformation: { // Modulanalyse "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
  },
  moduleNameMapper: { // Alias-Kennung "^@/(.*)$": "<rootDir>/src/$1",
    "\\.(css|less)$": "<rootDir>/tests/mocks/styleMock.js",
  },
  // Für die Analyse von Snapshots ist die Installation von jest-serializer-vue erforderlich
  snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
  collectCoverage: wahr,
  // Coverage-Verzeichnis coverageDirectory: "report/coverage",
  // Konfiguration eines einzelnen Testberichts, Sie müssen jest-html-reporter installieren
  Reporter:
    "Standard",
    [
      "./node_modules/jest-html-reporter",
      {
        Logo: „https://rdc-test.mingyuanyun.com/static/img/rdc.png“,
        pageTitle: "Einzelner Testbericht (Workbench)",
        Ausgabepfad: "report/unit-test/index.html",
        includeFailureMsg: wahr,
      },
    ],
  ],
};

Module, die installiert werden müssen:

• jest-serializer-vue (Serialisierungstool)
• jest-html-reporter (einzelnes Testbericht-Tool, Sie können auch andere Tools auswählen)
  

Nachdem die Konfiguration abgeschlossen ist, können wir den Unit-Test problemlos ausführen.

Wie unten gezeigt, handelt es sich hierbei um eine sehr einfache Komponente, die die Zahl beim Klicken erhöht:

// Inkrement.js
<Vorlage>
  <div>
    <p>Die Zahl ist {{ count }}</p>
    <button @click="increment">erhöhen</button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Anzahl: 0,
    };
  },
  Methoden: {
    inkrementieren() {
      dies.zählen++;
    },
  },
};
</Skript>

<style scoped lang="weniger">
P {
  Schriftgröße: 2em;
  Textausrichtung: zentriert;
}
</Stil>

Vue Test Utils bietet Methoden zum Implementieren von Wrappern, Mounts und ShallowMounts. Nachdem wir den Wrapper erhalten haben, können wir die vielen in seiner Instanz gekapselten Schnittstellen verwenden.

// inkrementieren.spec.js
// Test-Toolsetimport {mount} aus "@vue/test-utils" importieren;
importiere Increment aus "@/views/Increment";

beschreiben("Inkrement", () => {
  // Komponente mounten und Wrapper abrufen const wrapper = mount(Increment);
  const vm = Wrapper.vm;
  it("Render-Markup", () => {
    expect(wrapper.html()).toContain("<p>Zahl ist 0</p>");
  });

  // Simulieren Sie einen Benutzer, der darauf klickt("Button-Klick sollte den Zähler erhöhen", () => {
    erwarte(vm.Anzahl).toBe(0);
    const button = wrapper.find("Schaltfläche");
    button.trigger("klicken");
    erwarte(vm.count).toBe(1);
  });

  // Klicken Sie hier, um DOM anzuzeigen
  it("Klick auf die Schaltfläche sollte den Zähler erhöhen und das DOM aktualisieren", async () => {
    erwarten(wrapper.text()).toContain("1");
    const button = wrapper.find("Schaltfläche");
    warte auf button.trigger("Klick");
    erwarten(wrapper.text()).toContain("2");
  });
});

Nachdem wir den Unit-Test geschrieben haben, führen wir ihn aus:

npm führt Test aus: Einheit

Nachdem der Lauf abgeschlossen ist, können Sie den Unit-Testbericht report/unit-test/index.html im Stammverzeichnis unseres Projekts anzeigen. Öffnen Sie ihn im Browser und Sie können ihn anzeigen.

Öffnen Sie coverage/lcov-report/index.html, um die Berichterstattung anzuzeigen

OK, jetzt haben wir einen einfachen Unit-Testfall abgeschlossen. Wir haben Mounts, Wrapper, Selektoren, Ereignisauslöser usw. verwendet. Es gibt noch viele weitere APIs, die in der offiziellen Dokumentation eingesehen werden können.

dokumentieren

Offizielle Dokumentation zu Vue Test Utils

Das Obige ist der detaillierte Inhalt der ersten Erkundung des Vue-Unit-Tests. Weitere Informationen zum Vue-Unit-Test finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!