Menú

Tutorial Jest: proves d'unitats de JavaScript mitjançant Jest Framework

  • Principal
  • Altres
  • Tutorial Jest: proves d'unitats de JavaScript mitjançant Jest Framework

jest tutorial javascript unit testing using jest framework

Proveu El Nostre Instrument Per Eliminar Problemes

En aquest tutorial de Jest, coneixerem diverses funcions de Jest, Jest Matchers i com utilitzar el framework Jest per a la prova d’unitat de JavaScript:

Jest és un marc de proves de Javascript construït per Facebook.

Està dissenyat principalment per a aplicacions basades en React (que també el crea Facebook), però es podria utilitzar per escriure escenaris d’automatització de qualsevol base de codi basada en Javascript.

En aquest tutorial de proves de Jest, coneixerem diverses funcions de Jest, els seus aparells i veurem com podem utilitzar Jest amb un exemple extrem a extrem. També explorarem la cobertura del codi mitjançant Jest.

Hi ha un tutorial

Llista de tutorials d'aquesta sèrie JEST

Tutorial # 1: Jest Tutorial: proves d'unitats de JavaScript amb Jest Framework
Tutorial # 2: Com provar React Apps amb Jest Framework
Tutorial # 3: Configuració de broma i depuració de proves basades en bromes

Què aprendreu:

Introducció a les proves de broma

A continuació es detallen alguns dels avantatges / característiques de Jest:

  1. Es requereix configuració zero.
  2. Ràpid: Les proves de broma s’executen en paral·lel; al seu torn, això redueix considerablement el temps d’execució de la prova.
  3. Cobertura de codi integrada: Jest admet la cobertura de codi de manera immediata: aquesta és una mètrica molt útil per a totes les canonades de lliurament basades en CI i l'eficàcia general de les proves d'un projecte.
  4. Proves aïllades i de sorra: Cada prova Jest s'executa en el seu propi sandbox, cosa que garanteix que no hi hagi dues proves que puguin interferir o impactar-se.
  5. Potent suport de burla: Les proves de broma admeten tot tipus de burles, ja siguin burles funcionals, temporitzadores o burles de trucades d'API individuals.
  6. Suporta proves de captures de pantalla: Les proves instantànies són rellevants des de la perspectiva React. Jest admet la captura d’una instantània del component de reacció que s’està provant; això es pot validar amb la sortida real del component. Això ajuda molt a validar el comportament del component.

Jest Framework per a la prova d’unitat de JavaScript

En aquesta secció, veurem un exemple extrem a extrem per escriure proves utilitzant el marc JEST per a una funció Javascript simple. En primer lloc, vegem com instal·lar el framework JEST al nostre projecte

Instal·lació IS

Jest és simplement un paquet de nodes i es pot instal·lar mitjançant qualsevol gestor de paquets basat en nodes. Exemple, npm o filats.

Vegem algunes ordres de mostra que es poden utilitzar per instal·lar el paquet Jest.

yarn add --dev jest npm install --save-dev jest

Per instal·lar el mòdul Jest a nivell mundial, només podeu utilitzar el senyalador ‘-g’ juntament amb l’ordre npm. Això us permetrà utilitzar les ordres Jest directament sense configurar el fitxer de paquet per a proves de npm.

npm install -g jest

Ús de broma en un projecte basat en nodes

Per utilitzar Jest en un projecte basat en nodes, simplement utilitzeu les ordres de la secció anterior per instal·lar el paquet de nodes per a Jest.

Seguiu els passos següents per tal de crear un projecte de node des del principi i després instal·lar-hi Jest.

# 1) Creeu una carpeta / directori amb un nom com a nom de projecte, per exemple , myFirstNodeProject

# 2) Ara utilitzant el terminal o la línia d’ordres, aneu al projecte creat al pas anterior i executeu l’escriptura init npm mitjançant l’ordre següent.

npm init

# 3) Un cop executada l'ordre anterior, us demanarà diferents preguntes / paràmetres.

Per exemple , el nom del projecte, la versió, etc. Simplement seguiu pressionant Enter (i accepteu els valors per defecte). Un cop completat, veureu un fitxer package.json creat al vostre projecte. Es tracta d'un fitxer de configuració obligatori per a qualsevol projecte basat en nodes

# 4) Ara executeu l'ordre per instal·lar el paquet Jest al projecte recentment creat mitjançant l'ordre següent.

npm install --save-dev jest

Això instal·larà el mòdul Jest (així com les seves dependències).

# 5) Ara, tenim a punt un projecte de node amb enllaços Jest. Configurem l'script de prova npm per executar les proves Jest, és a dir, quan s'executa l'ordre 'prova npm', l'script hauria d'executar totes les proves basades en el framework Jest.

Per fer-ho, actualitzeu el fitxer package.json i afegiu una secció de scripts tal com es mostra a continuació.

'scripts': { 'test': 'jest' }

El fitxer package.json final es veurà com es mostra a continuació.

