Configuración de Jest para Expo

jest-expo proporciona a los proyectos de Expo SDK 57 un preset de Jest funcional: los módulos nativos están simulados, las transformaciones de TypeScript están configuradas, y puedes ejecutar pruebas unitarias y de componentes en cada commit sin arrancar un simulador.

Receta

Tarjeta de referencia rápida - lista para copiar y pegar.

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();
});

Cuándo usarlo:

• Cada aplicación Expo que envíe características - ejecuta pruebas en CI antes de compilaciones EAS.
• Pruebas de componentes y hooks con @testing-library/react-native (ver React Native Testing Library).
• Utilidades puras de TypeScript (formateadores, reductores, mapeadores de API) sin importaciones nativas.
• Pruebas de snapshot para componentes presentacionales pequeños y estables - no árboles de navegación.

Ejemplo de trabajo

# Desde la raíz del proyecto (Expo SDK 57)
npx expo install jest-expo jest @types/jest @testing-library/react-native test-renderer --dev

// package.json (extracto)
{
  "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 los mocks de módulos entre pruebas cuando uses jest.mock en el scope del archivo.
afterEach(() => {
  jest.clearAllMocks();
});

// tsconfig.json (extracto - habilita globals de Jest en 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">Hola, {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("renderiza el nombre", () => {
    render(<Greeting name="Alex" />);
    expect(screen.getByRole("header", { name: "Hola, Alex" })).toBeOnTheScreen();
  });
 
  test("coincide con snapshot para markup estable", () => {
    const { toJSON } = render(<Greeting name="Alex" />);
    expect(toJSON()).toMatchSnapshot();
  });
});

Lo que esto demuestra:

• Preset jest-expo - cero config de Babel personalizada para proyectos estándar de Expo.
• transformIgnorePatterns - transpila paquetes ESM que Jest de otro modo omitería.
• jest.setup.ts - importa RNTL una sola vez para que se registren los matchers de Jest (toBeOnTheScreen).
• Nomenclatura *-test.tsx - reconocida por jest-expo sin config extra de testMatch.
• Snapshot en un componente hoja - no en la shell de toda la aplicación.

Profundización

Cómo funciona

• Preset jest-expo extiende Jest con transformaciones conscientes de Expo, mapeadores de nombres de módulos, y mocks incorporados para la mayoría de internos de expo-* y React Native.
• Test Renderer (vía @testing-library/react-native) renderiza componentes a un árbol JS - sin jerarquía de vistas nativas, sin simulador.
• transformIgnorePatterns le dice a Jest cuáles paquetes de node_modules ejecutar a través de Babel; sin esto, las importaciones de react-native, expo-router, o paquetes de navegación lanzan errores de sintaxis.
• setupFilesAfterEnv se ejecuta después de que el framework de pruebas se instale - ideal para matchers globales, reinicio de mocks, y setup de jest.mock compartido.
• Fake timers en setup son opcionales; habilita por archivo al probar setTimeout, animaciones, o búsquedas debounced.

Configuración de Jest de un vistazo

Alias de ruta de módulos

Cuando tsconfig.json mapea @/* a ./src/*, espejar en Jest:

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

Disciplina de snapshot

Los propios docs de Expo recomiendan Maestro E2E sobre pruebas de snapshot para flujos completos de UI - las snapshots complementan, no reemplazan, cobertura de integración y E2E.

Notas de TypeScript

// jest.setup.ts - ayudantes 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;
}

• Agrega "jest" a compilerOptions.types para que describe, it, y expect hagan type-check.
• Instala @types/jest vía expo install para mantenerte alineado con la versión de Jest del SDK.
• Prefiere jest.MockedFunction<typeof fn> sobre any al tipificar importaciones simuladas.

Errores comunes

• Pruebas dentro de app/ con Expo Router - Cada archivo bajo app/ debe ser una ruta o layout. Solución: Coloca pruebas en __tests__/ en la raíz del proyecto o coloca *.test.tsx junto a src/components/.

• "Cannot use import statement outside a module" - Una dependencia envía ESM y Jest omite transpilarlo. Solución: Agrega el paquete a transformIgnorePatterns (o usa la regex completa recomendada por Expo arriba).

• Olvidar test-renderer - @testing-library/react-native depende del paquete test-renderer independiente (no del deprecated react-test-renderer). Solución: npx expo install test-renderer --dev.

• Matchers como toBeOnTheScreen no encontrados - RNTL extiende Jest solo después de que importes de @testing-library/react-native. Solución: Agrega import "@testing-library/react-native" a jest.setup.ts.

• Snapshots que nunca fallan - Snapshots gigantes de pantallas con timestamps, IDs aleatorios, o datos obtenidos crean ruido. Solución: Snapshot de componentes presentacionales con props fijas; prueba UI impulsada por datos con queries y aserciones.

• Ejecutar jest sin jest-expo - Jest plano no simula expo-constants, expo-font, o módulos nativos. Solución: Siempre establece "preset": "jest-expo" en package.json o jest.config.js.

• Modo watch en CI - --watchAll cuelga los runners de CI. Solución: Usa "test:ci": "jest --ci --coverage=false" en pipelines y pre-merge checks.

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()),
}));

Relacionado

• Mobile Testing Basics - pirámide de unitarias → componentes → integración → E2E
• React Native Testing Library - queries, async, y aserciones centradas en el usuario
• Mocking Native Modules - mocks manuales más allá de defaults de jest-expo
• Maestro E2E - flujos YAML cuando Jest no es suficiente
• Container/Presenter on Mobile - los presenters son objetivos ideales para Jest + RNTL
• GitHub Actions Integration - conecta test:ci a pre-merge checks

Versiones de stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).