El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Pruebas Unitarias con Jest

Siguiente ►
►

Introducción

Las pruebas unitarias son una parte esencial del desarrollo de software, ya que permiten verificar que las unidades individuales de código (como funciones y componentes) funcionan según lo esperado. Jest es un marco de pruebas de JavaScript desarrollado por Facebook, que se integra perfectamente con React y proporciona una experiencia de pruebas completa y fácil de usar.

Objetivos de esta sección:

  1. Entender qué es Jest y por qué es útil.
  2. Configurar Jest en un proyecto de React.
  3. Escribir y ejecutar pruebas unitarias básicas.
  4. Explorar características avanzadas de Jest.

¿Qué es Jest?

Jest es un marco de pruebas de JavaScript que se utiliza para realizar pruebas unitarias, de integración y de extremo a extremo. Algunas de sus características clave incluyen:

  • Simplicidad: Configuración mínima y fácil de usar.
  • Velocidad: Ejecución rápida de pruebas gracias a su capacidad de paralelización.
  • Cobertura de código: Genera informes de cobertura de código automáticamente.
  • Mocks y espías: Facilita la creación de mocks y espías para pruebas más aisladas.

Configuración de Jest en un Proyecto de React

Paso 1: Crear un Proyecto de React

Si aún no tienes un proyecto de React, puedes crear uno utilizando Create React App:

npx create-react-app my-app
cd my-app

Paso 2: Instalar Jest

Create React App viene con Jest preconfigurado. Si estás utilizando una configuración personalizada, puedes instalar Jest manualmente:

npm install --save-dev jest

Paso 3: Configurar Jest

Si necesitas personalizar la configuración de Jest, puedes agregar un archivo jest.config.js en la raíz de tu proyecto:

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
  testEnvironment: 'jsdom',
};

Escribiendo Pruebas Unitarias Básicas

Ejemplo 1: Probando una Función Sencilla

Supongamos que tenemos una función sum en un archivo sum.js:

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

module.exports = sum;

Podemos escribir una prueba unitaria para esta función en un archivo sum.test.js:

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

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

Ejemplo 2: Probando un Componente de React

Supongamos que tenemos un componente Button en un archivo Button.js:

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

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

export default Button;

Podemos escribir una prueba unitaria para este componente en un archivo Button.test.js:

// src/Button.test.js
import React from 'react';
import { render, fireEvent } 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();
});

test('calls onClick when button is clicked', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button label="Click me" onClick={handleClick} />);
  fireEvent.click(getByText('Click me'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

Características Avanzadas de Jest

Mocks y Espías

Jest facilita la creación de mocks y espías para simular funciones y módulos. Esto es útil para aislar el código que estás probando.

Ejemplo: Mock de una Función

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

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

jest.mock('./api');

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

Cobertura de Código

Jest puede generar informes de cobertura de código automáticamente. Para habilitar esto, puedes ejecutar Jest con la opción --coverage:

npm test -- --coverage

Esto generará un informe de cobertura en la carpeta coverage.

Ejercicios Prácticos

Ejercicio 1: Prueba de una Función

Crea una función multiply que multiplique dos números y escribe una prueba unitaria para ella.

Solución:

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

module.exports = multiply;
// src/multiply.test.js
const multiply = require('./multiply');

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

Ejercicio 2: Prueba de un Componente

Crea un componente Input que reciba un valor y un manejador de cambio, y escribe una prueba unitaria para verificar que el valor se actualiza correctamente.

Solución:

// src/Input.js
import React from 'react';

function Input({ value, onChange }) {
  return <input value={value} onChange={onChange} />;
}

export default Input;
// src/Input.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Input from './Input';

test('updates value on change', () => {
  const handleChange = jest.fn();
  const { getByDisplayValue } = render(<Input value="initial" onChange={handleChange} />);
  const input = getByDisplayValue('initial');
  fireEvent.change(input, { target: { value: 'updated' } });
  expect(handleChange).toHaveBeenCalled();
});

Conclusión

En esta sección, hemos aprendido a configurar Jest en un proyecto de React, escribir pruebas unitarias básicas y explorar algunas de las características avanzadas de Jest. Las pruebas unitarias son una herramienta poderosa para garantizar la calidad y la fiabilidad de tu código. En la siguiente sección, profundizaremos en las pruebas de componentes utilizando React Testing Library.

◄ Anterior
◄
Siguiente ►
►

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados