Како тестирати Нект.јс апликације користећи Јест

Примарни циљ сваког развојног процеса је изградња апликација спремних за производњу. Да би се то постигло, неопходно је написати код који не само да испуњава функционалне захтеве већ и остаје стабилан и поуздан током времена. Тестирање служи као заштита, осигуравајући да апликације функционишу како се очекује чак и када се нова ажурирања праве током развоја.

Иако писање свеобухватних тестова који обухватају различите ивичне случајеве може потрајати доста времена, помаже да се проблеми обележе и реше пре него што стигну у производно окружење.

Тестирање Нект.јс апликација

Писање тестова је суштински и често потцењен аспект развоја робусних апликација. Лако је пасти у искушење слања кода директно у производњу, ослањајући се на уверење да сте „ви аутор кода, па мора да функционише!“

Међутим, овај приступ може довести до непредвиђених проблема и грешака у производним окружењима. Као резултат тога, усвајање приступа вођеног тестом развоја (ТДД) може помоћи да повећате ваше поверење у ваш код и минимизирате утрошено време

Шта је Јест?

Јест је популаран оквир за тестирање који нашироко користе различити ЈаваСцрипт оквири. Пружа скуп функција за тестирање као што су моћни покретач тестова, аутоматско исмевање и тестирање снимка.

У идеалном случају, ове функције су корисне у постизању свеобухватне покривености тестом и обезбеђивању поузданости ваше апликације широм различите врсте тестова.

Креирајте апликацију Нект.јс То-До

Сада, хајде да се удубимо у процес покретања јединичних тестова на Нект.јс апликацији користећи Јест. Међутим, пре него што почнете, креирајте Нект.јс пројекат и инсталирајте потребне зависности.

Да бисте започели, пратите ове кораке:

1. Креирајте нови Нект.јс пројекат тако што ћете покренути следећу команду у свом терминалу:

   нпк цреате-нект-апп@латест тест-туториал

2. Након креирања пројекта, идите у директоријум пројекта тако што ћете покренути:

   цд нектјс-тест-туториал

3. Инсталирајте потребне зависности као девДепенденциес покретањем следеће команде:

   нпм инсталл нпм инсталл --саве-дев јест @тестинг-либрари/реацт @тестинг-либрари/јест-дом јест-енвиронмент-јсдом

Са постављеним пројектом и инсталираним зависностима, сада сте спремни да направите Нект.јс апликацију и пишете јединичне тестове користећи Јест.

Креирајте компоненту задатака

У /src директоријум пројекта, отворите пагес/индек.јс датотеку, избришите постојећи шаблон Нект.јс код и додајте следећи код.

Прво направите следеће увозе и дефинишите две функције које ће управљати обавезама корисника: аддТодо функција и делетеТодо функција.

увоз { усеСтате } из"реаговати";
увоз стилова из"../стилес/Хоме.модуле.цсс";
извозУобичајенофункцијаКућа() {
конст [тодос, сетТодос] = усеСтате([]);
конст [невТодо, сетНевТодо] = усеСтате("");
конст аддТодо = () => {
ако (невТодо.трим() !== "") {
конст упдатедТодос = [...тодос, невТодо];
 сетТодос (упдатедТодос);
 сетНевТодо("");
 }
 };
конст делетеТодо = (индекс) => {
конст упдатедТодос = [...тодос];
 упдатедТодос.сплице (индекс, 1);
 сетТодос (упдатедТодос);
 };

Код користи усеСтате кука за иницијализацију и ажурирање променљивих стања: тодос и невТодо. Тхе аддТодо функција додаје нове обавезе на листу обавеза када улазна вредност није празна, док је делетеТодо функција уклања одређене обавезе са листе на основу њеног индекса.

Сада напишите код за ЈСКС елементе приказане у ДОМ-у претраживача.

повратак (


 типе="текст"
 цлассНаме={стилес.инпут}
 валуе={невТодо}
 дата-тестид="тодо-инпут"
 онЦханге={(е) => сетНевТодо (е.таргет.валуе)}
 />
"додати задатак">
 Додајте Тодо
 </button>
"тодо-лист">
 {тодос.мап((задатак, индекс) => (


 {урадити}
 </li>
 ))}
 </ul>
 {тодос.мап((задатак, индекс) => (


 онЦлицк={() => делетеТодо (индекс)}
 цлассНаме={стилес.буттон}
 дата-тестид={`делете-тодо-${индек}`}
 >
 Избриши
 </button>
 </div>
 ))}
 </div>
 );}

Писање тест случајева

Пре него што почнете да пишете тест случајеве, кључно је да конфигуришете Јест у складу са вашим специфичним захтевима за тестирање. Ово укључује креирање и прилагођавање јест.цонфиг.јс фајл, који служи као основа за ваше подешавање тестирања.

У основном директоријуму креирајте нови јест.цонфиг.јс фајл. Затим додајте следећи код да бисте конфигурисали Јест у складу са тим:

конст нектЈест = захтевају("следећи/шала");
конст цреатеЈестЦонфиг = нектЈест({
 дир: "./",
});
конст цустомЈестЦонфиг = {
 директоријуми модула: ["ноде_модулес", "/"],
 тест окружење: "јест-енвиронмент-јсдом",
};
модул.екпортс = цреатеЈестЦонфиг (цустомЈестЦонфиг);

