Gerador de Configuração Jest

config do jest
Próximo

Escolha sua stack, TypeScript, React, backend Node, Svelte, e o gerador gera um jest.config.js com os transformadores corretos, mapeador de módulos, ambiente de teste e limites de cobertura. Inclui todas as opções que as pessoas esquecem: moduleNameMapper para CSS/imagens, setupFilesAfterEach, testPathIgnorePatterns para node_modules e dist.

Como construir uma configuração Jest

  1. 1

    Escolha sua stack

    TypeScript, React, Vue, Svelte, Node puro ou uma mistura. Cada um pré-preenche os transformadores corretos.

  2. 2

    Escolha o ambiente de teste

    jsdom para código de navegador, node para backend ou ambiente personalizado.

  3. 3

    Ative recursos

    Limites de cobertura, testes de snapshot, caminhos de mock, arquivos de configuração personalizados, padrões de ignorar transformações.

  4. 4

    Baixe a configuração

    A saída é um `jest.config.js` comentado ou `jest.config.ts`, além dos scripts npm que você deve adicionar ao `package.json`.

Saída de exemplo: projeto React + TypeScript

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  setupFilesAfterEach: ["<rootDir>/jest.setup.ts"],
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
    "\\.(jpg|jpeg|png|gif|svg)$": "<rootDir>/__mocks__/fileMock.js",
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  testPathIgnorePatterns: ["/node_modules/", "/dist/", "/build/"],
  transform: {
    "^.+\\.tsx?$": ["ts-jest", { tsconfig: "tsconfig.test.json" }]
  },
  collectCoverageFrom: [
    "src/**/*.{ts,tsx}",
    "!src/**/*.d.ts",
    "!src/**/*.stories.*"
  ],
  coverageThreshold: {
    global: { branches: 80, functions: 80, lines: 85, statements: 85 }
  }
};

Guia de decisão: qual ambiente?

Seu código roda em… Use
Navegador (DOM, janela) jsdom (ou @happy-dom/jest-environment para velocidade)
Servidor Node node
Service workers Ambiente personalizado, base node
React Native Preset react-native

Guia rápido de transformadores

Tipo de fonte Transformador
TypeScript ts-jest ou @swc/jest
JSX compilado por Babel babel-jest (padrão)
Vue SFC @vue/vue3-jest + babel-jest
Svelte svelte-jester
Imagens estáticas Mock manual em moduleNameMapper

Limites de cobertura: quais números?

  • Caminho crítico / bibliotecas: 90%+ linhas, 85%+ branches.
  • Equipes de recursos: 80% linhas, 70% branches.
  • UI em rápida mudança: 60-70% linhas; busque mais para lógica de negócios, menos para layout.
  • Protótipos: desative os limites completamente; rastreie a cobertura como um número, não como um bloqueio.

Erros comuns

  • Usar jsdom para código Node puro. Testes mais lentos e nada ganho, mude para node.
  • Faltando transformIgnorePatterns para pacotes ESM. Pacotes modernos são enviados apenas ESM; o Jest precisa ser informado para transformá-los.
  • Mockando imagens / CSS sem um mapeador. Importe um .png em um teste e o Jest falha sem um módulo mock.
  • Definindo clearMocks como falso. Mocks vazam entre testes e falhas se tornam não determinísticas. Ative por padrão.

Perguntas frequentes

SWC (@swc/jest) é 10-20x mais rápido que ts-jest porque ignora a verificação de tipo completa dentro do Jest. Execute a verificação de tipo separadamente como tsc --noEmit no CI. Use ts-jest quando você quiser que erros de tipo falhem os testes; use SWC para velocidade.

happy-dom é aproximadamente 2-3x mais rápido que jsdom e implementa um grande subconjunto das APIs DOM. Ele perde alguns casos extremos, então se você encontrar um erro “não implementado”, volte para jsdom.

Sim, se seus componentes importarem arquivos .css ou .scss diretamente. Mapeie-os para identity-obj-proxy (para módulos CSS) ou um pequeno stub vazio. Sem isso, seus testes falharão no momento da importação.

Sim. Escolha a opção de saída TypeScript e o gerador emite jest.config.ts. Jest 27+ carrega automaticamente configurações .ts quando ts-node está instalado.

Ferramentas relacionadas

Ferramenta disponível em outros idiomas