Supercharge Testing React Applications With Wallaby.js

Acest articol a fost susținut cu amabilitate de dragii noștri prieteni de la Wallaby, care creează instrumente minunate pentru dezvoltatori care împing limitele a ceea ce este posibil din punct de vedere tehnic și, prin aceasta, îi fac pe dezvoltatorii de software mai eficienți, mai eficienți și mai fericiți. Mulțumesc!

Un lucru pe care îl veți descoperi foarte repede atunci când începeți să scrieți teste pentru o aplicație este că doriți să rulați testele în mod constant atunci când codificați. Trebuie să comutați între editorul de cod și fereastra terminalului (sau, în cazul VS Code, terminalul integrat) adaugă o suprasarcină și vă reduce productivitatea pe măsură ce vă construiți aplicația. Într-o lume ideală, veți avea feedback instantaneu cu privire la testele dvs. chiar în editorul dvs. pe măsură ce scrieți codul. Introduceți Wallaby.js.

Ce este Wallaby.js?

Wallaby.js este un test inteligent pentru JavaScript care rulează continuu testele dvs. Raportează acoperirea codului și alte rezultate direct editorului dvs. de cod imediat pe măsură ce vă schimbați codul (chiar și fără a salva fișierul). Instrumentul este disponibil ca extensie de editor pentru VS Code, IntelliJ Editors (cum ar fi WebStorm și IntelliJ IDEA), Atom, Sublime Text și Visual Studio.

De ce Wallaby.js?

După cum am menționat mai devreme, Wallaby.js își propune să vă îmbunătățească productivitatea în dezvoltarea de zi cu zi JavaScript. În funcție de fluxul de lucru de dezvoltare, Wallaby vă poate economisi ore de timp în fiecare săptămână, reducând schimbarea contextului. Wallaby oferă, de asemenea, raportarea acoperirii codului, raportarea erorilor și alte funcții care economisesc timp, cum ar fi depanarea în timp și poveștile de testare.

Noțiuni introductive cu Wallaby.js în VS Code

Să vedem cum putem obține beneficiile Wallaby.js folosind VS Code.

Notă: Dacă nu utilizați VS Code, puteți consulta aici instrucțiuni despre cum să configurați pentru alți editori.

Instalați extensia Wallaby.js VS Code

Pentru a începe, vom instala extensia Wallaby.js VS Code.

După ce extensia este instalată, runtime-ul de bază Wallaby.js va fi descărcat și instalat automat.

Licență Wallaby

Wallaby oferă o licență Open Source pentru proiectele open source care doresc să utilizeze Wallaby.js. Vizitați aici pentru a obține o licență open-source. Puteți utiliza licența open-source cu depozitul demonstrativ pentru acest articol.

De asemenea, puteți obține o licență de probă complet funcțională de 15 zile, vizitând aici.

Dacă doriți să utilizați Wallaby.js într-un proiect non-open-source dincolo de perioada de probă de 15 zile de licență, puteți obține o cheie de licență de pe site-ul web Wallaby.

Adăugați cheia de licență la codul VS

După ce obțineți o cheie de licență, mergeți la VS Code și în paleta de comenzi căutați „Wallaby.js: Manage License Key”, faceți clic pe comandă și vi se va afișa o casetă de introducere pentru a introduce cheia de licență, apoi apăsați enter. și veți primi o notificare că Wallaby.js a fost activat cu succes.

Wallaby.js și React

Acum că avem Wallaby.js configurat în editorul nostru VS Code, să supraalimentăm testarea unei aplicații React cu Wallaby.js.

Pentru aplicația noastră React, vom adăuga o funcție simplă de vot în sus/vot negativ și vom scrie câteva teste pentru noua noastră funcție pentru a vedea cum funcționează Wallaby.js în amestec.

Crearea aplicației React

Notă : puteți clona depozitul demo dacă doriți, sau puteți urmări mai jos.

Vom crea aplicația noastră React folosind instrumentul CLI create-react-app.

 npx create-react-app wallaby-js-demo

Apoi deschideți proiectul React nou schelă în VS Code.

