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

Proves unitàries amb Jest

Següent ►
►

Introducció

En aquest tema, aprendrem a realitzar proves unitàries en aplicacions React utilitzant Jest, un marc de proves JavaScript desenvolupat per Facebook. Jest és àmpliament utilitzat per la seva facilitat d'ús, velocitat i integració amb React.

Objectius

  • Comprendre què són les proves unitàries.
  • Configurar Jest en un projecte React.
  • Escriure i executar proves unitàries bàsiques amb Jest.
  • Aprendre a utilitzar les funcionalitats avançades de Jest per a proves més complexes.

Què són les proves unitàries?

Les proves unitàries són proves automàtiques que verifiquen el funcionament correcte de les unitats més petites del codi, com ara funcions o components individuals. L'objectiu és assegurar-se que cada unitat funcioni correctament de manera aïllada.

Configuració de Jest en un projecte React

Pas 1: Instal·lació de Jest

Si has creat el teu projecte React utilitzant Create React App, Jest ja està preconfigurat. Si no, pots instal·lar Jest manualment:

npm install --save-dev jest

Pas 2: Configuració del script de proves

Afegeix el següent script al teu package.json per executar les proves amb Jest:

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

Pas 3: Instal·lació de Babel (opcional)

Si utilitzes sintaxi moderna de JavaScript, com ara les importacions d'ES6, necessitaràs Babel per compilar el codi durant les proves:

npm install --save-dev babel-jest @babel/preset-env @babel/preset-react

Afegeix un fitxer .babelrc a l'arrel del teu projecte amb la següent configuració:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Escriure i executar proves unitàries bàsiques amb Jest

Exemple 1: Provar una funció simple

Suposem que tenim una funció sum en un fitxer sum.js:

// sum.js
export function sum(a, b) {
  return a + b;
}

Podem escriure una prova per aquesta funció en un fitxer sum.test.js:

// sum.test.js
import { sum } from './sum';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Per executar la prova, utilitza el següent comandament:

npm test

Exemple 2: Provar un component React

Suposem que tenim un component Button en un fitxer Button.js:

// Button.js
import React from 'react';

export function Button({ label }) {
  return <button>{label}</button>;
}

Podem escriure una prova per aquest component en un fitxer Button.test.js:

// Button.test.js
import React from 'react';
import { render } from '@testing-library/react';
import { Button } from './Button';

test('renders button with label', () => {
  const { getByText } = render(<Button label="Click me" />);
  expect(getByText('Click me')).toBeInTheDocument();
});

Funcionalitats avançades de Jest

Mocking

Jest permet simular (mock) funcions, mòduls i temporitzadors per aïllar les unitats de codi durant les proves.

Exemple: Simular una funció

// fetchData.js
export const fetchData = () => {
  return Promise.resolve('data');
};

// fetchData.test.js
import { fetchData } from './fetchData';

jest.mock('./fetchData');

test('fetchData returns data', async () => {
  fetchData.mockResolvedValue('mocked data');
  const data = await fetchData();
  expect(data).toBe('mocked data');
});

Proves asíncrones

Jest facilita la prova de codi asíncron utilitzant promeses o la sintaxi async/await.

Exemple: Provar una funció asíncrona

// asyncFunction.js
export const asyncFunction = async () => {
  return 'async data';
};

// asyncFunction.test.js
import { asyncFunction } from './asyncFunction';

test('asyncFunction returns async data', async () => {
  const data = await asyncFunction();
  expect(data).toBe('async data');
});

Exercicis pràctics

Exercici 1: Provar una funció de multiplicació

Crea una funció multiply que multipliqui dos nombres i escriu una prova per verificar el seu funcionament.

Solució

// multiply.js
export function multiply(a, b) {
  return a * b;
}

// multiply.test.js
import { multiply } from './multiply';

test('multiplies 2 * 3 to equal 6', () => {
  expect(multiply(2, 3)).toBe(6);
});

Exercici 2: Provar un component amb un esdeveniment

Crea un component ToggleButton que canviï el seu estat intern quan es fa clic i escriu una prova per verificar aquest comportament.

Solució

// ToggleButton.js
import React, { useState } from 'react';

export function ToggleButton() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

// ToggleButton.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { ToggleButton } from './ToggleButton';

test('toggles button text on click', () => {
  const { getByText } = render(<ToggleButton />);
  const button = getByText('OFF');
  fireEvent.click(button);
  expect(button).toHaveTextContent('ON');
});

Conclusió

En aquest tema, hem après a configurar Jest en un projecte React, escriure proves unitàries bàsiques i utilitzar funcionalitats avançades com el mocking i les proves asíncrones. Les proves unitàries són una eina essencial per assegurar la qualitat del codi i facilitar el manteniment de les aplicacions React.

En el següent tema, explorarem com realitzar proves de components amb React Testing Library per assegurar-nos que els nostres components es comporten correctament en diferents situacions.

◄ Anterior
◄
Següent ►
►

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa

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