Тестови писања могу бити заморни и понављајући. Можда ћете се осећати као да губите драгоцено време које бисте радије искористили за рад на функцијама. Међутим, ако желите да шаљете апликације у које сте сигурни, требало би да пишете тестове.
Тестирање вам омогућава да ухватите грешке и грешке које бисте иначе могли испоручити корисницима. Стога, побољшава корисничко искуство ваше апликације и штеди вас од потребе да отклањате грешке у производном коду.
Можете лако писати тестове у Реацт-у користећи Јест и Реацт Тестинг Либрари.
Шта треба да тестирате у Реацт-у?
Одлучивање шта тестирати може бити тешко. Иако су тестови одлични, не би требало да тестирате сваку линију у вашој Реацт апликацији. Ако то урадите, оставићете крхке тестове који прекидају и најмању промену у вашој апликацији.
Уместо тога, требало би да тестирате само имплементацију крајњег корисника. То значи да тестирате како ће крајњи корисник користити вашу апликацију уместо да тестира унутрашње функционисање ваше апликације.
Штавише, уверите се да тестирате најчешће коришћене компоненте у својој апликацији, као што су одредишна страница или компонента за пријављивање. Такође, тестирајте најважније функције у својој апликацији. На пример, то могу бити функције које доносе новац, као што је функција колица за куповину.
Када одлучујете шта да тестирате, једна ствар коју треба имати на уму је да никада не тестирате функционалност којом Реацт управља сам. На пример, уместо тестирања валидности реквизита, можете користити Реацт ПропТипес.
Тестирање компоненте дугмета
Запамтите, требало би да тестирате само имплементацију компоненте за крајњег корисника, а не њен интерни рад. За компоненту дугмета, ово значи да се мора проверити да ли се приказује без пада и да се правилно приказује.
Креирајте нову датотеку у срц фолдер под називом Буттон.јс и додајте следећи код.
функцијаДугме({валуе}) {
повратак (
<дугме>{валуе}</button>
)
}
извозУобичајено Дугме
Буттон.јс прихвата пропс назван валуе и користи га као вредност дугмета.
Писање првог теста
А апликација за креирање-реаговање долази унапред инсталиран са Јестом и библиотеком за тестирање Реацт. Јест је лагана библиотека за тестирање са уграђеним функцијама исмевања и тврдњи. Ради са многима ЈаваСцрипт оквири. Реацт Тестинг Либрари, с друге стране, пружа функције које вам помажу да тестирате како корисници комуницирају са компонентама.
Креирајте нову датотеку под називом Буттон.тест.јс у фасцикли срц. Подразумевано, Јест идентификује датотеке са суфиксом са .тест.јс као тест датотеке и аутоматски их покреће. Друга опција је да додате своје тест датотеке у фасциклу под називом __тестови__.
Додајте следећи код у Буттон.тест.јс да бисте направили први тест.
увоз { дати, пружити } из '@тестинг-либрари/реацт';
увоз Дугме из '../Дугме';
описати ('Компонента дугмета', () => {
тест('Рендерује компоненту дугмета без пада', () => {
дати, пружити(<Дугме />);
});
})
Овај тест прво дефинише шта је тест у вези са коришћењем блока описа који обезбеђује Јест. Овај блок је користан за груписање сродних тестова. Овде групишете тестове за компоненту дугмета.
Унутар блока описа, имате први тест у блоку за тестирање. Овај блок прихвата стринг који описује шта тест треба да уради и функцију повратног позива која извршава очекивање.
У овом примеру, тест треба да прикаже компоненту дугмета без пада. Метода рендеровања из Реацт Тестинг Либрари обавља стварни тест. Проверава да ли се компонента дугмета правилно приказује. Ако јесте, тест пролази, у супротном не успева.
Коришћење улога за проналажење дугмета
Понекад желите да проверите да ли је елемент монтиран. Метода екрана има функцију гетБиРоле() коју можете користити за преузимање елемента из ДОМ-а.
сцреен.гетБиРоле('дугме')
Затим можете да користите елемент који сте зграбили да извршите тестове као што је провера да ли постоји у документу или је исправно приказан.
гетБиРоле() је један од многих упита које можете користити за одабир елемената у компоненти. Погледајте друге врсте упита у Тхе Реацт Тестинг Либрари’с Водич „Који упит да користим“. Такође осим улоге „дугмада“, већина семантичких ХТМЛ елемената имају имплицитне улоге које можете користити за обављање ваших упита. Пронађите листу улога из МДН документи.
Додајте следеће у тест блок да бисте проверили рендеровање компоненте.
тест('Дугме Рендерс без пада', () => {
дати, пружити(<Вредност дугмета="Пријави се" />);
очекујте (сцреен.гетБиРоле('дугме')).тоБеИнТхеДоцумент()
});
Упаривач тоБеИнТхеДоцумент() проверава да ли елемент дугмета постоји у документу.
Очекујте да ће се дугме исправно приказати
Компонента дугмета прихвата вредност пропса и приказује је. Да би се правилно приказао, вредност коју приказује мора бити иста као она коју сте унели.
Направите нови тест блок и додајте следећи код.
тест('Дугме приказује исправно', () => {
дати, пружити(<Вредност дугмета="Пријавите се" />);
очекујте (сцреен.гетБиРоле('дугме')).тоХавеТектЦонтент("Пријавите се")
})
Имајте на уму да не морате да чистите након тестова када користите Реацт Тестинг Либрари. У прошлим верзијама, морали бисте ручно да извршите чишћење овако:
после сваког (чишћење)
Сада, библиотека за тестирање аутоматски искључује компоненте након сваког рендеровања.
Креирање тестова снимака
До сада сте тестирали понашање компоненте дугмета. Напишите тестове снимака да бисте проверили да ли излаз компоненте остаје исти.
Тестови снимка упоређују тренутни излаз са сачуваним излазом компоненте. На пример, ако промените стил компоненте дугмета, тест снимка ће вас обавестити. Можете или да ажурирате снимак тако да одговара промењеној компоненти или да поништите промене стила.
Тестови снимка су веома корисни кад год желите да се уверите да се ваш кориснички интерфејс неће неочекивано променити.
Тестирање снимка се разликује од јединичних тестова јер морате имати већ радни код да бисте направили снимак.
Користићете метод рендерера из пакета реацт-тест-рендерер нпм. Дакле, извршите следећи код да бисте га инсталирали.
нпм инсталирај реаговати-тест-рендерер
У Буттон.тест.јс напишите тест снимака на следећи начин:
тест('Снимак утакмица', () => {
цонст трее = рендерер.цреате(<Вредност дугмета="Пријавите се" />).тоЈСОН();
очекивати(дрво).тоМатцхСнапсхот();
})
Не постоје постојећи снимци за компоненту дугмета, тако да ће покретање овог теста креирати датотеку снимка поред тест датотеке:
Дугме
└─── __тестови__
│ │ Дугме.тестирања.јс
│ └─── __снимак__
│ │ Дугме.тест.јс.снап
│
└─── Дугме.јс
Сада, када покренете следећи тест, Реацт ће упоредити нови снимак који генерише са сачуваним.
Напишите тестове за најчешће коришћене компоненте
Овај водич вас је научио како да напишете ДОМ и тестове снимака у Реацт-у тестирањем компоненте дугмета. Писање тестова за све компоненте које креирате може бити заморно. Међутим, ови тестови вам штеде време које бисте потрошили на отклањање грешака у већ примењеном коду.
Не морате да постигнете 100% покривеност тестом, али се уверите да пишете тестове за своје најчешће коришћене и најважније компоненте.