Deschideți src/App.js și porniți Wallaby.js rulând: „Wallaby.js: Start” în paleta de comenzi VS Code (în mod alternativ, puteți utiliza combinația de comenzi rapide - Ctrl + Shift + R R dacă sunteți pe o mașină Windows sau Linux , sau Cmd + Shift + R R dacă sunteți pe un Mac).

Când Wallaby.js pornește, ar trebui să vedeți indicatorii de acoperire a testului în stânga editorului dvs., similari capturii de ecran de mai jos:

Wallaby.js oferă 5 indicatori de culoare diferite în marginea din stânga a editorului de cod:

1. Gri: înseamnă că linia de cod nu este executată de niciunul dintre testele tale.
2. Galben: înseamnă că o parte din codul de pe o linie dată a fost executat, dar alte părți nu au fost.
3. Verde: înseamnă că tot codul de pe o linie a fost executat de testele tale.
4. Roz: înseamnă că linia de cod se află pe calea de execuție a unui test eșuat.
5. Roșu: înseamnă că linia de cod este sursa unei erori sau a unei așteptări eșuate sau în teancul unei erori.

Dacă vă uitați la bara de stare, veți vedea valorile Wallaby.js pentru acest fișier și arată că avem o acoperire de 100% a testului pentru src/App.js și un singur test de promovare, fără nici un test eșuat. De unde știe Wallaby.js asta? Când am pornit Wallaby.js, a detectat că src/App.js are un fișier de testare src/App.test.js , apoi rulează acele teste în fundal pentru noi și ne oferă în mod convenabil feedback-urile folosind indicatorii săi de culoare și, de asemenea, ne oferă un rezumat al testelor noastre în bara de stare.

Când deschideți și src/App.test.js , veți vedea feedback similar de la Wallaby.js

În prezent, toate testele trec în acest moment, așa că obținem toți indicatorii verzi. Să vedem cum Wallaby.js gestionează testele eșuate. În src/App.test.js , să facem testul să eșueze schimbând așteptările testului astfel:

 // src/App.test.js expect(linkElement).not.toBeInTheDocument();

Captura de ecran de mai jos arată cum ar arăta acum editorul cu src/App.test.js deschis:

Veți vedea că indicatorii se schimbă în roșu și roz pentru testele eșuate. De asemenea, observați că nu a trebuit să salvăm fișierul pentru Wallaby.js pentru a detecta că am făcut o modificare.

Veți observa, de asemenea, linia din editorul dvs. în src/App.test.js care scoate eroarea testului. Acest lucru se realizează datorită înregistrării avansate Wallaby.js. Folosind înregistrarea avansată Wallaby.js, puteți, de asemenea, să raportați și să explorați valorile de rulare lângă codul dvs. folosind console.log , un format special de comentariu //? și comanda VS Code, Wallaby.js: Show Value .

Acum să vedem fluxul de lucru Wallaby.js pentru remedierea testelor eșuate. Faceți clic pe indicatorul de testare Wallaby.js din bara de stare pentru a deschide fereastra de ieșire Wallaby.js. (“✗ 1 ✓ 0”)

În fereastra de ieșire Wallaby.js, chiar lângă testul eșuat, ar trebui să vedeți un link „Test de depanare”. Dacă apăsați Ctrl și faceți clic pe acel link, va porni depanatorul de călătorie în timp Wallaby.js. Când facem asta, fereastra Wallaby.js Tools se va deschide în partea laterală a editorului dvs. și ar trebui să vedeți secțiunea de depanare Wallaby.js, precum și secțiunile Value explorer și Test file coverage.

Dacă doriți să vedeți valoarea de rulare a unei variabile sau expresii, selectați valoarea în editorul dvs. și Wallaby.js o va afișa pentru dvs.

De asemenea, observați linkul „Open Test Story” din fereastra de ieșire. Povestea de testare Wallby.js vă permite să vedeți toate testele și codul pe care îl testează într-o singură vizualizare în editor.

Să vedem asta în acțiune. Apăsați Ctrl și faceți clic pe link - ar trebui să puteți vedea povestea de testare Wallaby.js deschisă în editorul dvs. Wallaby's Test Story Viewer oferă o modalitate unică și eficientă de a inspecta codul pe care testul dumneavoastră îl execută într-o singură vizualizare logică.

