jest configuration debugging jest based tests
Obteniu més informació sobre Jest Config, depuració i comparació de Jest amb altres marcs de proves de JavaScript específicament Jest vs Mocha i Jest vs Jasmine:
En aquest Sèrie de bromes informatives , ho vam explorar tot Provant aplicacions, simulacres i espies React mitjançant Jest al nostre últim tutorial.
En aquest tutorial, aprendrem més sobre els fitxers Jest Config i veurem com podeu depurar proves Jest per resoldre problemes d'una o diverses proves.
També explorarem algunes de les opcions més utilitzades al fitxer Jest Config que es podrien configurar independentment en un projecte o les que es poden afegir com a part de la configuració del package.json.
Utilitzarem Visual Studio Code per escriure les nostres proves Jest i utilitzaríem una extensió o un complement a VS Code per habilitar el suport de depuració de proves Jest.
A més, compararem els diferents marcs de proves de Javascript com Mocha i Jasmine amb Jest i comprendreem els avantatges i els inconvenients dels altres.
Què aprendreu:
Hi ha Config
La configuració de broma es pot especificar de 3 maneres
- A través d’una clau del fitxer package.json.
- Mitjançant un fitxer jest.config.js: fitxer de configuració escrit com a mòdul.
- A través d’un JSON que es podria utilitzar amb l’opció com a senyalador de configuració.
Amb tots els enfocaments anteriors, podeu obtenir el mateix resultat. Vegem el primer pas, és a dir, afegir una configuració de Jest mitjançant una clau del fitxer package.json.
Al fitxer package.json existent, afegiu una clau nova anomenada 'broma'. Això no és res més que un conjunt de parells clau-valor en format JSON. Totes les opcions de configuració relacionades amb Jest es poden afegir a aquesta secció del fitxer package.json.
A continuació es detallen les opcions de configuració més utilitzades.
# 1) Relació amb la cobertura
recollirCobertura, coberturaLindar, coberturaInformes, coberturaDirectori - Aquestes són les opcions més utilitzades. La cobertura és una mètrica important i assegura que el codi es prova amb un llindar predeterminat.
Una explicació detallada de cadascun d’ells és la següent:
# 1) collectCoverage: Aquesta opció s’utilitza per especificar si volem que el corredor de proves Jest recopili informació sobre la cobertura o no. Quan es defineix com a veritable, el corredor Jest recopila la informació de cobertura. Amb aquesta opció, la cobertura es recollirà i es mostrarà a la consola al final de l'execució de la prova, tal com es mostra a continuació.
# 2) Llindar de cobertura: Aquest paràmetre ens permet especificar els valors llindars de la cobertura en termes percentuals. Això és molt útil quan l’organització o l’equip volen adherir-se a un valor mínim de cobertura sense el qual no es pot transmetre ni combinar cap codi a la branca principal.
Vegem com es pot utilitzar.
La cobertura es pot especificar a nivell global, a nivell de fitxer o a qualsevol altra expressió regular. Quan s'especifica a nivell global, tot el llindar especificat hauria de coincidir per a tots els fitxers combinats del projecte.
'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 } } També és possible especificar la cobertura a nivell de fitxer canviant 'global' a nom de fitxer o expressió regular. Les configuracions de llindar poden variar en funció del requisit.
'coverageThreshold': { './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } } # 3) Reporters de cobertura: Aquesta configuració s'utilitza per especificar quin informador voleu utilitzar per generar l'informe de cobertura. Hi ha molts reporters disponibles com a paquets NPM disponibles que es podrien utilitzar per generar un informe de cobertura al final de l'execució de la prova.
# 4) Directori de cobertura: Aquesta configuració permet a l'usuari especificar el directori on s'han de desar o mantenir els informes de cobertura després de crear-los.
A continuació es mostra un exemple combinat d’utilitzar tots els paràmetres de configuració relacionats amb la cobertura.
'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/' } Aquí hem utilitzat 2 reporters de cobertura, és a dir, lcov i text. Lcov és la cobertura de línia de Linux i està present per defecte i el reporter de 'text' significa que la sortida de cobertura també es mostrarà a la consola. L'informe de cobertura es generarà al camí especificat al paràmetre 'Directori de cobertura'.
# 2) Mock Related
Els simulacres s’utilitzen molt durant les proves amb Jest. Les dues opcions de configuració següents permeten una fàcil configuració i neteja de simulacions.
- autoMocks: Quan s'estableix en true, això es burlarà de tots els mòduls que s'importen a la prova per defecte.
- clearMocks: Quan s'estableix en true, s'esborraran totes les configuracions / mòduls burlats després de cada prova, de manera que cada prova comenci amb un estat nou. Això també es pot aconseguir mitjançant el mètode testCleanup o el mètode 'després', però tenir-lo en configuració ho fa encara més fàcil.
# 3) Proves relacionades
# 1) TestTimeout: Aquesta configuració s'utilitza per proporcionar una configuració de temps d'espera difícil per a les proves en mil·lisegons. Qualsevol prova que faci més que aquest llindar configurat es marcarà fallida a causa de l'excepció de temps d'espera.
'jest' { 'testTimeout': 100 } #2) Globals: Aquesta configuració s’utilitza per establir variables globals que haurien d’estar disponibles amb cada prova.
'jest' { 'globals': { 'globalVar': 'test global variable!' } } Intentem utilitzar una variable global a la prova i comprovem si funciona com s’esperava.
describe('Calculator tests', () => { test('add 2 numbers', () => { // arrange & act const val = mathOps.sum(3,4) console.log(globalVar) // assert expect(val).toBe(7) }) Després d’executar aquesta prova, s’hauria de registrar el valor de globalVar.
quin sistema operatiu he d'utilitzar
Comprovar aquí per obtenir una llista exhaustiva de totes les opcions de configuració.
Video Tutorial sobre la configuració de IS
Depuració mitjançant Jest
En aquesta secció, intentarem entendre com podem depurar proves escrites basades en Jest.
Aplicarem i comprendreem dues maneres diferents de depurar les proves Jest.
- El depurador natiu de Node i, a continuació, utilitzeu Chrome Inspector per depurar les proves.
- Utilitzar la configuració de depuració de Visual Studio Code per depurar les proves dins del mateix editor de Visual Studio Code. Aquesta és la manera més utilitzada de depurar, ja que Visual Studio Code és l’editor predeterminat que s’elabora per a la majoria del desenvolupament de Javascript actualment.
A continuació, s’explica detalladament cadascun d’aquests enfocaments.
# 1) Ús del depurador natiu de Node
Per utilitzar el depurador natiu de Node JS, hem d’inserir la paraula clau ‘depurador’ a la prova, on volem col·locar el punt d’interrupció.
Un cop l'executor de la prova es troba amb el fitxer depurador ordre, posa en pausa l'execució i, si adjuntem eines de depuració de Chrome, podem depurar el codi de prova (així com la funció que es prova) mitjançant les eines de Chrome.
El navegador Chrome és un requisit previ aquí per utilitzar el depurador natiu de Node.
Seguiu els passos següents.
# 1) Afegiu una paraula clau de depurador a la prova, és a dir, al punt on voleu que la prova arribi al punt de ruptura, inseriu l'ordre 'depurador'
# 2) Executeu la prova amb el senyalador –inspect-brk.
Utilitzeu l'ordre següent per executar la prova en mode de punt d'interrupció.
/usr/local/bin/node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand# 3) Connecteu el depurador del node a Chrome. Ara, al navegador Chrome, aneu a chrome: // inspeccioneu i connecteu-vos a l’oient de destinació que s’ha creat pel pas anterior.
# 4) Continueu l'execució i veureu que el punt d'interrupció arriba a l'inspector de depurador de Chrome i podeu depurar l'estat de la pila de trucades i de l'objecte al mateix depurador de Chrome.
Aquest enfocament de depuració de proves Jest és correcte, però no és molt fàcil d'utilitzar, ja que heu de canviar de l'editor de codi a Chrome i viceversa, cosa que provoca moltes friccions. A la propera secció, veurem les formes de configurar el depurador dins del propi editor de Visual Studio Code.
# 2) Utilitzar la configuració de depuració de VS Code
# 1) Seleccioneu la secció Debug / Run del codi Visual Studio al tauler esquerre.
# 2) Ara, actualitzarem la configuració de depuració per a proves de broma. Per fer-ho, afegiu una nova configuració seleccionant l'opció de menú.
# 3) Un cop seleccionada l'opció Afegeix configuració, s'obrirà el fitxer `launch.json` amb el contingut per defecte al tauler de l'editor. Elimineu el contingut per defecte i copieu el contingut següent per crear una configuració de depuració per a les proves 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) Deseu la configuració de contingut afegida recentment que s'utilitzarà per depurar les proves Jest. Si llegiu la configuració amb atenció, és similar al que vam fer quan vam intentar connectar-nos al depurador de nodes de les eines per a desenvolupadors de Chrome mitjançant l’ordre.
--inspect-brk ./node_modules/jest/bin/jest.js --runInBandL’avantatge de tenir configuració aquí és que les proves s’executaran / depuraran com a part del propi editor (en aquest cas és VSCode) i no necessitem connectar-nos a cap aplicació externa.
# 5) Un cop creada la configuració de depuració, ara podeu afegir punts d'interrupció a les proves i executar-la mitjançant aquesta configuració RUN. Això assegurarà que la prova s’atura als punts d’interrupció i pugui depurar els valors, l’estat de l’objecte al punt d’interrupció del fitxer de prova real.
Es poden afegir punts d'interrupció fent clic a prop dels números de línia dels fitxers de codi.
# 6) Un cop afegit el punt d’interrupció, podem seleccionar la configuració Executa que hem afegit al pas # 3 per tal d’executar / depurar la prova.
# 7) En seleccionar / fer clic al botó Executa, hauríeu de poder veure que l'execució arriba al punt d'interrupció que es va col·locar i podeu obtenir més detalls, com ara valors d'entorn / variables, traça de pila, etc.
Els botons de control de flux de punts d’interrupció / codi es poden utilitzar per moure’s al següent punt d’interrupció o moure’s dins de la funció per obtenir més detalls.
Vídeo Tutorial Ell ésDepuració
Hi ha Mocha Vs Jasmine
A la secció següent, compararem Jest vs Mocha i Jest vs Jasmine en diferents paràmetres i farem comparacions de característiques com ara la prova d’instantànies, la facilitat de configuració i les capacitats de diferents frameworks.
| Paràmetre | És | Mocha | Gessamí |
|---|---|---|---|
| S'admeten tipus de proves | S'utilitza principalment per a proves d'unitats. | Proves d’unitat | Proves d’unitats i proves E2E. |
| Proves d’instantànies | Totalment compatible: específicament utilitzat per als components React, Jest admet fer instantànies d’un component i utilitzar-lo per comparar la sortida de prova amb l’estructura de components desada. Les instantànies són una bona manera de garantir que la interfície d’usuari no canviï de manera inesperada. | Sense suport | Sense suport |
| Assercions i coincidències | Utilitzeu la biblioteca expect.js per a coincidències. | Suport per al mòdul assert integrat de Node i també pot incloure altres biblioteques d’assercions. | En afirmacions construïdes |
| Burleta | Suport totalment integrat per a Mock and Stubs a Jest. | No hi ha cap suport integrat per burlar-se o esborrar-se. Es pot utilitzar amb altres biblioteques com Sinon per donar suport a Mocking. | Suport limitat incorporat mitjançant spyOn. Es pot integrar amb altres biblioteques. |
| Velocitat d'execució | 4x Les proves de broma estan aïllades a la seva pròpia caixa de sorra. Per tant, les proves Jest s’estan executant bàsicament en paral·lel, cosa que proporciona una millora considerable en els temps d’execució. | x No admet l'execució en paral·lel de proves. | x No admet l'execució en paral·lel de proves. |
| Configuració i configuració | Molt fàcil: es necessita configuració zero. | ||
| Mode d’execució de la prova | Sense cap | Sense cap | Sense cap |
| Resultat de prova i context | Genera un context de postexecució ric: Jest proporciona un context de prova detallat per aprofundir en allò que ha causat un fracàs, garantint així una depuració fàcil. | La sortida de prova no és molt llegible i fa que la depuració sigui una mica difícil. | |
| Depuració | El suport per a depuradors de nodes natius també es pot utilitzar per depurar en editors com ara Visual Studio Code mitjançant una configuració de llançament independent. | Admet el depurador de nodes natiu. | Pot utilitzar el corredor de proves de karma per iniciar proves a Chrome i depurar-les. |
| Cobertura del codi | Jest té suport integrat per a la cobertura del codi. La configuració de cobertura es podria especificar a la configuració de Jest i es podrien generar els informes amb cada execució de la prova. | No hi ha suport integrat. Proporciona suport a biblioteques externes per generar informes de cobertura. | Igual que Mocha |
| Estil de proves | BDD Tots els tres marcs admeten proves que s’escriuen com un conjunt d’especificacions o especificacions que les facin més llegibles. | BDD | BDD |
Conclusió
En aquest tutorial, hem conegut les diferents maneres en què podeu depurar les proves Jest a Visual Studio Code o a Chrome Inspector mitjançant el depurador natiu del Node.
També hem explorat les opcions de configuració més utilitzades al fitxer de configuració Jest. La configuració de broma ajuda a aconseguir moltes coses com ara la cobertura del codi, els informes HTML, la configuració de comportaments simulats, la configuració de variables globals, etc.
PREV Tutorial | PRIMER Tutorial
Lectura recomanada
- Tutorial Jest: proves d'unitats de JavaScript mitjançant Jest Framework
- Com provar les aplicacions de React mitjançant Jest Framework
- Tutorial Jasmine Framework que inclou Jasmine Jquery amb exemples
- Versions distribuïdes: configuració de l'esclau mestre Jenkins
- Tècniques de depuració a Selenium: punts d'interrupció, mode de depuració i molt més
- Tutorial de proves de configuració amb exemples
- Com es configura el marc de proves Node.js: tutorial de Node.js
- 25 millors marcs i eines de prova de Java per a proves d'automatització (part 3)