Pārbaudījumu rakstīšana var būt nogurdinoša un atkārtota. Jums var šķist, ka tērējat dārgo laiku, ko labprātāk izmantotu, lai strādātu pie funkcijām. Tomēr, ja vēlaties nosūtīt lietojumprogrammas, par kurām esat pārliecināts, jums vajadzētu rakstīt testus.

Testēšana ļauj atklāt kļūdas un kļūdas, kuras pretējā gadījumā jūs varētu nosūtīt lietotājiem. Tādējādi tas uzlabo jūsu lietojumprogrammas lietotāja pieredzi un pasargā jūs no ražošanas koda atkļūdošanas.

Varat viegli rakstīt testus programmā React, izmantojot Jest un React testēšanas bibliotēku.

Kas jums jāpārbauda reakcijā?

Izlemt, ko pārbaudīt, var būt grūti. Lai gan testi ir lieliski, jums nevajadzētu pārbaudīt katru rindiņu savā React lietojumprogrammā. To darot, jums būs trausli testi, kas izjauks, ja lietotnē tiek veiktas mazākās izmaiņas.

Tā vietā jums vajadzētu pārbaudīt tikai galalietotāja ieviešanu. Tas nozīmē pārbaudīt, kā galalietotājs izmantos jūsu lietojumprogrammu, nevis pārbaudīt jūsu lietotnes iekšējo darbību.

Turklāt noteikti pārbaudiet savā lietojumprogrammā visbiežāk izmantotos komponentus, piemēram, galveno lapu vai pierakstīšanās komponentu. Tāpat pārbaudiet savas lietojumprogrammas svarīgākās funkcijas. Piemēram, tās var būt līdzekļus, kas ienes naudu, piemēram, iepirkumu groza funkcija.

Izlemjot, ko pārbaudīt, viena lieta, kas jāpatur prātā, ir nekad pārbaudīt funkcionalitāti, ko React apstrādā pati. Piemēram, tā vietā, lai pārbaudītu rekvizītu derīgumu, varat izmantot React PropTypes.

Pogas komponenta pārbaude

Atcerieties, ka jums ir jāpārbauda tikai komponenta gala lietotāja ieviešana, nevis tā iekšējā darbība. Pogas komponentam tas nozīmē pārbaudi, ka tas tiek renderēts bez avārijas un tiek parādīts pareizi.

Izveidojiet jaunu failu mapē src mape sauc Button.js un pievienojiet šādu kodu.

funkcijuPoga({value}) {
atgriezties (
<pogu>{value}</button>
 )
}
eksportētnoklusējuma Poga

Button.js pieņem rekvizītu, ko sauc par vērtību, un izmanto to kā pogas vērtību.

Pirmā testa rakstīšana

A izveidot-reaģēt-lietotnes lietojumprogrammu ir iepriekš instalēts ar Jest un React Testing Library. Jest ir viegla testēšanas bibliotēka ar iebūvētām ņirgāšanās un apgalvojumu funkcijām. Tas darbojas ar daudziem JavaScript ietvari. No otras puses, React Testing Library nodrošina funkcijas, kas palīdz pārbaudīt, kā lietotāji mijiedarbojas ar komponentiem.

Izveidojiet jaunu failu ar nosaukumu Button.test.js src mapē. Pēc noklusējuma Jest identificē failus ar sufiksu ar .test.js kā testa failus un automātiski palaiž tos. Vēl viena iespēja ir pievienot testa failus mapei ar nosaukumu __testi__.

Lai izveidotu pirmo testu, failā Button.test.js pievienojiet tālāk norādīto kodu.

imports { renderēt } no '@testing-library/react';
imports Poga no '../poga';
aprakstīt ('Pogas sastāvdaļa', () => { 
 pārbaude('Atveido pogas komponentu bez avārijas', () => {
 render(<Poga />);
 }); 
})

Šis tests vispirms definē, kas ir tests, izmantojot Jest nodrošināto apraksta bloku. Šis bloks ir noderīgs saistīto testu grupēšanai. Šeit jūs grupējat pogas komponenta testus.

Apraksta blokā jums ir pirmais tests testa blokā. Šis bloks pieņem virkni, kas apraksta, kas testam ir jādara, un atzvanīšanas funkciju, kas izpilda gaidīto.

Šajā piemērā testam ir jāatveido Button komponents bez avārijas. Renderēšanas metode no React Testing Library veic faktisko pārbaudi. Tas pārbauda, ​​vai Button komponents tiek renderēts pareizi. Ja tā notiek, tests tiek izturēts, pretējā gadījumā tas neizdodas.

Lomu izmantošana pogas atrašanai