Un alt lucru pe care îl vom explora înainte de a remedia testul eșuat este aplicația Wallaby.js. Observați linkul din fereastra de ieșire Wallaby.js: „Launch Coverage & Test Explorer”. Făcând clic pe link, va lansa aplicația Wallaby.js, care vă va oferi o vedere panoramică compactă a tuturor testelor din proiectul dvs.

Apoi, faceți clic pe link și porniți aplicația Wallaby.js în browserul implicit prin https://localhost:51245/ . Wallaby.js va detecta rapid că avem proiectul nostru demo deschis în editorul nostru, care apoi îl va încărca automat în aplicație.

Iată cum ar trebui să arate acum aplicația:

Ar trebui să puteți vedea valorile testului în partea de sus a aplicației Wallaby.js. În mod implicit, fila Teste din aplicație este deschisă. Făcând clic pe fila Fișiere , ar trebui să puteți vedea fișierele din proiectul dvs., precum și rapoartele lor de acoperire a testelor.

Înapoi la fila Teste , faceți clic pe test și ar trebui să vedeți funcția de raportare a erorilor Wallaby.js în partea dreaptă:

Acum am acoperit toate acestea, am revenit la editor și am remediat testul eșuat pentru a face Wallaby.js fericit, revenind la următoarea linie pe care am schimbat-o mai devreme:

 expect(linkElement).toBeInTheDocument();

Fereastra de ieșire Wallaby.js ar trebui să arate acum ca captura de ecran de mai jos, iar indicatorii de acoperire a testului ar trebui să treacă acum.

Implementarea caracteristicii noastre

Am explorat Wallaby.js în aplicația implicită creată pentru noi de create-react-app . Să implementăm funcția noastră de vot pozitiv/defavorabil și să scriem teste pentru asta.

Interfața de utilizare a aplicației noastre ar trebui să conțină două butoane unul pentru vot pozitiv și celălalt pentru vot negativ și un singur numărător care va fi incrementat sau decrementat în funcție de butonul pe care îl face clic pe utilizator. Să modificăm src/App.js pentru a arăta astfel.

 // src/App.js import React, { useState } from 'react'; import logo from './logo.svg'; import './App.css'; function App() { const [vote, setVote] = useState(0); function upVote() { setVote(vote + 1); } function downVote() { // Note the error, we will fix this later... setVote(vote - 2); } return ( <div className='App'> <header className='App-header'> <img src={logo} className='App-logo' alt='logo' /> <p className='vote' title='vote count'> {vote} </p> <section className='votes'> <button title='upVote' onClick={upVote}> <span role='img' aria-label='Up vote'> </span> </button> <button title='downVote' onClick={downVote}> <span role='img' aria-label='Down vote'> </span> </button> </section> </header> </div> ); } export default App;