На крају, отворите пацкаге.јсон датотеку и додајте нову скрипту под називом тест који ће извршити наредбу јест --ватцхАлл да покренете све тестне случајеве и пратите евентуалне промене.

Након ажурирања, ваше скрипте би требало да изгледају овако:

"скрипте": {
"дев": "следећи дев",
"градити": "следећа градња",
"почетак": "следећи почетак",
"влак": "следећа нит",
"тест": "јест --ватцхАлл"
 },

Са конфигурацијама на месту, наставите са писањем и извршавањем тестова.

Тестирање Нект.јс То-До апликације са Јестом

У основном директоријуму пројекта креирајте нову фасциклу под називом __тестови__. Јест ће потражити тест датотеке у овој фасцикли. Унутар ове фасцикле направите нову датотеку под називом индек.тест.јс.

Прво направите следеће увозе.

увоз Кућа из"../срц/пагес/индек";
увоз„@тестинг-либрари/јест-дом“;
увоз { фиреЕвент, рендер, сцреен, ваитФор, ацт } из„@тестинг-либрари/реацт“;

Напишите тест да видите да ли се сви елементи правилно приказују:

описати („Тодо апликација“, () => {
 то(„рендерује апликацију задатака“, () => {
 дати, пружити(<Кућа />);

 очекујте (сцреен.гетБиТестИд("тодо-инпут")).тоБеИнТхеДоцумент();
 очекујте (сцреен.гетБиТестИд("додати задатак")).тоБеИнТхеДоцумент();
 });
});

Тестни случај потврђује да ли се апликација То-До и њени елементи правилно приказују. Унутар тест кућишта, Кућа компонента се приказује помоћу дати, пружити функцију из библиотеке за тестирање.

Затим се изводе тврдње помоћу очекивати функција како би се осигурало да специфични елементи са тест ИД-овима, као што су задатак-унос присутни су у приказаном излазу. Ако се ови елементи нађу у ДОМ-у, тест је прошао; у супротном, не успева.

Сада покрените следећу команду да бисте извршили тест.

нпм рун тест

Требало би да видите сличан одговор ако тест прође.

Тестирање различитих радњи и симулација грешака

Опишите ове тест случајеве да бисте проверили функционалност функција Адд То-До и Делете То-До.

Започните писањем тест случаја за функцију Адд То-До.

 то("додаје задатак", асинц () => {
 дати, пружити(<Кућа />);

конст тодоИнпут = сцреен.гетБиТестИд("тодо-инпут");
конст аддТодоБуттон = сцреен.гетБиТестИд("додати задатак");
конст тодоЛист = сцреен.гетБиТестИд("тодо-лист");
чекати глумити (асинц () => {
 фиреЕвент.цханге (тодоИнпут, { циљ: { вредност: "Нови Тодо" } });
 аддТодоБуттон.цлицк();
 });
чекати Чекај(() => {
 очекуј (тодоЛист).тоХавеТектЦонтент("Нови Тодо");
 });
 });

Исечак кода изнад симулира интеракцију корисника тако што укуцате у поље за унос и кликнете на дугме за додавање. Затим, користећи лажну улазну вредност задатака, проверава да ли је улазна вредност успешно додата на листу обавеза.

Сачувајте датотеку и проверите терминал. Тест би требало аутоматски да се поново покрене и одјави сличне резултате теста.

Да бисте симулирали грешку у тесту, измените ИД теста дугмета за додавање и поново покрените тест. Са овим ажурирањем, тест би требало да не успе и да се одјави са поруком о грешци која указује на одређену грешку на коју је наишла.

У идеалном случају, у већој бази кода са више сарадника који праве честе промене, тестирање игра кључну улогу у идентификацији потенцијалних грешака које могу довести до кварова система. Тестирањем можете лако да означите недоследности, као што је приказана горе, и да их решите током развоја.

На крају, напишите пробни случај за функцију Делете То-До.

 то("брише задатак", асинц () => {
 дати, пружити(<Кућа />);

конст тодоИнпут = сцреен.гетБиТестИд("тодо-инпут");
конст аддТодоБуттон = сцреен.гетБиТестИд("додати задатак");

 фиреЕвент.цханге (тодоИнпут, { циљ: { вредност: "Тодо 1" } });
 фиреЕвент.цлицк (аддТодоБуттон);

конст делетеТодоБуттон = сцреен.гетБиТестИд("делете-тодо-0");
 фиреЕвент.цлицк (делетеТодоБуттон);

конст тодоЛист = сцреен.гетБиТестИд("тодо-лист");
чекати Чекај(() => {
 очекују (тодоЛист).тоБеЕмптиДОМЕлемент();
 });
 });

Опет, проверава да ли је задатак успешно избрисан. Сачувајте датотеку да бисте извршили тест.

Јединично тестирање користећи Јест

Овај водич вам је пружио знање за писање и извршавање једноставних јединичних тестова, користећи компоненту То-До као пример. Да бисте осигурали стабилност и поузданост основних функција ваше апликације и смањили шансе за неочекиваних проблема у производним окружењима, важно је дати приоритет писању тестова за свој кључ компоненте.

Штавише, можете побољшати свој приступ тестирању тако што ћете укључити тестове снимака и тестове од краја до краја.