{ 'name': 'jest-e2e', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'jest' }, 'author': '', 'license': 'ISC', 'dependencies': { 'jest': '^25.1.0' } }

Proves d'escriptura per a una funció Javascript

En aquesta secció, crearem un codi de funció Javascript simple per sumar, restar i multiplicar 2 nombres i escriure les proves basades en Jest corresponents.

En primer lloc, vegem com és el codi de la nostra aplicació (o funció) que es prova.

# 1) Al projecte de node creat a la secció anterior, creeu un fitxer js anomenat calculator.js amb el contingut que es mostra a continuació

const mathOperations = { sum: function(a,b) { return a + b; }, diff: function(a,b) { return a - b; }, product: function(a,b) { return a * b } } module.exports = mathOperations

# 2) Ara, creeu un fitxer de prova a la mateixa carpeta per a aquestes proves, anomenat calculator.test.js - aquesta és la convenció que espera el marc Jest per buscar tots els fitxers que contenen proves basades en Jest. També importarem la funció que s’està provant, per tal d’executar el codi de la prova.

Així quedaria el fitxer només amb la declaració d’importació / requeriment.

const mathOperations = require('./calculator');

# 3) Ara, escrivim proves de diferents mètodes al fitxer principal, és a dir, suma, diferència i producte.

fusionar sort c ++ recursiu

Les proves de broma segueixen les proves d’estil BDD, amb cada conjunt de proves un bloc principal de descripció i pot tenir diversos blocs de prova. A més, tingueu en compte que les proves també poden tenir blocs de descripció imbricats.

Escrivim una prova per afegir 2 números i validem els resultats esperats. Subministrarem els números com a 1 i 2 i esperarem la sortida com a 3.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { expect(mathOperations.sum(1, 2)).toBe(3); }); })

Consulteu els punts següents per fer la prova anterior:

a) El bloc de descripció és una descripció externa del conjunt de proves, és a dir, representa un contenidor genèric per a totes les proves que anem a escriure per a la calculadora en aquest fitxer.

b) A continuació, tenim un bloc de proves individual: això representa una prova única. La cadena entre cometes representa el nom de la prova.

c) Consulteu el codi del bloc expect: 'expect' no és més que una afirmació. La sentència crida al mètode suma a la funció que es prova amb les entrades 1 i 2 i espera que la sortida sigui 3.

També podem reescriure això d’una manera més senzilla per entendre-ho millor.

Consulteu a continuació, ara hem separat la trucada de funció i l'afirmació com a 2 sentències separades per fer-la més succinta.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); })

d) Per executar aquesta prova, simplement executeu l'ordre ' prova sobre el nivell del mar ”Al terminal o al símbol del sistema a la ubicació del projecte.

Veureu la sortida com es mostra a continuació.

Executeu l

# 4) Provem algunes proves més.

a) En primer lloc, escriviu una prova fallida i vegeu quina sortida obtenim. Canviem el resultat per un valor incorrecte a la mateixa prova que vam escriure a la secció passada. Vegeu com té la prova.

describe('Calculator tests', () => { test('adding 1 + 2 should return 10', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(10); }); })

Aquí esperem que una suma d’1 i 2 retorni 10, cosa que és incorrecta.

Intentem executar-ho i veiem què aconseguim.

sortida detallada quan falla una prova

Podeu veure la sortida detallada quan falla una prova, és a dir, què es va retornar realment i què s’esperava i quina línia va provocar l’error a la funció que s’està provant, etc.

b) Escrivim més proves per a les altres funcions, és a dir, diferència i producte.

El fitxer de prova amb totes les proves es mostrarà com es mostra a continuació.

