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

Introducció a les proves

Següent ►
►

Les proves són una part fonamental del desenvolupament de programari, ja que asseguren que el codi funcioni com s'espera i ajuden a prevenir errors futurs. En aquest tema, aprendrem els conceptes bàsics de les proves en React, incloent-hi els tipus de proves, les eines més utilitzades i com començar a escriure proves per a components de React.

Objectius del tema

  • Comprendre la importància de les proves en el desenvolupament de programari.
  • Conèixer els diferents tipus de proves.
  • Familiaritzar-se amb les eines de proves més comunes en l'ecosistema de React.
  • Escriure les primeres proves per a components de React.

Tipus de proves

  1. Proves unitàries

Les proves unitàries es centren en provar unitats individuals de codi, com ara funcions o components. L'objectiu és assegurar-se que cada unitat funcioni correctament de manera aïllada.

  1. Proves d'integració

Les proves d'integració verifiquen que diferents unitats de codi funcionin correctament quan es combinen. Aquest tipus de proves asseguren que els components interactuïn correctament entre ells.

  1. Proves de punta a punta (E2E)

Les proves de punta a punta simulen el comportament de l'usuari i verifiquen que l'aplicació funcioni correctament des del principi fins al final. Aquestes proves cobreixen tot el flux de l'aplicació, des de la interfície d'usuari fins al backend.

Eines de proves en React

  1. Jest

Jest és un marc de proves de JavaScript desenvolupat per Facebook. És molt popular en l'ecosistema de React i ofereix una configuració senzilla, una API rica i funcionalitats com ara la cobertura de codi.

  1. React Testing Library

React Testing Library és una biblioteca que facilita la prova de components de React. Es centra en les bones pràctiques de proves, com ara provar el comportament de l'usuari en lloc de la implementació interna dels components.

  1. Cypress

Cypress és una eina de proves de punta a punta que permet simular el comportament de l'usuari i verificar que l'aplicació funcioni correctament. És coneguda per la seva facilitat d'ús i la seva capacitat de depuració.

Configuració de l'entorn de proves

Instal·lació de Jest i React Testing Library

Per començar a escriure proves en React, primer hem d'instal·lar Jest i React Testing Library. A continuació es mostra com fer-ho:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

Configuració de Jest

Afegim la configuració bàsica de Jest al fitxer package.json:

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"]
  }
}

Configuració de React Testing Library

Creem un fitxer setupTests.js a la carpeta src per configurar React Testing Library:

// src/setupTests.js
import '@testing-library/jest-dom/extend-expect';

Escriure la primera prova

Ara que tenim l'entorn de proves configurat, escrivim la nostra primera prova per a un component de React. Suposem que tenim un component HelloWorld que mostra un missatge de benvinguda.

Component HelloWorld

// src/components/HelloWorld.js
import React from 'react';

const HelloWorld = () => {
  return <h1>Hello, World!</h1>;
};

export default HelloWorld;

Prova del component HelloWorld

Creem un fitxer de prova per al component HelloWorld:

// src/components/HelloWorld.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import HelloWorld from './HelloWorld';

test('mostra el missatge de benvinguda', () => {
  render(<HelloWorld />);
  const messageElement = screen.getByText(/hello, world!/i);
  expect(messageElement).toBeInTheDocument();
});

Explicació de la prova

  1. Importacions: Importem React, les funcions render i screen de React Testing Library, i el component HelloWorld.
  2. Renderització del component: Utilitzem la funció render per renderitzar el component HelloWorld.
  3. Selecció de l'element: Utilitzem la funció screen.getByText per seleccionar l'element que conté el text "Hello, World!".
  4. Afirmació: Utilitzem la funció expect per verificar que l'element seleccionat estigui present en el document.

Exercici pràctic

Exercici

Crea un component Greeting que accepti una prop name i mostri un missatge de benvinguda personalitzat. Escriu una prova per assegurar-te que el component mostra el missatge correcte.

Solució

Component Greeting

// src/components/Greeting.js
import React from 'react';

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

Prova del component Greeting

// src/components/Greeting.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

test('mostra el missatge de benvinguda personalitzat', () => {
  render(<Greeting name="John" />);
  const messageElement = screen.getByText(/hello, john!/i);
  expect(messageElement).toBeInTheDocument();
});

Conclusió

En aquesta secció, hem après la importància de les proves en el desenvolupament de programari, els diferents tipus de proves, les eines més comunes en l'ecosistema de React i com començar a escriure proves per a components de React. A mesura que avancem en el curs, explorarem més tècniques i eines per millorar la qualitat del nostre codi i assegurar-nos que les nostres aplicacions React funcionin correctament.

◄ 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