Gerador de Configuração Jest
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
Escolha sua stack
TypeScript, React, Vue, Svelte, Node puro ou uma mistura. Cada um pré-preenche os transformadores corretos.
-
2
Escolha o ambiente de teste
jsdom para código de navegador, node para backend ou ambiente personalizado.
-
3
Ative recursos
Limites de cobertura, testes de snapshot, caminhos de mock, arquivos de configuração personalizados, padrões de ignorar transformações.
-
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
jsdompara código Node puro. Testes mais lentos e nada ganho, mude paranode. - Faltando
transformIgnorePatternspara 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
.pngem um teste e o Jest falha sem um módulo mock. - Definindo
clearMockscomo 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
Referência da Tabela ASCII
Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.
Referência de Caracteres HTML
Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.
Referência de atalhos de teclado
Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.
Gerador de EditorConfig
Gere um arquivo .editorconfig com suas regras de estilo e tamanho de indentação, fim de linha, charset e espaços em branco para formatação consistente entre IDEs e editores.
Validador de Email
Valide um endereço de email: verificação de sintaxe RFC 5322, consulta de registro MX em tempo real, além de detalhes de parte local, domínio e comprimento. Nenhum email é enviado.
Conversor de Tamanho de Arquivo
Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.
Ferramenta disponível em outros idiomas
- Jest Konfigurationsgenerator [DE]
- Générateur de configuration Jest [FR]
- Jest-konfigurationsgenerator [SV]
- Jest 설정 생성기 [KO]
- Jest-configuratiegenerator [NL]
- مولّد إعداد Jest [AR]
- Generador de Configuración de Jest [ES]
- Generator Konfigurasi Jest [ID]
- Jest 設定ジェネレーター [JA]
- เครื่องมือสร้างไฟล์ตั้งค่า Jest [TH]
- Trình tạo cấu hình Jest [VI]
- Generator konfiguracji Jest [PL]
- Jest Yapılandırma Üreticisi [TR]
- Jest 配置生成器 [ZH]
- Jest Config Generator [EN]
- Generatore di Configurazione Jest [IT]
- Генератор конфигурации Jest [RU]