Simplificando Testes com it.each no Jest

Escrever testes automatizados é essencial para garantir a qualidade e a estabilidade das aplicações modernas. Muitas vezes, no entanto, acabamos repetindo o mesmo bloco de código com variações mínimas nos dados de entrada. É aí que entra o it.each do Jest — um recurso que permite escrever testes parametrizados de forma clara, enxuta e poderosa.

Neste artigo, vamos explorar como usar it.each na prática, com exemplos que você pode aplicar no seu dia a dia como desenvolvedor(a).

---

✅ O que é it.each?

it.each (ou test.each) permite executar o mesmo teste com diferentes entradas. Em vez de duplicar vários blocos de it(...), você pode passar uma matriz de valores e o Jest vai rodar o teste para cada conjunto.

---

🚀 Exemplo básico: verificação de números positivos

it.each([1, 2, 3])('should be greater than zero: %i', (num) => {
  expect(num).toBeGreaterThan(0);
});

Neste exemplo simples, estamos garantindo que todos os números fornecidos são maiores que zero.

---

🛠 Exemplo real: soma de valores

Imagine que você tem uma função de soma simples e quer garantir que ela funcione corretamente para diferentes entradas:

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

it.each([
  [1, 2, 3],
  [2, 2, 4],
  [10, -5, 5],
])('should return %i + %i = %i', (a, b, expected) => {
  expect(sum(a, b)).toBe(expected);
});

---

📦 Exemplo com objetos: validação de entrada

Digamos que você tem uma função que valida se uma string não está vazia:

function isValidString(input: string): boolean {
  return input.trim().length > 0;
}

it.each([
  { input: 'Hello', expected: true },
  { input: ' ', expected: false },
  { input: '', expected: false },
])('should validate string "%s"', ({ input, expected }) => {
  expect(isValidString(input)).toBe(expected);
});

---

🏷 Exemplo com componente Badge e variações de cor

Imagine que você tem um componente Badge que aceita uma prop color com diferentes valores como "primary", "secondary", "success", etc.

// Badge.tsx
type BadgeProps = {
  color: 'primary' | 'secondary' | 'success' | 'danger';
  children: React.ReactNode;
};

export function Badge({ color, children }: BadgeProps) {
  return <span className={`badge badge-${color}`}>{children}</span>;
}

Agora você quer garantir que o componente renderiza corretamente para todas as cores permitidas:

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

it.each([
  'primary',
  'secondary',
  'success',
  'danger',
] as const)('renders Badge with color "%s"', (color) => {
  render(<Badge color={color}>Test</Badge>);
  const badge = screen.getByText('Test');

  expect(badge).toBeInTheDocument();
  expect(badge).toHaveClass(`badge-${color}`);
});

---

🧠 Dica extra

Se você estiver usando uma lista central de cores no seu design system (como um array exportado), pode até importar essa lista para garantir que os testes sempre acompanhem as novas variações:

// badgeColors.ts
export const badgeColors = ['primary', 'secondary', 'success', 'danger'] as const;

import { badgeColors } from './badgeColors';

it.each(badgeColors)('renders Badge with color "%s"', (color) => {
  render(<Badge color={color}>Test</Badge>);
  expect(screen.getByText('Test')).toHaveClass(`badge-${color}`);
});

---

✨ Conclusão

O uso de it.each é uma forma poderosa e elegante de reduzir a duplicação e deixar seus testes mais legíveis. Ao parametrizar entradas, você cobre mais casos com menos código — o que é sempre uma vitória!

Se você ainda não usava esse recurso, recomendo começar com testes simples e, aos poucos, aplicar nos fluxos reais da sua aplicação.