Configuração do Jest para Expo

jest-expo fornece aos projetos Expo SDK 57 um preset Jest funcional: módulos nativos são simulados, transformações TypeScript são configuradas e você pode executar testes unitários e de componentes em cada commit sem iniciar um simulador.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

npx expo install jest-expo jest @types/jest @testing-library/react-native test-renderer --dev

{
  "scripts": {
    "test": "jest --watchAll",
    "test:ci": "jest --ci --coverage=false"
  },
  "jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg)"
    ],
    "setupFilesAfterEnv": ["<rootDir>/jest.setup.ts"]
  }
}

// jest.setup.ts
import "@testing-library/react-native";
 
afterEach(() => {
  jest.clearAllMocks();
});

Quando usar isso:

• Todos os aplicativos Expo que entregam recursos - execute testes em CI antes das builds do EAS.
• Testes de componentes e hooks com @testing-library/react-native (veja React Native Testing Library).
• Utilitários TypeScript puros (formatadores, reducers, mappers de API) sem importações nativas.
• Testes de snapshot para componentes de apresentação pequenos e estáveis - não árvores de navegação.

Exemplo Funcional

# Da raiz do projeto (Expo SDK 57)
npx expo install jest-expo jest @types/jest @testing-library/react-native test-renderer --dev

// package.json (excerto)
{
  "scripts": {
    "test": "jest --watchAll",
    "test:ci": "jest --ci --coverage=false --changedSince=origin/main",
    "test:update-snapshots": "jest -u --coverage=false"
  },
  "jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg)"
    ],
    "setupFilesAfterEnv": ["<rootDir>/jest.setup.ts"],
    "collectCoverageFrom": [
      "**/*.{ts,tsx}",
      "!**/__tests__/**",
      "!**/coverage/**",
      "!**/node_modules/**",
      "!**/.expo/**",
      "!**/expo-env.d.ts"
    ]
  }
}

// jest.setup.ts
import "@testing-library/react-native";
 
// Reinicia os mocks de módulo entre os testes quando você usa jest.mock em escopo de arquivo.
afterEach(() => {
  jest.clearAllMocks();
});

// tsconfig.json (excerto - habilita globais do Jest no TypeScript)
{
  "compilerOptions": {
    "types": ["jest"]
  }
}

// src/components/greeting.tsx
import { StyleSheet, Text, View } from "react-native";
 
export function Greeting({ name }: { name: string }) {
  return (
    <View style={styles.container}>
      <Text accessibilityRole="header">Hello, {name}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { padding: 16 },
});

// __tests__/greeting-test.tsx
import { render, screen } from "@testing-library/react-native";
import { Greeting } from "../src/components/greeting";
 
describe("<Greeting />", () => {
  test("renders the name", () => {
    render(<Greeting name="Alex" />);
    expect(screen.getByRole("header", { name: "Hello, Alex" })).toBeOnTheScreen();
  });
 
  test("matches snapshot for stable markup", () => {
    const { toJSON } = render(<Greeting name="Alex" />);
    expect(toJSON()).toMatchSnapshot();
  });
});

O que isso demonstra:

• Preset jest-expo - configuração Babel zero customizada para projetos Expo padrão.
• transformIgnorePatterns - transpila pacotes ESM que o Jest de outra forma pularia.
• jest.setup.ts - importa RNTL uma vez para que os matchers do Jest (toBeOnTheScreen) sejam registrados.
• Nomenclatura *-test.tsx - reconhecida por jest-expo sem configuração testMatch adicional.
• Snapshot em um componente folha - não no shell completo do aplicativo.

Mergulho Profundo

Como Funciona

• Preset jest-expo estende o Jest com transformações cientes do Expo, mapeadores de nomes de módulos e mocks integrados para a maioria dos internos do expo-* e React Native.
• Test Renderer (via @testing-library/react-native) renderiza componentes em uma árvore JS - sem hierarquia de visualização nativa, sem simulador.
• transformIgnorePatterns diz ao Jest quais pacotes node_modules devem ser processados pelo Babel; sem ele, importações de pacotes react-native, expo-router ou de navegação geram erros de sintaxe.
• setupFilesAfterEnv é executado após a instalação do framework de teste - ideal para matchers globais, reinícios de mocks e configuração compartilhada de jest.mock.
• Timers falsos na configuração são opcionais; habilite por arquivo ao testar setTimeout, animações ou busca com debounce.