const mathOperations = require('./calculator'); describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); test('subtracting 2 from 10 should return 8', () => { // arrange and act var result = mathOperations.diff(10,2) // assert expect(result).toBe(8); }); test('multiplying 2 and 8 should return 16', () => { // arrange and act var result = mathOperations.product(2,8) // assert expect(result).toBe(16); }); })

Quan s’executin les proves anteriors, es genera la sortida que es mostra a continuació.

Proves de sortida de funcions: diferència i producte

Vídeo tutorial: què és broma

Hi ha Matchers

Les afirmacions de broma utilitzen aparelladors per afirmar sobre una condició. Jest utilitza aparelladors de l’esperada Api. Es pot fer referència al document API esperat aquí.

Anem a través d'alguns dels aparells més utilitzats juntament amb les proves Jest.

# 1) Igualtat

Aquests són els aparells més habituals. S'utilitzen per comprovar la igualtat o la desigualtat i s'utilitzen principalment per a operacions aritmètiques.

Vegem alguns exemples a continuació:

Aquí hem escrit 2 aparelladors utilitzant toBe i not.toBe que són anàlegs a iguals i no iguals.

test('equality matchers', () => { expect(2*2).toBe(4); expect(4-2).not.toBe(1); })

# 2) Veritat

Aquí veurem coincidències de valors nuls, falsos i veritables, és a dir, valors falsos i de veritat. És important tenir en compte que tot allò que no sigui lògicament cert és fals.

Per exemple, número 0, nul, cadena buida, NaN són exemples de falsy w.r.t Javascript.

test('truthy operators', () => { var name='Software testing help' var n = null expect(n).toBeNull() expect(name).not.toBeNull // name has a valid value expect(name).toBeTruthy() //fail - as null is non success expect(n).toBeTruthy() // pass - null treated as false or negative expect(n).toBeFalsy() // 0 - treated as false expect(0).toBeFalsy() })

# 3) Nombre de coincidències

Aquests aparelladors es podrien utilitzar per a operacions aritmètiques generals.

Per exemple, mayorThan, lessThan, greaterThanOrEqual, etc.

Consulteu els exemples següents per obtenir més informació

test('numeric operators', () => { var num1 = 100; var num2 = -20; var num3 = 0; // greater than expect(num1).toBeGreaterThan(10) // less than or equal expect(num2).toBeLessThanOrEqual(0) // greater than or equal expect(num3).toBeGreaterThanOrEqual(0) })

# 4) Concordança de cordes

Moltes vegades necessitem cadenes que coincideixin amb una expressió regular com a afirmació en una prova unitària. Jest proporciona aparelladors perquè les cordes es combinin amb una expressió regular.

test('string matchers',() => { var string1 = 'software testing help - a great resource for testers' // test for success match expect(string1).toMatch(/test/); // test for failure match expect(string1).not.toMatch(/abc/) })

Vídeo tutorial: hi ha Matchers

Jest Hooks: configuració i desglaç

Igual que tots els altres marcs de proves d’unitats basats en xUnit, el marc Jest també proporciona ganxos per als mètodes de configuració i neteja. Aquests mètodes de connexió s’executen abans i després de cada prova a la suite de proves o abans i després de l’execució de testSuite.

Totalment, hi ha 4 ganxos disponibles per utilitzar-los.

  • beforeEach i afterEach: Aquests ganxos s'executen abans i després de cada prova al conjunt de proves.
  • beforeAll i afterAll: Aquests ganxos s'executen una sola vegada per a cada suite de proves. és a dir, si un conjunt de proves té 10 proves, aquests ganxos només s’executaran una vegada per cada execució de proves.

Vegem un exemple: Afegirem aquests ganxos al mateix exemple de prova d'afegir 2 nombres.

Establirem les entrades abans de cada ganxo per il·lustrar-les. El fitxer de prova es veuria amb ganxos de prova com es mostra a continuació.

describe('Calculator tests', () => { var input1 = 0 var input2 = 0 beforeAll(() => { console.log('beforeAll called'); }); afterAll(() => { console.log('afterAll called'); }); beforeEach(() => { console.log('beforeEach called'); input1 = 1; input2 = 2; }); afterEach(() => { console.log('afterEach called'); }); test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(input1,input2) // assert expect(result).toBe(3); }); })

Consells i trucs

# 1) Els informes de la línia d’ordres són bons però poc llegibles. Hi ha biblioteques / mòduls disponibles per generar informes de proves basats en HTML per a proves Jest. Es pot aconseguir tal com es mostra a continuació.

  • Afegiu un paquet de nodes per a jest-html-reporter mitjançant l'ordre següent.
npm install --save-dev jest-html-reporter
  • Ara afegiu la configuració Jest per al reporter al fitxer package.json del projecte de node.
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • Un cop configurat ara, executeu les proves amb el botó ' prova sobre el nivell del mar ' comandament.
  • Si la configuració té èxit, hauríeu de poder veure un informe basat en HTML que es crea al directori del projecte.

Informe de prova

# 2) Creació d'un informe de cobertura de codi: La cobertura del codi és una de les mètriques més importants des de la perspectiva de les proves unitàries. Es mesura essencialment el percentatge d’expressions / branques que es cobreixen per a l’aplicació sotmesa a prova.

Jest proporciona assistència immediata per a la cobertura del codi. Per obtenir l’informe de cobertura Jest, Hi ha configuració s'ha d'afegir al fitxer package.json dossier.

Afegiu la configuració tal com es mostra a continuació:

'jest': { 'collectCoverage':true }

Un cop feta aquesta configuració, proveu d'executar les proves mitjançant l'ordre 'Prova sobre el nivell del mar' , i podeu consulteu els detalls de cobertura del codi just a sota dels resultats de l'execució de la prova, tal com es mostra a continuació.

detalls de cobertura de codi

Vídeo tutorial: cobertura de broma i generació d'informes HTML

Conclusió

En aquest tutorial de Jest, vam recórrer els conceptes bàsics del marc Jest. Hem après a instal·lar el framework Jest i hem vist com es pot utilitzar per provar fitxers Javascript senzills.

També vam explorar els diferents tipus de concordança compatibles amb Jest i vam cobrir també els reporters Html i els informes de cobertura de codi.

NEXT Tutorial

Lectura recomanada

^