Configurando Testes com Jest e Testing Library em um Projeto TypeScript

[MyrinNew]

Este guia descreve como configurar e executar testes automatizados em um aplicativo TypeScript usando Jest e a Testing Library.


1. Instalação de Dependências

As seguintes dependências de desenvolvimento são necessárias para a configuração dos testes.






yarn add -D jest @testing-library/jest-dom ts-jest jest-environment-jsdom







Descrição das Dependências:

• jest: O framework de testes para JavaScript e TypeScript.
• @testing-library/jest-dom: Adiciona matchers personalizados para o Jest, facilitando a escrita de asserções para o estado do DOM (ex: toBeInTheDocument).
• ts-jest: Um pré-processador que permite ao Jest transpilar e executar testes escritos em TypeScript.
• jest-environment-jsdom: Fornece um ambiente de teste que simula um navegador (DOM), permitindo que os testes interajam com elementos da página como se estivessem em um ambiente real.

2. Configuração do Jest (jest.config.ts)

Crie um arquivo jest.config.ts na raiz do diretório app para definir as configurações do Jest.






/**
* Para uma explicação detalhada de cada propriedade de configuração, visite:
* https://jestjs.io/docs/configuration
*/

import type { Config } from "jest";

const config: Config = {
// Limpa mocks, instâncias, contextos e resultados antes de cada teste
clearMocks: true,

// Habilita a coleta de informações de cobertura de código durante a execução dos testes
collectCoverage: true,

// O diretório onde o Jest deve gerar os arquivos de cobertura
coverageDirectory: "coverage",

// O provedor que será usado para instrumentar o código para cobertura
coverageProvider: "v8",

// Diretórios onde o Jest deve procurar por módulos
moduleDirectories: ["node_modules", "src"],

// Mapeia expressões regulares para nomes de módulos, permitindo mockar recursos
moduleNameMapper: {
// Permite o uso de alias de importação (ex: `@/components/...`)
"^@/(.*)$": "/src/$1",
// Mocka arquivos de estilo para que o Jest não tente interpretá-los
"\.(css|less|scss|sass)$": "identity-obj-proxy",
},

// Um preset que é usado como base para a configuração do Jest
preset: "ts-jest",

// Uma lista de caminhos para módulos que executam código para configurar o ambiente de teste
setupFilesAfterEnv: ["/jest.setup.ts"],

// O ambiente de teste que será usado
testEnvironment: "jsdom",

// Um mapa de expressões regulares para caminhos de transformadores
transform: {
"^.+\.(ts|tsx)$": [
"ts-jest",
{
tsconfig: {
jsx: "react-jsx",
},
},
],
},
};

export default config;







3. Configuração do Ambiente de Teste (jest.setup.ts)

Crie um arquivo jest.setup.ts na raiz do diretório app. Este arquivo é executado antes de cada suíte de testes e é ideal para configurar o ambiente global de testes.






import '@testing-library/jest-dom';

// Mocka a função `window.matchMedia`
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation(query => ({
matches: false,
media: query,
onchange: null,
addListener: jest.fn(), // Deprecated
removeListener: jest.fn(), // Deprecated
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
});

// Define um valor padrão para `window.innerWidth`
Object.defineProperty(window, 'innerWidth', {
writable: true,
value: 1024,
});







Propósito do jest.setup.ts

• import '@testing-library/jest-dom': Importa e estende os matchers do Jest com funcionalidades específicas para o DOM, como toBeVisible(), toHaveClass(), etc.
• Mock de window.matchMedia: A JSDOM (ambiente de DOM do Jest) não implementa a API window.matchMedia, que é usada para verificar media queries (ex: para design responsivo). Este mock previne erros em componentes que dependem dessa funcionalidade.
• Definição de window.innerWidth: Define um valor padrão para a largura da janela, garantindo que os testes que dependem do tamanho da tela se comportem de maneira consistente.

4. Execução dos Testes

Para executar os testes, adicione o seguinte script ao seu package.json:






"scripts": {
"test": "jest"
}







Depois, execute o comando no seu terminal:






yarn test







O Jest irá procurar por todos os arquivos de teste (com sufixos como .test.ts, .spec.ts, etc.) no projeto, executá-los e gerar um relatório de cobertura no diretório coverage/.




More...