Publicado: Hace 24 días
Cuando entramos al mundo de las pruebas, solemos comenzar con pruebas manuales: llenar formularios a mano, abrir el navegador, hacer clics aquí y allá. Todo eso está bien… mientras la app es pequeña.
Pero cuando aplicación crece, probarla se vuelve un dolor de cabeza. ¿Por qué?
Y lo peor: cualquier cambio puede romper algo sin que lo notes.
Las pruebas automatizadas son bloques de código que validan que otros bloques de código hagan lo que deben de hacer.
Suena raro, lo sé. Para entenderlo mejor, veamos un ejemplo.
// calculadora.js
class Calculadora {
sumar(valor1, valor2) {
return valor1 + valor2
}
}
export default Calculadora
// calculadora.test.js
import Calculadora from ‘calculadora.js’
function crearCalculadora() {
function validarSumaCorrecta() {
const valor1 = 4;
const valor2 = 6;
const calculadora = new Calculadora();
const resultado = calculadora.sumar(valor1, valor2);
const esperado = 10;
if (resultado === esperado) {
console.log("✅ La prueba ha sido exitosa");
} else {
console.error(`❌ Prueba fallida: se esperaba ${esperado}, pero se obtuvo ${resultado}`);
}
}
return { validarSumaCorrecta };
}
crearCalculadora().validarSumaCorrecta();
Para ver esta prueba en acción, debemos ejecutar el archivo calculadora.test.js desde la terminal.
node calculadora.test.js
Este es un ejemplo de lo que es una prueba automatizada. Sin embargo, no es la mejor forma de ejecutarlas, ya que requiere:
Como en muchas otras áreas del desarrollo, ya existen herramientas que resulten estos problemas. En este caso, hablamos de los frameworks de testing.
Cuando trabajamos con React ( y javascript en general), la herramienta más utilizada para escribir y organizar y ejecutar pruebas es Jest.
Veamos cómo se vería el mismo ejemplo de la calculadora usando Jest:
// calculadora.test.js
import Calculadora from ‘calculadora.js’
describe('Calculadora', () => {
it(‘validar suma correcta’, () => {
const valor1 = 4;
const valor2 = 6;
const esperado = 10;
const calculadora = new Calculadora();
const resultado = calculadora.sumar(valor1, valor2);
expect(resultado).toBe(esperado);
});
});
Podemos notar varios detalles importantes en el ejemplo con Jest.
En lugar de definir funciones manuales, usamos describe para agrupar un conjunto de pruebas relacionadas, y it (o test) para definir cada caso de prueba individual.
Además, en lugar de usar condicionales y console.log, utilizamos aserciones (expect) que nos permiten validar de forma fácil el resultado esperado.
Las aserciones hacen mucho más que comparar valores simples. Por ejemplo, podemos verificar:
Esto hace que nuestras pruebas sean más expresivas, confiables y fáciles de mantener.
Dicho esto, veamos un ejemplo utilizando React con Jest:
// Calculadora.jsx
import React, { useState } from 'react';
export default function Calculadora() {
const [valor1, setValor1] = useState('');
const [valor2, setValor2] = useState('');
const [resultado, setResultado] = useState(null);
const manejarSuma = () => {
const suma = Number(valor1) + Number(valor2);
setResultado(suma);
};
return (
<div>
<input
placeholder="Valor 1"
value={valor1}
onChange={(e) => setValor1(e.target.value)}
/>
<input
placeholder="Valor 2"
value={valor2}
onChange={(e) => setValor2(e.target.value)}
/>
<button onClick={manejarSuma}>Sumar</button>
{resultado !== null && <p data-testid="resultado">Resultado: {resultado}</p>}
</div>
);
}
// Calculadora.test.jsx
import { render, screen, fireEvent } from '@testing-library/react';
import Calculadora from './Calculadora';
describe('Calculadora', () => {
it('suma correctamente dos valores ingresados', () => {
render(<Calculadora />);
const input1 = screen.getByPlaceholderText('Valor 1');
const input2 = screen.getByPlaceholderText('Valor 2');
const boton = screen.getByRole('button', { name: /sumar/i });
fireEvent.change(input1, { target: { value: '4' } });
fireEvent.change(input2, { target: { value: '6' } });
fireEvent.click(boton);
const resultado = screen.getByTestId('resultado');
expect(resultado).toHaveTextContent('Resultado: 10');
});
});
Lo más destacado en este ejemplo es el uso de React Testing Library.
Nos permite montar nuestros componentes React dentro del entorno de pruebas.
Gracias a esta librería, podemos:
Seleccionar los elementos del DOM (por su texto, placeholder, rol, etc.)
Simular interacciones como escribir en un campo o hacer clic en un botón
Obtener el resultado en pantalla y validarlo con aserciones simples y expresivas
Esto nos permite escribir pruebas más cercanas a cómo un usuario interactuaría con nuestra interfaz, en lugar de enfocarnos en la implementación interna del componente.
Escribir pruebas automatizadas con Jest y React Testing Library no solo mejora la calidad de tu código: te permite enfocarte en lo que realmente importa, la experiencia del usuario, sin depender de pruebas manuales o configuraciones complejas.
Con estas herramientas, puedes validar que tus componentes funcionen como esperas, detectar errores antes de que lleguen a producción y tener mayor confianza al hacer cambios en tu código.
Y lo mejor: no necesitas herramientas complicadas. Solo escribir código... para probar tu código.
📘 ¿Quieres aprender a hacer pruebas en React desde cero, con ejemplos prácticos y sin rodeos?
En mi libro Testing en React: Guía práctica con Jest y React Testing Library te explico todo paso a paso.