Dažreiz jūs vēlaties pārbaudīt, vai elements ir uzstādīts. Ekrāna metodei ir funkcija getByRole(), ko varat izmantot, lai paņemtu elementu no DOM.

screen.getByRole('pogu')

Pēc tam varat izmantot satverto elementu, lai veiktu pārbaudes, piemēram, pārbaudītu, vai tas pastāv dokumentā vai ir pareizi renderēts.

getByRole() ir viens no daudziem vaicājumiem, ko varat izmantot, lai atlasītu komponenta elementus. Apskatiet citus vaicājumu veidus vietnē The Reakciju testēšanas bibliotēka Rokasgrāmata “Kuru vaicājumu man vajadzētu izmantot”. Arī lielākā daļa, izņemot “pogas” lomu semantiskie HTML elementi ir netiešas lomas, kuras varat izmantot savu vaicājumu veikšanai. Atrodiet lomu sarakstu no MDN dokumenti.

Pievienojiet testa blokam tālāk norādīto, lai pārbaudītu komponentu atveidojumus.

pārbaude('Renderē pogu bez avārijas', () => {
 render(<Pogas vērtība="Pierakstīties" />);
 sagaidīt (screen.getByRole('pogu')).ToBeInTheDocument()
});

Atbilstītājs ToBeInTheDocument() pārbauda, ​​vai dokumentā pastāv pogas elements.

Sagaidiet, ka poga atveidosies pareizi

Komponents Button pieņem atbalsta vērtību un parāda to. Lai to atveidotu pareizi, tajā parādītajai vērtībai ir jābūt tādai pašai kā ievadītajai vērtībai.

Izveidojiet jaunu testa bloku un pievienojiet šādu kodu.

pārbaude('Poga tiek renderēta pareizi', () => {
 render(<Pogas vērtība="Pieslēgties" />);
 sagaidīt (screen.getByRole('pogu')).toHaveTextContent("Pieslēgties")
})

Ņemiet vērā, ka, izmantojot React testēšanas bibliotēku, pēc pārbaudēm nav jāveic tīrīšana. Iepriekšējās versijās tīrīšana jāveic manuāli šādi:

pēc katra (tīrīšana)

Tagad testēšanas bibliotēka automātiski atvieno komponentus pēc katra renderēšanas.

Momentuzņēmumu testu izveide

Līdz šim esat pārbaudījis komponenta Button darbību. Uzrakstiet momentuzņēmuma testus, lai pārbaudītu, vai komponenta izvade paliek nemainīga.

Momentuzņēmuma testi salīdzina pašreizējo izvadi ar komponenta saglabāto izvadi. Piemēram, ja maināt Button komponenta stilu, momentuzņēmuma pārbaude jums par to paziņos. Varat atjaunināt momentuzņēmumu, lai tas atbilstu mainītajam komponentam, vai atsaukt stila izmaiņas.

Momentuzņēmuma testi ir ļoti noderīgi ikreiz, kad vēlaties nodrošināt, ka jūsu lietotāja interfeiss negaidīti nemainās.

Momentuzņēmuma testēšana atšķiras no vienības testiem, jo, lai izveidotu momentuzņēmumu, jums ir nepieciešams jau strādājošs kods.

Jūs izmantosit renderētāja metodi no pakotnes react-test-renderer npm. Tātad, izpildiet šo kodu, lai to instalētu.

npm uzstādīt reaģēt -pārbaude- renderētājs

Vietnē Button.test.js ierakstiet momentuzņēmuma testu šādi:

pārbaude('Atbilst momentuzņēmumam', () => {
 const koks = renderer.create(<Pogas vērtība="Pieslēgties" />).toJSON();
gaidīt(koks).toMatchSnapshot();
})

Komponentam Button nav momentuzņēmumu, tāpēc, izpildot šo testu, līdzās testa failam tiks izveidots momentuzņēmuma fails:

Poga
└─── __testi__
│ │ Poga.pārbaudes.js
│ └─── __momentuzņēmums__
│ │ Poga.pārbaude.js.uzsit
│ 
└─── Poga.js

Tagad, palaižot nākamo testu, React salīdzinās jauno momentuzņēmumu, ko tas ģenerē, ar saglabāto momentuzņēmumu.

Uzrakstiet testus visbiežāk izmantotajām sastāvdaļām

Šī apmācība iemācīja jums rakstīt DOM un momentuzņēmumu testus programmā React, pārbaudot pogas komponentu. Testu rakstīšana visiem jūsu izveidotajiem komponentiem var būt nogurdinoša. Tomēr šie testi ietaupa laiku, ko būtu pavadījuši jau izvietotā koda atkļūdošanai.

Jums nav jāsasniedz 100 procentu testa pārklājums, taču noteikti rakstāt visbiežāk izmantoto un svarīgāko komponentu testus.