0Pricing
Frontend Academy · Aula

Configuração do Jest e testes básicos

Instale o Jest, escreva testes com describe/it/expect, use matchers como toBe e toEqual e execute testes no modo de observação durante o desenvolvimento.

Configuração do Jest e testes básicos é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Por que testar código de frontend?

Os testes detectam regressões quando você altera o código. Documentam o comportamento esperado. Dão confiança para refatorar. Sem testes, toda alteração é uma aposta de que algo mais não quebrou.

Instalando o Jest

Em um projeto Vite + React, use Vitest (um executor de testes compatível com Jest e nativo do Vite). Em outras configurações, instale Jest com babel-jest ou ts-jest para TypeScript.

# Vitest (preferred for Vite projects):
npm install -D vitest

# Or Jest with TypeScript:
npm install -D jest @types/jest ts-jest

Nomenclatura dos arquivos de teste

Coloque os arquivos de teste ao lado do código-fonte: Button.test.ts, utils.spec.ts. Ou em uma pasta __tests__/. O Jest encontra arquivos que correspondem a *.test.* ou *.spec.*.

describe, it, expect

Estruture os testes com blocos describe (grupos) e funções it/test (testes individuais). Faça asserções com expect.

import { add, formatCurrency } from './utils';

describe('Math utils', () => {
  it('adds two numbers', () => {
    expect(add(2, 3)).toBe(5);
  });

  it('handles negative numbers', () => {
    expect(add(-1, 1)).toBe(0);
  });
});

describe('Currency formatting', () => {
  it('formats USD', () => {
    expect(formatCurrency(1234.5, 'USD')).toBe('$1,234.50');
  });
});

Verificadores comuns

O Jest oferece muitos verificadores: toBe (igualdade estrita), toEqual (igualdade profunda), toContain, toHaveLength, toBeNull, toBeTruthy, toBeFalsy, toThrow, toBeGreaterThan.

expect([1,2,3]).toHaveLength(3);
expect({ a: 1, b: 2 }).toEqual({ a: 1, b: 2 });
expect('hello world').toContain('world');
expect(() => { throw new Error('boom'); }).toThrow('boom');
expect(null).toBeNull();
expect(true).toBeTruthy();

Testando código assíncrono

Retorne a promessa ou use async/await nos testes. O Jest aguarda a resolução da promessa antes de marcar o teste como concluído.

it('fetches user data', async () => {
  const user = await fetchUser(1);
  expect(user.name).toBe('Alice');
});

// Or with resolves/rejects matchers:
it('resolves with user', () => {
  return expect(fetchUser(1)).resolves.toMatchObject({ name: 'Alice' });
});

beforeEach e afterEach

Execute a configuração e a limpeza antes/depois de cada teste para manter os testes isolados.

describe('User service', () => {
  beforeEach(() => {
    db.seed();
  });
  afterEach(() => {
    db.clear();
  });
  it('creates a user', async () => {
    const user = await userService.create({ name: 'Alice' });
    expect(user.id).toBeDefined();
  });
});

Executando testes

npm test executa todos os testes. npm test -- --watch (Jest) ou vitest no modo de observação executa novamente os testes quando um arquivo é alterado. A interface do Vitest (vitest --ui) fornece um executor de testes baseado no navegador.

Cobertura de testes

jest --coverage (ou vitest run --coverage) gera um relatório de cobertura que mostra quais linhas são testadas. Uma meta de cobertura de 70% ou mais é comum entre as equipes. Cobertura de 100% não significa ausência de erros.

Escrevendo código testável

Funções puras (sem efeitos colaterais) são facilmente testáveis. Mantenha as funções pequenas e focadas. Injete dependências em vez de importá-las diretamente — isso facilita a substituição por dublês de teste.

Isolamento dos testes

Cada teste deve ser completamente independente. Testes que dependem dos efeitos colaterais uns dos outros são frágeis. Evite estado mutável compartilhado entre os testes. Redefina todas as simulações em afterEach.

Verificação rápida

Qual verificador do Jest verifica a igualdade profunda de dois objetos?

Recapitulação: fundamentos do Jest

describe agrupa testes. it/test define testes individuais. expect + verificadores fazem asserções sobre os resultados. toBe é usado para valores primitivos. toEqual é usado para objetos/matrizes. Testes assíncronos usam async/await ou retornam a promessa. beforeEach/afterEach garantem o isolamento. Relatórios de cobertura mostram quais linhas são testadas. Funções puras são as mais fáceis de testar.

Perguntas Frequentes

A aula “Configuração do Jest e testes básicos” é grátis?

Sim — o texto completo de “Configuração do Jest e testes básicos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Configuração do Jest e testes básicos”?

Instale o Jest, escreva testes com describe/it/expect, use matchers como toBe e toEqual e execute testes no modo de observação durante o desenvolvimento. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Configuração do Jest e testes básicos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Configuração do Jest e testes básicos
  2. @testing-library/react: render userEvent
  3. @testing-library/vue: montagem de componentes
  4. Simulação de módulos e chamadas de API
← Voltar para Frontend Academy