Testing en frontend: de cero a tests que realmente sirven

El testing en frontend puede ser un dolor de cabeza si no sabés por dónde empezar o qué herramientas usar. En este artículo, te voy a guiar desde los conceptos básicos hasta los tests que realmente sirven usando las herramientas más frescas del 2026. Hablaremos de unit tests con Vitest, component tests con Testing Library, y E2E con Playwright, todo con ejemplos prácticos usando un componente React real. ¡Vamos a dejar de lado los tests que no aportan y enfocarnos en los que sí!

Unit Tests con Vitest

Comencemos con los unit tests. Estos son la base del testing en frontend. En RHINO, usamos bastante Vitest por su velocidad y facilidad de integración con proyectos de React. Si nunca usaste Vitest, es básicamente la evolución de Jest, pero más rápido y mejor integrado con Vite.

Para empezar, instalá Vitest en tu proyecto de React. Si ya estás usando Vite, simplemente añadí Vitest como dependencia:

npm install vitest --save-dev

Una vez instalado, configuremos un test simple. Supongamos que tenés un componente React que suma dos números:

function sum(a, b) {
  return a + b;
}

Creemos un test para esta función usando Vitest. Creamos un archivo sum.test.js y escribimos lo siguiente:

import { describe, it, expect } from 'vitest';
import { sum } from './sum';

describe('sum function', () => {
  it('should return correct sum of two numbers', () => {
    expect(sum(1, 2)).toBe(3);
    expect(sum(-1, 1)).toBe(0);
  });
});

Este test es sencillo pero cubre lo básico. Asegurate de correr Vitest usando npx vitest para verificar que todo funcione correctamente. Un tip: incluí tests para condiciones de borde, como sumar números negativos o cero.

Component Tests con Testing Library

Pasemos ahora a los component tests. Testing Library es ideal para esto porque se enfoca en cómo los usuarios interactúan con la interfaz, en vez de los detalles de implementación. En Menteo AI, nos ayudó a prevenir bugs en las interfaces complejas que desarrollamos.

Imaginemos un componente React que muestra un botón y un contador. Cada vez que hacés click en el botón, el contador aumenta. Acá está el componente:

import React, { useState } from 'react';

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
      <span>Contador: {count}</span>
    </div>
  );
}

export default Counter;

Escribamos un test para asegurarnos de que el botón incremente el contador correctamente. Para esto, creamos un archivo Counter.test.js:

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increases count when button is clicked', () => {
  render(<Counter />);
  const button = screen.getByText('Incrementar');
  fireEvent.click(button);
  expect(screen.getByText('Contador: 1')).toBeInTheDocument();
});

Este test simula un click en el botón y verifica que el contador se actualice correctamente. Testing Library es genial porque no te obliga a usar act() en la mayoría de los casos, simplificando mucho los tests.

E2E con Playwright

Los tests E2E (end-to-end) son cruciales para asegurarse de que toda tu aplicación funcione bien en conjunto. En Merchant Hub Akua, Playwright nos permitió automatizar pruebas complejas que involucraban múltiples interacciones de usuario.

Para empezar con Playwright, instalalo en tu proyecto:

npm install @playwright/test --save-dev

Supongamos que querés testear el flujo de inicio de sesión de tu aplicación. Primero, configurá Playwright creando un archivo playwright.config.js:

module.exports = {
  use: {
    headless: true,
    viewport: { width: 1280, height: 720 },
  },
};

Luego, podés escribir un test para el flujo de inicio de sesión:

const { test, expect } = require('@playwright/test');

test('login flow', async ({ page }) => {
  await page.goto('https://tu-aplicacion.com/login');
  await page.fill('#username', 'usuario');
  await page.fill('#password', 'contraseña');
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL('https://tu-aplicacion.com/dashboard');
});

Este test navega a la página de login, llena los campos de usuario y contraseña, y verifica que al hacer login se redirige al dashboard. Playwright es muy poderoso para estas pruebas end-to-end porque soporta múltiples navegadores y tiene un API muy clara.

Qué testear y qué no

No todo en tu frontend necesita ser testeado. La clave está en enfocar tus esfuerzos en lo que realmente importa. En mis proyectos, suelo aplicar estas reglas:

• Testeá la lógica de negocio crítica: Cualquier cosa que afecte directamente a la experiencia del usuario, como cálculos complejos o validaciones.
• Testeá componentes reutilizables: Si tenés un componente que se usa en varias partes de tu aplicación, asegurate de que funcione correctamente.
• No testeés detalles de implementación: Cosas como el estado interno de un componente o funciones privadas que no afectan el comportamiento exterior.

En RHINO, nos dimos cuenta de que escribir tests para cada pequeño detalle es poco eficiente y costoso a largo plazo. En cambio, enfocarse en la funcionalidad esencial nos ahorró tiempo y esfuerzo.

Buenas prácticas de testing

Desarrollar tests efectivos es tanto un arte como una ciencia. Acá te dejo algunas buenas prácticas que aplicamos en Menteo AI y que podés implementar:

• Mantené los tests aislados: Cada test debe ser independiente para que puedas ejecutarlo solo y obtener resultados consistentes.
• Usá nombres descriptivos: Un buen nombre de test explica qué se está verificando y por qué es importante.
• Ejecutá tus tests frecuentemente: Integrá la ejecución de tests en tu flujo de trabajo para detectar errores lo antes posible.
• Usá mocks y stubs con cuidado: Simulá dependencias externas solo cuando sea necesario y asegurate de que los mocks no oculten problemas reales.

Estas prácticas te ayudarán a mantener un suite de tests robusta y útil, que realmente aporte valor a tu proyecto.

Conclusión

El testing en frontend es esencial para asegurar la calidad de tus aplicaciones, pero no tiene que ser complicado. Con herramientas como Vitest, Testing Library y Playwright, podés crear tests que realmente sirvan y te ayuden a mantener un código confiable. Recordá enfocarte en lo esencial y aplicar buenas prácticas para maximizar el valor de tus tests. Si necesitás más ayuda o querés discutir cómo implementar estas herramientas en tus proyectos, no dudes en contactame.