El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció

React Testing Library (RTL) és una eina popular per provar components de React. RTL se centra en provar el comportament dels components des de la perspectiva de l'usuari, en lloc de la implementació interna. Això ajuda a assegurar que les proves siguin més robustes i menys propenses a trencar-se amb canvis interns.

Instal·lació

Abans de començar a utilitzar React Testing Library, necessitem instal·lar-la juntament amb Jest, que és el framework de proves que utilitzarem.

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

Configuració

Assegura't que Jest estigui configurat correctament en el teu projecte. Si estàs utilitzant Create React App, Jest ja està configurat per defecte. Si no, pots seguir la documentació oficial de Jest per configurar-lo.

Estructura bàsica d'una prova

A continuació, es mostra un exemple bàsic de com provar un component amb React Testing Library.

Component a Provar

Suposem que tenim un component Button que simplement mostra un botó amb un text passat com a prop.

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

const Button = ({ text }) => {
  return <button>{text}</button>;
};

export default Button;

Prova del Component

Ara, crearem una prova per assegurar-nos que el component Button renderitza correctament el text passat com a prop.

// Button.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Button from './Button';

test('renderitza el text passat com a prop', () => {
  render(<Button text="Clica'm" />);
  const buttonElement = screen.getByText(/Clica'm/i);
  expect(buttonElement).toBeInTheDocument();
});

Explicació del Codi

Importacions:
- render i screen són funcions de React Testing Library.
- @testing-library/jest-dom/extend-expect afegeix mètodes addicionals a Jest per facilitar les assercions.
- Button és el component que estem provant.
Renderització del Component:
- render(<Button text="Clica'm" />); renderitza el component Button amb el text "Clica'm".
Selecció de l'Element:
- screen.getByText(/Clica'm/i); selecciona l'element que conté el text "Clica'm". La i al final de l'expressió regular indica que la cerca no és sensible a majúscules/minúscules.
Asserció:
- expect(buttonElement).toBeInTheDocument(); verifica que l'element seleccionat està present en el document.

Proves Addicionals

Provar Esdeveniments

Podem provar esdeveniments com clics, canvis, etc. amb React Testing Library.

Component a Provar

Suposem que tenim un component Counter que incrementa un comptador quan es clica un botó.

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

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Comptador: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementa</button>
    </div>
  );
};

export default Counter;

Prova del Component

// Counter.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Counter from './Counter';

test('incrementa el comptador quan es clica el botó', () => {
  render(<Counter />);
  const buttonElement = screen.getByText(/Incrementa/i);
  fireEvent.click(buttonElement);
  const counterElement = screen.getByText(/Comptador: 1/i);
  expect(counterElement).toBeInTheDocument();
});

Explicació del Codi

Importacions:
- fireEvent és una funció de React Testing Library per simular esdeveniments.
Simulació d'Esdeveniments:
- fireEvent.click(buttonElement); simula un clic en el botó.
Verificació del Comportament:
- Després de clicar el botó, verifiquem que el text del comptador s'ha actualitzat correctament.

Exercicis Pràctics

Exercici 1

Crea un component Toggle que mostri un text "Encès" o "Apagat" segons l'estat intern. Escriu una prova per assegurar-te que el text canvia correctament quan es clica un botó.

Solució

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

const Toggle = () => {
  const [isOn, setIsOn] = useState(false);

  return (
    <div>
      <p>{isOn ? 'Encès' : 'Apagat'}</p>
      <button onClick={() => setIsOn(!isOn)}>Canvia</button>
    </div>
  );
};

export default Toggle;

// Toggle.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Toggle from './Toggle';

test('canvia el text quan es clica el botó', () => {
  render(<Toggle />);
  const buttonElement = screen.getByText(/Canvia/i);
  fireEvent.click(buttonElement);
  const textElement = screen.getByText(/Encès/i);
  expect(textElement).toBeInTheDocument();
});

Conclusió

React Testing Library és una eina poderosa per provar components de React des de la perspectiva de l'usuari. Enfocant-nos en el comportament dels components, podem escriure proves més robustes i mantenibles. Amb la pràctica, esdevindràs més còmode utilitzant RTL per assegurar la qualitat del teu codi.

Proves de components amb React Testing Library

Introducció

Instal·lació

Configuració

Estructura bàsica d'una prova

Component a Provar

Prova del Component

Explicació del Codi

Proves Addicionals

Provar Esdeveniments

Component a Provar

Prova del Component

Explicació del Codi

Exercicis Pràctics

Exercici 1

Solució

Conclusió

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