Configuração do Jest em Resumo

Aliases de Caminho de Módulo

Quando tsconfig.json mapeia @/* para ./src/*, espelhe isso no Jest:

"jest": {
  "preset": "jest-expo",
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1"
  }
}

Disciplina de Snapshots

A própria documentação do Expo recomenda Maestro E2E em vez de testes de snapshot para fluxos completos de UI - snapshots complementam, não substituem, a cobertura de integração e E2E.

Notas de TypeScript

// jest.setup.ts - helpers de mock tipados para módulos nativos
import "@testing-library/react-native";
 
type ExpoLocationMock = {
  requestForegroundPermissionsAsync: jest.Mock;
  getCurrentPositionAsync: jest.Mock;
};
 
export function getLocationMock(): ExpoLocationMock {
  return jest.requireMock("expo-location") as ExpoLocationMock;
}

• Adicione "jest" a compilerOptions.types para que describe, it e expect sejam verificados quanto a tipos.
• Instale @types/jest via expo install para se manter alinhado com a versão do Jest do SDK.
• Prefira jest.MockedFunction<typeof fn> em vez de any ao tipar imports simulados.

Armadilhas

• Testes dentro de app/ com Expo Router - Cada arquivo em app/ deve ser uma rota ou layout. Correção: Coloque os testes em __tests__/ na raiz do projeto ou colocalize *.test.tsx ao lado de src/components/.

• "Cannot use import statement outside a module" - Uma dependência envia ESM e o Jest pula a transpilação dela. Correção: Adicione o pacote a transformIgnorePatterns (ou use a regex completa recomendada pelo Expo acima).

• Esquecer test-renderer - @testing-library/react-native depende do pacote autônomo test-renderer (não do obsoleto react-test-renderer). Correção: npx expo install test-renderer --dev.

• Matchers como toBeOnTheScreen não encontrados - RNTL estende o Jest apenas depois que você importa de @testing-library/react-native. Correção: Adicione import "@testing-library/react-native" a jest.setup.ts.

• Snapshots que nunca falham - Snapshots gigantes de telas com timestamps, IDs aleatórios ou dados buscados criam ruído. Correção: Componentes de apresentação de snapshot com props fixas; teste UI baseada em dados com queries e asserções.

• Executando jest sem jest-expo - O Jest puro não simula expo-constants, expo-font ou módulos nativos. Correção: Sempre defina "preset": "jest-expo" em package.json ou jest.config.js.

• Modo de observação em CI - --watchAll trava os runners de CI. Correção: Use "test:ci": "jest --ci --coverage=false" em pipelines e verificações pré-merge.

Alternativas

FAQs

npx expo install jest-expo jest @types/jest @testing-library/react-native test-renderer --dev

"test:ci": "jest --ci --coverage=false --changedSince=origin/main"

jest.mock("expo-font", () => ({
  loadAsync: jest.fn(() => Promise.resolve()),
  isLoaded: jest.fn(() => true),
}));
 
jest.mock("expo-splash-screen", () => ({
  preventAutoHideAsync: jest.fn(() => Promise.resolve()),
  hideAsync: jest.fn(() => Promise.resolve()),
}));

Relacionados

• Noções Básicas de Testes Mobile - pirâmide de unitária → componente → integração → E2E
• React Native Testing Library - queries, async e asserções centradas no usuário
• Mocking Native Modules - mocks manuais além dos padrões jest-expo
• Maestro E2E - fluxos YAML quando Jest não é suficiente
• Container/Presenter em Mobile - apresentadores são alvos ideais para Jest + RNTL
• Integração com GitHub Actions - conecte test:ci às verificações de PR

Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).