Configurando Testes com Jest e Testing Library em um Projeto TypeScript

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/...`)
    "^@/(.*)$": "<rootDir>/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: ["<rootDir>/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/.