Cum se testați reacționează site-urile și aplicațiile
Sep 10, 2025
să
(Credit Imagine: Viitor)
Dacă doriți să știți cum să încercați să reacționați, sunteți în locul potrivit. Chiar știi că codul tău face ceea ce ar trebui să facă? Ați testat-o în browser? Dacă nu ați făcut-o sau nu puteți testa totul și se rupe în producție?
O bibliotecă de testare este un grup de dezvoltatori de utilități utilizează pentru a scrie teste individuale pe componentele aplicației. Unele dintre părțile principale ale unui test sunt:
Descriere:
descrie ce este testul
Utilizați / Render:
utilizează componenta într-un mediu în care poate fi testat
Batjocoritor:
creează funcții prefăcute, astfel încât să puteți verifica ipotezele
Pe parcursul acestui articol, voi explora câteva exemple din biblioteca de testare reacțională pentru a vă ajuta să începeți cu acest mod valoros de a îmbunătăți robustețea ieșirii codului dvs., precum și asigurarea codului dvs. nu aruncați Up Surprize urâte odată ce merge în producție.
Doresc resurse mai utile? Iată o rundă a celor mai bune
Instrumente de design web
în jurul valorii de care vă va ajuta să lucrați mai inteligent. Sau dacă aveți nevoie de o mașină nouă, încercați această rundă de
Cele mai bune laptopuri pentru programare
. Sau dacă construiți un site nou, ați putea avea nevoie de un mare
Builder de site-uri web
.
01. Începeți cu Biblioteca de testare a reacției
Voi folosi aplicația creată-reacție pentru acest demo, deoarece este deja preconfigurată cu biblioteca de testare. Dacă utilizați GATSBY sau o configurare personalizată, ar putea exista o anumită configurație pe care trebuie să o parcurgeți înainte de a începe să utilizați biblioteca de testare.
Pentru a începe, să creăm o nouă aplicație. Dacă aveți deja o versiune recentă de NODE.JS, puteți rula următoarea comandă fără a instala altceva la nivel global:
npx create-react-app netmag-javascript-testing
02. Decideți ce să încercați
Imaginați-vă că avem o componentă simplă, spunând un buton cu unele stare. Care sunt unele dintre lucrurile care au nevoie de testare într-o componentă ca aceasta?
●
Apariția componentei:
Nu vrem ca nimic să se schimbe în mod neașteptat după ce am scris componenta noastră. Așadar, vom scrie un test instantaneu pentru a surprinde cum se face. Apoi, dacă se schimbă ceva, o vom vedea repede fără un test manual sau vizual. Acest lucru este minunat pentru componentele care constau din mai multe componente mai mici: puteți vedea rapid când (și unde) aspectul său a fost afectat.
●
Diferitele ramuri care fac:
Pentru că am putea avea două sau mai multe ieșiri diferite, trebuie să testez că îl facem corect, nu doar unul dintre ei. Așadar, trebuie să simulăm un eveniment de clic și să avem un alt test instantaneu pentru modul în care aceasta face după ce această ramură a codului a fost executată.
●
Aceste funcții sunt numite așa cum era de așteptat:
Vrem să ne asigurăm că codul pe care l-am scris pentru a apela o altă funcție funcționează așa cum presupunem că va fi. Dar, deoarece această funcție este o dependență externă, nu vrem să testez că aici. Testele noastre ar trebui să încapabil numai funcționalitatea pe care o dorim să le facă.
Să scriem primul nostru test. Creați un fișier nou numit
Mycomponent.unit.test.js.
în același folder ca și componenta. Prin adăugarea de test.js la sfârșit, va fi selectată automat de biblioteca de testare. Conținutul acestui fișier este mai jos:
Importul reacționează de la "reaction"
Import {Render} de la "@ Testing-bibliotecă / reaction"
Import MyComponent de la "./mycomponent"
Descrieți ("" MyComponent / & Gt;, () = & gt; {
// testele merg aici
})
Primul lucru pe care vreau să-l atrag atenția este
descrie()
Funcția, care ia două argumente: primul este un șir pe care îl puteți utiliza pentru a descrie mai bine - ca șir de text - ceea ce va face testul dvs. În cazul nostru, pur și simplu am spus că ar trebui să facă. Acest lucru este foarte util când altcineva se uită la codul dvs. sau trebuie să vă amintiți ce ați făcut într-o etapă ulterioară. Scrierea declarațiilor descrise bune este o formă de documentație de cod și un alt motiv bun pentru scrierea testelor.
Al doilea argument este testele tale.
descrie()
Funcția va rula toate aceste teste unul după celălalt.
04. Utilizați funcția de curățare
Să introducem o funcție helper numită
înainte ()
. Trebuie să folosim acest lucru pentru că de fiecare dată când facem ceva cu componenta, dorim o copie proaspătă fără recuzită pe care am trecut-o anterior în continuare existentă în componentă. Sau s-ar putea să trebuiască să redemină componenta:
înainte ()
Asta pentru noi și putem trece funcția de curățare.
Import {Render, Cleanup} de la "@ Testing-bibliotecă / reaction"
...
descrie ("componenta ar trebui să facă", () = & gt; {
înainte de curățare (curățare)
}
În acest pas, vom ajunge la "montarea" componentei noastre (sau o facem).
Descrieți ("componenta ar trebui să facă", () = & gt; {
înainte de curățare (curățare)
("Renders cu suport de bază", () = & gt; {
Render (& Lt; MyComponent / & Gt;)
})
}
Această rentabilitate ne oferă acces la toate proprietățile prestate ale componentei compilate. Ar putea fi bine să renunțați la acest lucru într-o
consola.log ()
Deci, puteți vedea mai clar ceea ce face.
Dacă faceți, veți vedea că există câteva proprietăți utile pe care le putem profita de aici. Voi face o afirmație (face o declarație testabilă) și o testați prin extragerea containerului. Containerul "conține" nodurile DOM (toate HTML) asociate componentei.
Aceasta ("face cu recuzită de bază, () = & gt; {
const {container} = Render (& lt; mycomponent / & gt;)
})
Acum avem acces la container, cum să spun că este redat în conformitate cu afirmația mea? Prin adăugarea unui test instantaneu.
Gândiți-vă la un instantaneu ca fiind ca o fotografie. Este nevoie de un instantaneu al componentei noastre la un moment dat. Apoi ori de câte ori facem modificări la cod, putem vedea dacă se potrivește încă instantaneu original. Dacă o face, putem fi încrezători că nimic nu sa schimbat în componentă. Cu toate acestea, dacă nu, s-ar putea să fi descoperit o problemă care a provenit într-o altă componentă, pe care am putea să nu am văzut anterior:
06. Proprietăți de testare
Propoane sau proprietăți, ale unei componente pot fi testate și cu instantanee. Testarea diferitelor recuzări pe care le furnizați componentei dvs. vă va oferi o mai mare acoperire și încredere. Nu știți niciodată când o cerință va însemna că recuzele componentelor dvs. sunt refectate și ieșirea finală se va schimba.
Adăugați următorul obiect în partea de sus a fișierului dvs .:
Definim proprietățile dintr-un obiect și apoi folosim operatorul de răspândire (trei puncte urmate de numele obiectului:
... lightproperties)
Pentru că putem trece doar un argument atunci când facem în acest fel. De asemenea, este util să vedeți ce proprietăți aleși în izolare:
Imaginați-vă că componenta noastră are un buton și doriți să vă asigurați că se întâmplă ceva când butonul este făcut clic. S-ar putea să credeți că doriți să testați starea aplicației; De exemplu, este posibil să fiți tentați să testați că statul a fost actualizat. Cu toate acestea, acest lucru nu este obiectul acestor teste.
Acest lucru ne prezintă un concept important în utilizarea unei biblioteci de testare: nu suntem aici pentru a testa statul sau modul în care funcționează componenta noastră. Suntem aici pentru a testa modul în care oamenii vor folosi componenta și că își îndeplinește așteptările.
Deci, dacă statul a fost sau nu actualizat este imaterial; Ceea ce vrem să testăm este ceea ce rezultatul acelui buton este apăsat.
Să ne imaginăm că testează rezultatul unei funcții care modifică UI din modul întunecat în modul ușor. Iată componenta:
Ați observat că am adăugat noul atribut
Data-testid
la buton? Iată cum ați putea testa asta. În primul rând, importați o nouă funcție, incendios din biblioteca de testare:
Importul {Cleanup,
Fireevent,
face
} de la "@ Testing-bibliotecă / reaction"
Putem folosi această funcție pentru a testa că există schimbări în UI și că aceste modificări sunt consecvente:
Acest lucru este minunat: Nu trebuie să mergem manual la site și să privim în jur, apoi să faceți clic pe butonul și să vă uitați în jur de a doua oară - în care, ați putea recunoaște, veți uita probabil sau pierdeți ceva! Acum putem avea încredere că, având în vedere aceeași intrare, ne putem aștepta la aceeași ieșire în componenta noastră.
Când vine vorba de ID-urile de testare, îmi place personal utilizarea
Data-testid
pentru a găsi ceva în DOM. La urma urmei, obiectul testelor este de a imita ceea ce face utilizatorul si sa testeze ce se intampla atunci cand fac.
Data-testid
Se simte ca un pic de cheat - deși testidele de date vor veni probabil la îndemână pentru inginerul dvs. QA (a se vedea box-ul rolului inginerilor de asigurare a calității).
În schimb, am putea folosi
getbytext ()
și treceți în textul butonului nostru. Această metodă ar fi mult mai mult comportament specific.
08. Mock și spion Funcția
Uneori am putea avea nevoie de a testa un apel la o funcție, dar această funcție este în afara domeniului de aplicare al testului. De exemplu, am un modul separat care conține o funcție care calculează valoarea PI la un anumit număr de zecimale.
Nu am nevoie să testez care este rezultatul acestui modul. Trebuie să testez că funcția mea face așa cum era de așteptat. Pentru mai multe informații despre motivul pentru care este, consultați testele de unitate și integrare. În acest caz, am putea "batem" acea funcție:
Functia
tohavebencalledtimes ()
este una dintre numeroasele funcții de ajutor din biblioteca de testare care ne permite
pentru a testa ieșirea funcțiilor. Acest lucru ne permite nu numai ca testele noastre doar la modulul pe care vrem să-l testez, dar înseamnă, de asemenea, că putem "spiona" sau să vedem ce face funcția noastră atunci când numește funcția.
Testele de scriere pot părea puțin descurajator pentru a începe. Sper că acest tutorial ți-a dat mai multă încredere pentru a încerca. De când am început să scriu teste pentru aplicațiile mele, chiar nu mă pot întoarce: pot să mă odihnesc mai ușor, știind că plec în urmă o moștenire mult mai bună pentru cei care vor folosi munca mea în viitor.
Amintiți-vă, dacă construiți un site complex, veți dori să vă obțineți
web hosting
spot de serviciu. Și dacă acest site este probabil să conțină o mulțime de active, stocându-le în fiabile
Stocare in cloud
este crucial.
Acest conținut a apărut inițial în
revista netă
. Citiți mai multe despre noi
Articole de design web aici
.
Nimic nu-mi place mai bine decât să fiu în aer liber pictura lumea din jurul meu, dar a fost cu siguranță o luptă pentru mine când am început să folosesc Goatache. Lucrul cu un mediu..