De asemenea, vom stila puțin UI. Adăugați următoarele reguli la src/index.css

 .votes { display: flex; justify-content: space-between; } p.vote { font-size: 4rem; } button { padding: 2rem 2rem; font-size: 2rem; border: 1px solid #fff; margin-left: 1rem; border-radius: 100%; transition: all 300ms; cursor: pointer; } button:focus, button:hover { outline: none; filter: brightness(40%); }

Dacă vă uitați la src/App.js , veți observa niște indicatori gri din Wallaby.js care ne sugerează că o parte din codul nostru nu a fost încă testată. De asemenea, veți observa că testul nostru inițial în src/App.test.js eșuează, iar indicatorul din bara de stare Wallaby.js arată că acoperirea noastră de testare a scăzut.

Aceste indicii vizuale de la Wallaby.js sunt convenabile pentru dezvoltarea bazată pe teste (TDD), deoarece primim feedback instantaneu cu privire la starea aplicației noastre în ceea ce privește testele.

Testarea codului aplicației noastre

Să modificăm src/App.test.js pentru a verifica dacă aplicația se redă corect.

Notă : vom folosi Biblioteca de testare React pentru testul nostru, care iese din cutie atunci când rulați create-react-app . Consultați documentele pentru ghidul de utilizare.

Vom avea nevoie de câteva funcții suplimentare de la @testing-library/react , actualizați importul @testing-library/react la:

 import { render, fireEvent, cleanup } from '@testing-library/react';

Apoi, să înlocuim testul unic din src/App.js cu:

 test('App renders correctly', () => { render(<App />); });

Imediat, veți vedea că indicatorul devine verde atât în ​​linia src/App.test.js unde testăm randarea aplicației, cât și în cazul în care apelăm render în src/App.js .

În continuare, vom testa că valoarea inițială a stării de vote este zero (0).

 it('Vote count starts at 0', () => { const { getByTitle } = render(<App />); const voteElement = getByTitle('vote count'); expect(voteElement).toHaveTextContent(/^0$/); });

În continuare, vom testa dacă făcând clic pe butonul de vot pozitiv crește votul:

 it('Vote increments by 1 when upVote button is pressed', () => { const { getByTitle } = render(<App />); const upVoteButtonElement = getByTitle('upVote'); const voteElement = getByTitle('vote count'); fireEvent.click(upVoteButtonElement); expect(voteElement).toHaveTextContent(/^1$/); });

Vom testa, de asemenea, interacțiunea cu votul negativ astfel:

 it('Vote decrements by 1 when downVote button is pressed', () => { const { getByTitle } = render(<App />); const downVoteButtonElement = getByTitle('downVote'); const voteElement = getByTitle('vote count'); fireEvent.click(downVoteButtonElement); expect(voteElement).toHaveTextContent(/^-1$/); });

Hopa, acest test eșuează. Să aflăm de ce. Deasupra testului, faceți clic pe linkul View story sau pe linkul Debug Test din fereastra de ieșire Wallaby.js și utilizați depanatorul pentru a trece la funcția downVote . Avem o eroare... ar fi trebuit să reducem numărul de voturi cu 1, dar în schimb, scădem cu 2. Să remediam bug-ul și să reducem cu 1.

 src/App.js function downVote() { setVote(vote - 1); }

Urmărește acum cum indicatorii lui Wallaby devin verde și știm că toate testele noastre trec:

src/App.test.js ar trebui să arate astfel:

 import React from 'react'; import { render, fireEvent, cleanup } from '@testing-library/react'; import App from './App'; test('App renders correctly', () => { render(<App />); }); it('Vote count starts at 0', () => { const { getByTitle } = render(<App />); const voteElement = getByTitle('vote count'); expect(voteElement).toHaveTextContent(/^0$/); }); it('Vote count increments by 1 when upVote button is pressed', () => { const { getByTitle } = render(<App />); const upVoteButtonElement = getByTitle('upVote'); const voteElement = getByTitle('vote count'); fireEvent.click(upVoteButtonElement); expect(voteElement).toHaveTextContent(/^1$/); }); it('Vote count decrements by 1 when downVote button is pressed', () => { const { getByTitle } = render(<App />); const downVoteButtonElement = getByTitle('downVote'); const voteElement = getByTitle('vote count'); fireEvent.click(downVoteButtonElement); expect(voteElement).toHaveTextContent(/^-1$/); }); afterEach(cleanup);

După ce am scris aceste teste, Wallaby.js ne arată că căile de cod lipsă pe care le-am identificat inițial înainte de a scrie orice teste au fost acum executate. De asemenea, putem observa că acoperirea noastră a crescut. Din nou, veți observa cum scrierea testelor cu feedback instantaneu de la Wallaby.js vă permite să vedeți ce se întâmplă cu testele dvs. chiar în browser, ceea ce, la rândul său, vă îmbunătățește productivitatea.

Concluzie

Din acest articol, ați văzut cum Wallaby.js vă îmbunătățește experiența de dezvoltator atunci când testați aplicații JavaScript. Am investigat câteva caracteristici cheie ale Wallaby.js, am configurat-o în VS Code și apoi am testat o aplicație React cu Wallaby.js.

Resurse suplimentare

• Tutorial VS Code, Wallaby.js
• Aplicația demo pentru acest proiect poate fi găsită pe GitHub.