jest configuration debugging jest based tests
Dozviete sa viac o konfigurácii Jest, ladení a porovnaní Jestu s inými rámcami na testovanie JavaScriptu, konkrétne Jest vs Mocha & Jest vs Jasmine:
V tomto Informatívna séria Jest , preskúmali sme všetko okolo Testovanie reagujúcich aplikácií, simulov a špiónov pomocou aplikácie Jest v našom poslednom návode.
V tomto tutoriáli sa dozvieme viac o súboroch Jest Config a uvidíme, ako môžete skutočne ladiť testy Jest na riešenie problémov s jedným alebo viacerými testami.
Preskúmame tiež niektoré z bežne používaných možností v súbore Jest Config, ktoré je možné nastaviť nezávisle v projekte, alebo tie, ktoré je možné pridať ako súčasť samotnej konfigurácie package.json.
Na písanie našich testov Jest budeme používať kód Visual Studio Code a vo VS Code by sme použili rozšírenie alebo doplnok na povolenie ladiacej podpory pre testy Jest.
Okrem toho porovnáme rôzne testovacie rámce Javascript ako Mocha a Jasmine s Jest a pochopíme výhody a nevýhody každého iného.
Čo sa dozviete:
Existuje Config
Konfiguráciu Jest je možné určiť 3 spôsobmi
- Prostredníctvom kľúča v súbore package.json.
- Prostredníctvom súboru jest.config.js - konfiguračný súbor napísaný ako modul.
- Prostredníctvom kódu JSON, ktorý je možné použiť s možnosťou ako príznak –config.
Pomocou všetkých vyššie uvedených prístupov môžete dosiahnuť rovnaký výsledok. Pozrime sa na prvý krok - teda pridanie konfigurácie Jest pomocou kľúča v súbore package.json.
Do existujúceho súboru package.json pridajte nový kľúč s názvom „jest“. Toto nie je nič iné ako sada párov kľúč - hodnota vo formáte JSON. Všetky možnosti konfigurácie týkajúce sa Jestu je možné ďalej pridať do tejto sekcie v súbore package.json.
Najčastejšie používané možnosti konfigurácie sú uvedené nižšie.
# 1) Súvisiace s pokrytím
collectCoverage, coverageThreshold, coverageReporters, coverageDirectory - Toto sú najbežnejšie používané možnosti. Pokrytie je dôležitou metrikou a zaisťuje, že sa kód testuje na vopred nastavenú hranicu.
html5 css3 otázky a odpovede na pohovor
Podrobné vysvetlenie každého z nich je nasledovné:
# 1) collectCoverage: Táto možnosť sa používa na určenie, či chceme, aby testovací bežec Jest zhromažďoval informácie o prekrytí alebo nie. Ak je nastavená na hodnotu true, bežec Jest zhromažďuje informácie o pokrytí. Pri tejto možnosti sa pokrytie zhromaždí a zobrazí na konzole na konci vykonania testu, ako je uvedené nižšie.
# 2) coverageThreshold: Toto nastavenie nám umožňuje určiť prahové hodnoty pokrytia v percentách. To je veľmi užitočné, keď chce organizácia alebo tím dodržiavať určitú minimálnu hodnotu pokrytia, bez ktorej nie je možné tlačiť alebo zlúčiť žiadny kód do hlavnej pobočky.
Pozrime sa, ako sa to dá využiť.
Pokrytie je možné určiť na globálnej úrovni, úrovni súborov alebo ľubovoľnom inom regulárnom výraze. Ak je zadaná na globálnej úrovni, všetky zadané prahové hodnoty by sa mali zhodovať pre všetky súbory v projekte.
'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 } }
Je tiež možné určiť pokrytie na úrovni súboru zmenou „globálneho“ na názov súboru alebo regulárny výraz. Konfigurácie prahových hodnôt sa môžu líšiť v závislosti od požiadavky.
'coverageThreshold': { './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } }
# 3) reportéri: Táto konfigurácia sa používa na určenie toho, aký reportér chcete použiť na vygenerovanie správy o pokrytí. Existuje veľa existujúcich reportérov ako balíkov NPM, ktoré je možné použiť na vygenerovanie správy o pokrytí na konci vykonania testu.
# 4) coverageDirectory: Toto nastavenie umožňuje používateľovi určiť adresár, do ktorého sa majú správy o pokrytí ukladať alebo pretrvávať po vytvorení.
Ďalej je uvedený kombinovaný príklad použitia všetkých konfiguračných nastavení týkajúcich sa pokrytia.
ako otvoriť súbory jar v systéme Windows 10
'jest':{ 'collectCoverage':true, 'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 }, './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } }, 'coverageReporters': ( 'lcov','text' ), 'coverageDirectory': './output/code-coverage/' }
Tu sme použili 2 reportérov pokrytia, tj. Lcov a text. Lcov je pokrytie liniek Linuxom a je predvolene prítomné a reportér „text“ znamená, že výstup pokrytia sa zobrazí aj na konzole. Správa o pokrytí sa vygeneruje cestou určenou v nastavení „coverageDirectory“.
# 2) Vysmievanie sa
Počas testovania s Jestom sa často používajú simulácie. Obe nižšie uvedené možnosti konfigurácie umožňujú ľahkú konfiguráciu a odstránenie falošných správ.
- autoMocks: Ak je nastavená hodnota true, predvolene sa zosmiešnia všetky moduly importované v teste.
- clearMocks: Ak je nastavená hodnota true, po každom teste sa vymažú všetky vysmievané nastavenia / moduly, takže každý test začne v novom stave. To sa dá dosiahnuť aj metódou testCleanup alebo „after“, ale mať ich v konfigurácii to ešte uľahčuje.
# 3) Súvisiace testy
# 1) testTimeout: Táto konfigurácia slúži na zabezpečenie tvrdého časového limitu pre testy v milisekundách. Akýkoľvek test, ktorý bude trvať dlhšie ako tento nakonfigurovaný limit, bude označený ako neúspešný z dôvodu výnimky časového limitu.
'jest' { 'testTimeout': 100 }
# 2) Globálne: Táto konfigurácia sa používa na nastavenie globálnych premenných, ktoré by mali byť k dispozícii pri každom teste.
'jest' { 'globals': { 'globalVar': 'test global variable!' } }
Skúsme v teste použiť globálnu premennú a zistíme, či funguje podľa očakávaní.
describe('Calculator tests', () => { test('add 2 numbers', () => { // arrange & act const val = mathOps.sum(3,4) console.log(globalVar) // assert expect(val).toBe(7) })
Po vykonaní tohto testu by sa mala zaznamenať hodnota globalVar.
Skontrolujte tu pre vyčerpávajúci zoznam všetkých možností konfigurácie.
Videonávod o konfigurácii IS
Ladenie pomocou Jest
V tejto časti sa pokúsime pochopiť, ako môžeme ladiť testy napísané na základe Jest.
Použijeme a pochopíme 2 rôzne spôsoby, ako môžeme ladiť testy Jest.
- Natívny ladiaci program spoločnosti Node a potom na ladenie testov použiť prehliadač Chrome Inspector.
- Používanie konfigurácie ladenia kódu Visual Studio Code na ladenie testov v samotnom editore kódu Visual Studio Code. Toto je najbežnejšie používaný spôsob ladenia, pretože Visual Studio Code je predvolený editor, ktorý si môžete zvoliť pre väčšinu vývoja Javascriptov v súčasnosti.
Každý z týchto prístupov je podrobne vysvetlený nižšie.
# 1) Používanie natívneho debuggeru od Node
Aby sme mohli použiť natívny debugger Node JS, musíme do testu vložiť kľúčové slovo „debugger“, kam chceme umiestniť zarážku.
Len čo skúšobný exekutor narazí na debugger príkaz pozastaví vykonávanie a ak pripojíme chrome debugger nástroje, môžeme pomocou nástrojov Chrome ladiť testovací kód (rovnako ako testovanú funkciu).
Prehliadač Chrome je tu nevyhnutnou podmienkou na použitie natívneho debuggeru od Node.
Postupujte podľa nasledujúcich krokov.
# 1) Pridajte kľúčové slovo debugger do testu, tj. V mieste, kde chcete, aby test narazil na bod prerušenia, vložte príkaz „debugger“
#dva) Vykonajte test pomocou príznaku –inspect-brk.
Pomocou nasledujúceho príkazu vykonajte test v režime prerušenia.
/usr/local/bin/node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand
# 3) Pripojte ladiaci program uzla v prehliadači Chrome. Teraz v prehliadači Chrome prejdite na chrome: // inspect a pripojte sa k cieľovému poslucháčovi, ktorý bol vytvorený pomocou vyššie uvedeného kroku.
# 4) Pokračujte v spustení a uvidíte, že bod prerušenia zasiahne inšpektor chrome debugger a vy môžete ladiť zásobník hovorov a stav objektu v samotnom chrome debuggeri.
implementácia dvojnásobne prepojeného zoznamu c ++
Tento prístup ladenia testov Jest je v poriadku, ale nie veľmi užívateľsky prívetivý, pretože je potrebné neustále prechádzať z editora kódu do prehliadača Chrome a naopak, čo spôsobuje veľké trenie. V nadchádzajúcej časti uvidíme spôsoby konfigurácie debuggeru v samotnom editore kódu Visual Studio.
# 2) Používanie konfigurácie ladenia VS Code
# 1) Na ľavom paneli vyberte časť Debug / Spustiť kód Visual Studio.
#dva) Teraz aktualizujeme konfiguráciu ladenia pre žertovné testy. Ak to chcete urobiť, pridajte novú konfiguráciu výberom možnosti ponuky.
# 3) Po výbere možnosti pridať konfiguráciu sa na paneli editora otvorí súbor `launch.json` s predvoleným obsahom. Odstráňte predvolený obsah a skopírujte obsah nižšie, aby ste vytvorili konfiguráciu ladenia pre testy Jest.
{ 'version': '0.2.0', 'configurations': ( { 'name': 'Debug Jest Tests', 'type': 'node', 'request': 'launch', 'runtimeArgs': ( '--inspect-brk', '${workspaceRoot}/node_modules/jest/bin/jest.js', '--runInBand' ), 'console': 'integratedTerminal', 'internalConsoleOptions': 'neverOpen', 'port': 9229 } ) }
# 4) Uložte si novo pridanú konfiguráciu obsahu, ktorá by sa použila na ladenie testov Jest. Ak si konfiguráciu prečítate pozorne, je to podobné tomu, čo sme vykonali, keď sme sa pomocou príkazu pokúsili pripojiť k ladiacemu programu uzlov v nástrojoch pre vývojárov prehliadača Chrome.
--inspect-brk ./node_modules/jest/bin/jest.js --runInBand
Výhodou konfigurácie tu je, že testy budú bežať / ladiť ako súčasť samotného editora (v tomto prípade je to VSCode) a nemusíme sa pripájať k žiadnej externej aplikácii.
# 5) Po vytvorení konfigurácie ladenia môžete teraz k testom pridať body prerušenia a spustiť ich pomocou tejto konfigurácie RUN. Takto zabezpečíte, že sa test zastaví na hraničných bodoch a vy budete môcť ladiť hodnoty, stav objektu v hraničnom bode v skutočnom testovacom súbore.
Hraničné hodnoty je možné pridať kliknutím do blízkosti čísel riadkov v súboroch kódu.
# 6) Po pridaní bodu prerušenia môžeme vybrať konfiguráciu Spustiť, ktorú sme pridali v kroku č. 3, aby sme vykonali / ladili test.
# 7) Po výbere / kliknutí na tlačidlo Spustiť by ste mali vidieť, že vykonanie zasiahne zarážku, ktorá bola umiestnená, a môžete získať ďalšie podrobnosti, ako sú hodnoty prostredia / premenných, trasovanie zásobníka atď.
Tlačidlá na riadenie toku bodu prerušenia / kódu je možné použiť na presun na ďalší bod prerušenia alebo na presunutie sa do vnútra funkcie pre ďalšie podrobnosti.
Výukový program Video JELadenie
Je tu Mocha vs. Jasmine
V nasledujúcej časti porovnáme Jest vs Mocha a Jest vs Jasmine na základe rôznych parametrov a porovnaní funkcií, ako je napríklad testovanie snímok, ľahká konfigurácia a možnosti rôznych rámcov.
Parameter | Je | Mocha | Jazmín |
---|---|---|---|
Podporované typy testovania | Väčšinou sa používa na jednotkové testovanie. | Testovanie jednotky | Testovanie jednotiek a E2E. |
Skúška momentky | Plne podporované - Jest špeciálne používaný pre komponenty React, podporuje vytváranie snímok komponentu a jeho použitie na porovnanie výstupov testu s uloženou štruktúrou komponentov. Snímky sú skvelým spôsobom, ako zabezpečiť, aby sa používateľské rozhrania neočakávane nezmenili. | Žiadna podpora | Žiadna podpora |
Tvrdenia a zhody | Pre porovnávače použite knižnicu expect.js. | Podpora pre vstavaný asertovací modul Node a môže obsahovať aj ďalšie knižnice tvrdení. | V zabudovaných tvrdeniach |
Posmievanie sa | Plne zabudovaná podpora pre Mocks a Stubs in Jest. | Nie vstavaná podpora pre posmech alebo pichanie. Môže byť použitý s inými knižnicami ako Sinon na podporu Mocking. | Zabudovaná obmedzená podpora pomocou spyOn. Môže sa integrovať s inými knižnicami. |
Rýchlosť vykonania | 4x Testy Jest sú izolované vo vlastnom pieskovisku. Testy Jest teda v podstate prebiehajú paralelne, vďaka čomu poskytujú značné zlepšenie časov vykonania. | X Nepodporuje paralelné vykonávanie testov. | X Nepodporuje paralelné vykonávanie testov. |
Konfigurácia a nastavenie | Veľmi ľahké - je nutná nulová konfigurácia. | ||
Spôsob vykonania skúšky | Bezhlavý | Bezhlavý | Bezhlavý |
Výstup testu a kontext | Generuje bohaté vykonanie kontextu po spustení - Jest poskytuje podrobný kontext testu, ktorý umožňuje hlbšie preskúmať, čo spôsobilo zlyhanie, a tým zaisťuje ľahké ladenie. | Testovací výstup nie je príliš čitateľný a ladenie je trochu náročné. | |
Ladenie | Podporu natívnych ladiacich uzlov je možné použiť aj na ladenie v editoroch, ako je Visual Studio Code, prostredníctvom samostatnej konfigurácie spustenia. | Podporuje natívny debugger uzlov. | Môže použiť testovací program na karmy na spustenie testov v prehliadači Chrome a ladenie. |
Pokrytie kódu | Jest má zabudovanú podporu pre pokrytie kódom. Konfiguráciu pokrytia je možné určiť v konfigurácii Jest a správy je možné generovať pri každom vykonaní testu. | Žiadna zabudovaná podpora. Poskytuje podporu pre externé knižnice na generovanie správ o pokrytí. | Rovnako ako Mocha |
Štýl testovania | BDD Všetky tri rámce podporujú testy, ktoré majú byť napísané ako súbor špecifikácií alebo špecifikácií, vďaka ktorým sú čitateľnejšie. | BDD | BDD |
Záver
V tomto tutoriáli sme sa dozvedeli o rôznych spôsoboch ladenia testov Jest v rámci Visual Studio Code alebo v prehliadači Chrome pomocou natívneho debuggeru uzla.
Preskúmali sme tiež bežne používané možnosti konfigurácie v konfiguračnom súbore Jest. Konfigurácia Jest pomáha dosiahnuť veľa vecí, ako je pokrytie kódu, správy Html, nastavenie falošného správania, nastavenie globálnych premenných atď.
Výukový program PREV | PRVÝ výukový program
Odporúčané čítanie
- Výukový program Jest - Testovanie jednotky JavaScript pomocou rámca Jest
- Ako testovať reakcie aplikácií pomocou Jest Framework
- Jasmine Framework Tutorial Vrátane Jasmine Jquery s príkladmi
- Distribuované zostavy: Konfigurácia Jen slave Master Slave
- Techniky ladenia v seléne: hraničné body, režim ladenia a ďalšie
- Výukový program na testovanie konfigurácie s príkladmi
- Ako nastaviť testovací rámec Node.js: Výukový program Node.js
- 25 najlepších rámcov a nástrojov na testovanie Java pre automatizované testovanie (3. časť)