El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Proves Unitàries amb Jest

Següent ►
►

Introducció a Jest

Jest és un marc de proves de JavaScript desenvolupat per Facebook, dissenyat principalment per treballar amb aplicacions React, però també és adequat per a qualsevol projecte JavaScript. És conegut per la seva facilitat d'ús, velocitat i integració amb altres eines de desenvolupament.

Característiques Clau de Jest

  • Zero Configuració: Funciona fora de la caixa amb la majoria de projectes JavaScript.
  • Mocks i Espies: Permet crear mocks i espies per a funcions i mòduls.
  • Instantànies: Proporciona proves d'instantànies per assegurar-se que la interfície d'usuari no canvia inesperadament.
  • Cobertura de Codi: Genera informes de cobertura de codi per veure quines parts del codi estan cobertes per les proves.

Instal·lació de Jest

Per començar a utilitzar Jest, primer cal instal·lar-lo. Pots fer-ho utilitzant npm o yarn.

# Utilitzant npm
npm install --save-dev jest

# Utilitzant yarn
yarn add --dev jest

Després de la instal·lació, afegeix un script al teu package.json per executar Jest:

{
  "scripts": {
    "test": "jest"
  }
}

El Teu Primer Test amb Jest

Estructura Bàsica d'un Test

Un test bàsic amb Jest es compon de tres parts principals:

  1. Descripció del Test: Utilitza la funció describe per agrupar tests relacionats.
  2. Casos de Test: Utilitza la funció test o it per definir un cas de test específic.
  3. Expectatives: Utilitza la funció expect per definir les expectatives del test.

Exemple Pràctic

Suposem que tenim una funció sum que volem provar:

// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

Ara, creem un fitxer de test per a aquesta funció:

// sum.test.js
const sum = require('./sum');

describe('Funció sum', () => {
  test('hauria de retornar la suma de dos nombres', () => {
    expect(sum(1, 2)).toBe(3);
    expect(sum(-1, 1)).toBe(0);
  });
});

Executar el Test

Per executar el test, simplement corre el següent comandament:

npm test

Mocks i Espies

Creació de Mocks

Els mocks són versions simulades de funcions o mòduls que permeten controlar el seu comportament durant les proves.

// user.js
function fetchUser() {
  return { name: 'John Doe', age: 30 };
}
module.exports = fetchUser;
// user.test.js
const fetchUser = require('./user');

jest.mock('./user');

test('hauria de retornar un usuari simulat', () => {
  fetchUser.mockReturnValue({ name: 'Jane Doe', age: 25 });
  const user = fetchUser();
  expect(user.name).toBe('Jane Doe');
  expect(user.age).toBe(25);
});

Utilització d'Espies

Els espies permeten monitoritzar les crides a funcions reals sense alterar el seu comportament.

// math.js
function multiply(a, b) {
  return a * b;
}
module.exports = multiply;
// math.test.js
const multiply = require('./math');

test('hauria de cridar la funció multiply amb els arguments correctes', () => {
  const spy = jest.spyOn(multiply, 'multiply');
  multiply(2, 3);
  expect(spy).toHaveBeenCalledWith(2, 3);
  spy.mockRestore();
});

Proves d'Instantànies

Les proves d'instantànies són útils per assegurar-se que la sortida d'una funció o component no canvia inesperadament.

// component.js
function renderComponent() {
  return '<div>Hello World</div>';
}
module.exports = renderComponent;
// component.test.js
const renderComponent = require('./component');

test('hauria de coincidir amb la instantània', () => {
  expect(renderComponent()).toMatchSnapshot();
});

Cobertura de Codi

Jest pot generar informes de cobertura de codi per veure quines parts del codi estan cobertes per les proves.

Per generar un informe de cobertura, executa:

npm test -- --coverage

Això generarà un informe detallat que pots revisar per assegurar-te que totes les parts del teu codi estan adequadament provades.

Exercicis Pràctics

Exercici 1: Provar una Funció de Divisió

Crea una funció divide que divideixi dos nombres i escriu un test per assegurar-te que funciona correctament.

// divide.js
function divide(a, b) {
  if (b === 0) {
    throw new Error('No es pot dividir per zero');
  }
  return a / b;
}
module.exports = divide;
// divide.test.js
const divide = require('./divide');

describe('Funció divide', () => {
  test('hauria de retornar la divisió de dos nombres', () => {
    expect(divide(6, 3)).toBe(2);
  });

  test('hauria de llençar un error quan es divideix per zero', () => {
    expect(() => divide(6, 0)).toThrow('No es pot dividir per zero');
  });
});

Exercici 2: Mock d'una Funció Asíncrona

Crea una funció fetchData que retorni una promesa i escriu un test que utilitzi un mock per simular la resposta.

// fetchData.js
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Dades carregades');
    }, 1000);
  });
}
module.exports = fetchData;
// fetchData.test.js
const fetchData = require('./fetchData');

jest.mock('./fetchData');

test('hauria de retornar dades simulades', async () => {
  fetchData.mockResolvedValue('Dades simulades');
  const data = await fetchData();
  expect(data).toBe('Dades simulades');
});

Conclusió

En aquesta secció, hem après a utilitzar Jest per escriure proves unitàries en JavaScript. Hem cobert la instal·lació, l'estructura bàsica dels tests, la creació de mocks i espies, les proves d'instantànies i la generació d'informes de cobertura de codi. Amb aquestes eines, pots assegurar-te que el teu codi és robust i lliure d'errors.

◄ Anterior
◄
Següent ►
►

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats