So testen Sie die Reaktionskomponenten mithilfe von Scherz

Dieser Artikel untersucht mithilfe von Scherz, einem von Facebook gepflegten Test-Framework, um Reaktionskomponenten und einfache JavaScript-Funktionen zu testen. Wir beginnen mit einfachen JavaScript-Funktionen, bevor wir uns zu reagspezifischen Funktionen bewegen. Scherz ist nicht ausschließlich für React; Es ist vielseitig genug für jede JavaScript -Anwendung. Seine Merkmale sind jedoch besonders nützlich für UI -Tests, was es ideal für Reaktionen macht.

Schlüsselpunkte:

• Verwenden Sie den Scherz, um React -Komponenten und JavaScript -Funktionen zu testen.
• Beginnen Sie mit einfachen JavaScript -Funktionen, um die Grundlagen von Scherz zu lernen.
• Scherz und Babel für die Reaktionskompatibilität installieren.
• Verwenden Sie den Beobachtungsmodus von Scherz, um einen effizienten Test erneut zu testen.
• Für React -Komponenten betrachten Sie die Enzym- oder React -Testbibliothek.
• Verwenden Sie Scherz, Spione und parallele Tests.

Eine Beispiel für Todo -Anwendung:

Eine kleine Todo -Anwendung (verfügbar auf GitHub und als Live -Demo) dient als unser Testperson. Es wurde mit ES2015, Webpack und Babel erstellt. Die Kernlogik befindet sich in app/state-functions.js und enthält reine Funktionen (toggleDone, addTodo, deleteTodo), die den Anwendungszustand verwalten. Diese Funktionen sind analog zu Redux -Reduzierern.

testgetriebene Entwicklung (TDD):

Während TDD (Schreiben von Tests vor Code) Vorteile hat, ist der Ansatz häufig eine Frage der persönlichen Präferenz. Für React -Komponenten ist das Schreiben von Komponenten zuerst und dann das Hinzufügen von Tests häufig praktisch.

Einführung von Scherz:

scherzhaft von Facebook verbessert und bietet im Vergleich zu anderen Frameworks ein optimiertes Setup. Sein paralleler Test- und Uhrenmodus verbessert die Testgeschwindigkeit und -effizienz erheblich. Es enthält JSDOM für Browser-ähnliche Tests innerhalb von Node.js und unterstützt asynchrone Tests, Spott, Spione und Stub.

Installation und Konfiguration:

Installieren Sie die erforderlichen Pakete:

<code class="language-bash">npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react</code>

Stellen Sie sicher, dass eine babel.config.js -Datei vorhanden ist (Beispiel im Originalartikel). Der Scherz erwartet Tests in einem __tests__ Verzeichnis (oder Dateien, die in .test.js oder .spec.js) enden.

Testen der Geschäftslogik:

Ein einfacher Test für toggleDone zeigt die Verwendung von Scherzen:

<code class="language-javascript">import { toggleDone } from '../app/state-functions';

test('toggleDone completes an incomplete todo', () => {
  const startState = [{ id: 1, done: false, text: 'Buy Milk' }];
  const finState = toggleDone(startState, 1);
  expect(finState).toEqual([{ id: 1, done: true, text: 'Buy Milk' }]);
});</code>

toEqual wird für den Objekt/Array -Vergleich verwendet, während toBe für primitive Typen gilt. Der Watch -Modus von Scherz (npm test -- --watch oder jest --watch) gibt Tests in Dateiänderungen automatisch aus. Ein ähnlicher Test für deleteTodo wird auch im ursprünglichen Artikel gezeigt.

Testen von React -Komponenten:

Test -React -Komponenten beinhalten häufig weniger umfassende Tests als die Geschäftslogik. Enzym (oder React -Testbibliothek, wie vom React -Team empfohlen) vereinfacht diesen Prozess. Installieren Sie das Enzym und den entsprechenden Adapter:

<code class="language-bash">npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react</code>

erstellen setup-tests.js, um Enzym zu konfigurieren:

<code class="language-javascript">import { toggleDone } from '../app/state-functions';

test('toggleDone completes an incomplete todo', () => {
  const startState = [{ id: 1, done: false, text: 'Buy Milk' }];
  const finState = toggleDone(startState, 1);
  expect(finState).toEqual([{ id: 1, done: true, text: 'Buy Milk' }]);
});</code>

Konfigurieren Sie den Scherz in package.json, um setup-tests.js:

zu verwenden

<code class="language-bash">npm install --save-dev enzyme @wojtekmaj/enzyme-adapter-react-17</code>

Ein Test für die Todo -Komponentenwiedergabe wird mit mount zum Rendern und find zum Lokalisieren von Elementen angezeigt. Ein nachfolgender Test verwendet jest.fn(), um eine Spionagefunktion zu erstellen, und simulate('click'), um ein Ereignis auszulösen, wodurch die Funktionsaufrufe mit toBeCalledWith.

überprüft werden.

Schlussfolgerung:

Die Geschwindigkeit, den Uhrenmodus und die ausdrucksstarke API von 🎜> Scherz machen es zu einem leistungsstarken Test -Framework. Der Artikel schließt mit einer Zusammenfassung seiner Vorteile und weiteren Lesevorschlägen zusammen mit FAQs, die sich mit häufigen Fragen zum Testen von Reaktionskomponenten mit Scherz befassen. Die FAQs decken render, React -Test -Renderer, Testkomponenten mit Requisiten und Testfunktionen in Komponenten ab.

.

Das obige ist der detaillierte Inhalt vonSo testen Sie die Reaktionskomponenten mithilfe von Scherz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!