Entenda o que é um Teste Unitário

Testes unitários são uma prática essencial no desenvolvimento de software. Eles permitem validar o comportamento de partes isoladas do código, como funções ou componentes, garantindo que cada unidade funcione conforme o esperado.

Esse tipo de teste ajuda a:

• Identificar bugs precocemente
• Garantir estabilidade durante refatorações
• Melhorar a manutenibilidade do código
• Aumentar a confiança no processo de entrega contínua

Com testes automatizados, você constrói aplicações mais seguras e previsíveis, especialmente em projetos escaláveis com React e TypeScript.

Por Que Usar Vitest para Testes Unitários

O Vitest é o framework de testes moderno criado especificamente para funcionar com o Vite, bundler amplamente usado em projetos JavaScript e TypeScript modernos.

Suas vantagens incluem:

• Velocidade superior na execução dos testes graças ao uso do mecanismo nativo do Vite
• Suporte integrado a TypeScript sem necessidade de plugins extras
• Compatibilidade com a sintaxe do Jest, facilitando a migração e adoção
• Integração simples com ferramentas de CI/CD e ambientes de desenvolvimento modernos

Essas características tornam o Vitest uma escolha ideal para escrever testes unitários em projetos baseados no Vite.

Como Configurar Vitest em Projeto React + TypeScript

Para começar, crie um projeto base com Vite:

npm create vite@latest my-app --template react-ts

Instale o Vitest como dependência de desenvolvimento:

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

Adicione o script de teste no package.json:

"scripts": {
  "test": "vitest"
}

Agora você está pronto para criar seus primeiros testes unitários.

Exemplo Prático: Testando uma Função de Formatação de Data

Uma situação comum em aplicações reais é receber datas no formato ISO (como vindo de um banco de dados) e precisar exibí-las no formato brasileiro (dd/MM/yyyy). Veja como testar essa função com Vitest.

Função a ser testada

utils.ts

export function formatarDataParaBrasileiro(dataISO: string): string {
  const data = new Date(dataISO);

  const dia = String(data.getDate()).padStart(2, '0');
  const mes = String(data.getMonth() + 1).padStart(2, '0'); // Janeiro é 0
  const ano = data.getFullYear();

  return `${dia}/${mes}/${ano}`;
}

Teste unitário com Vitest

utils.test.ts

import { describe, test, expect } from 'vitest';
import { formatarDataParaBrasileiro } from './utils';

describe('formatarDataParaBrasileiro', () => {
  test('deve formatar corretamente uma data ISO para dd/MM/yyyy', () => {
    const dataISO = '2025-03-15T10:00:00Z';
    expect(formatarDataParaBrasileiro(dataISO)).toBe('15/03/2025');
  });

  test('deve formatar corretamente uma data ISO com dia menor que 10', () => {
    const dataISO = '2025-01-05T08:30:00Z';
    expect(formatarDataParaBrasileiro(dataISO)).toBe('05/01/2025');
  });

  test('deve formatar corretamente uma data ISO com mês menor que 10', () => {
    const dataISO = '2025-09-30T14:45:00Z';
    expect(formatarDataParaBrasileiro(dataISO)).toBe('30/09/2025');
  });
});

Este exemplo mostra como realizar testes unitários para diferentes cenários da mesma função, garantindo sua correta execução mesmo em casos extremos, como dias ou meses menores que 10.

Principais Matchers do expect no Vitest

Os matchers do expect são usados para fazer asserções sobre valores em seus testes. Abaixo estão os principais utilizados no Vitest:

Matcher	Descrição	Exemplo
toBe(value)	Verifica se o valor é estritamente igual (===) ao esperado	expect(2 + 2).toBe(4)
toEqual(value)	Verifica se o valor é profundamente igual (útil para objetos/arrays)	expect([1, 2]).toEqual([1, 2]) expect({name: "José"}).toEqual({name: "José"})
toBeNull()	Verifica se o valor é null	expect(null).toBeNull()
toBeUndefined()	Verifica se o valor é undefined	expect(undefined).toBeUndefined()
toBeDefined()	Verifica se o valor não é undefined	expect(5).toBeDefined()
toBeTruthy()	Verifica se o valor é verdadeiro em contexto booleano	expect(true).toBeTruthy()
toBeFalsy()	Verifica se o valor é falso em contexto booleano	expect(0).toBeFalsy()
toBeGreaterThan(number)	Verifica se o valor é maior que o número fornecido	expect(10).toBeGreaterThan(5)
toBeLessThan(number)	Verifica se o valor é menor que o número fornecido	expect(3).toBeLessThan(5)
toMatch(regexp or string)	Verifica se a string corresponde a uma expressão regular ou substring	expect('hello').toMatch(/h/i)
toContain(item)	Verifica se um array contém um item específico	expect(['apple', 'banana']).toContain('apple')
toThrow(error?)	Verifica se uma função lança um erro	expect(() => fn()).toThrow()
toBeInstanceOf(Class)	Verifica se o objeto é instância de uma classe específica	expect(new Date()).toBeInstanceOf(Date)
toHaveProperty(keyPath, value?)	Verifica se um objeto tem uma propriedade com determinado valor	expect(obj).toHaveProperty('name', 'John')
toBeCloseTo(number, numDigits?)	Verifica proximidade entre números (útil para ponto flutuante)	expect(0.1 + 0.2).toBeCloseTo(0.3)

Esses matchers ajudam a escrever testes claros e objetivos, melhorando a legibilidade e manutenção do código de testes.

Conclusão

Realizar testes unitários com Vitest é uma prática fundamental para assegurar a qualidade do código em projetos modernos com React e TypeScript. Sua velocidade, simplicidade e integração nativa com o Vite fazem dele uma excelente alternativa aos frameworks tradicionais como o Jest.

Ao implementar testes automatizados — como o exemplo prático com formatação de datas — você aumenta a confiabilidade do seu código, reduz erros e facilita futuras manutenções.

Se você está começando um novo projeto ou migrando um antigo, adotar o Vitest como sua ferramenta principal de testes pode fazer toda a diferença no seu fluxo de trabalho.