Inicio > Cursos > React Native > Testing en React Native
React NativeTesting y PublicaciónLección 13 de 14

Testing en React Native

El testing en React Native sigue la misma filosofía que React Testing Library para web: testea el comportamiento del usuario, no los detalles de implementación. React Native Testing Library provee getByText, getByRole, fireEvent.press, y waitFor, adaptados al contexto mobile. Los componentes se pueden testear en aislamiento sin necesitar un dispositivo real o simulador: Jest simula el entorno de React Native y puedes correr miles de tests en segundos.

Para testing de integración más completo, Detox (de Wix) automatiza la interacción con la app en un simulador/emulador real: hace tap en botones, escribe texto, verifica que aparezcan elementos. Es lento pero más confiable para flujos críticos como login, checkout, o onboarding. La estrategia recomendada: unit tests con RNTL para la mayoría de la lógica de componentes, y pocos tests Detox para los flujos más críticos del usuario.

// __tests__/Contador.test.jsx
import { render, screen, fireEvent } from "@testing-library/react-native";
import { Contador } from "../components/Contador";

describe("Contador", () => {
  it("muestra el valor inicial", () => {
    render(<Contador inicial={0} />);
    expect(screen.getByText("0")).toBeTruthy();
  });

  it("incrementa al presionar +", () => {
    render(<Contador inicial={5} />);
    fireEvent.press(screen.getByText("+"));
    expect(screen.getByText("6")).toBeTruthy();
  });

  it("no permite valores negativos", () => {
    render(<Contador inicial={0} />);
    fireEvent.press(screen.getByText("-"));
    expect(screen.getByText("0")).toBeTruthy(); // Sigue en 0
  });
});

// Mock de módulos nativos
jest.mock("expo-location", () => ({
  requestForegroundPermissionsAsync: jest.fn().mockResolvedValue({ status: "granted" }),
  getCurrentPositionAsync: jest.fn().mockResolvedValue({
    coords: { latitude: 19.4326, longitude: -99.1332, accuracy: 5 }
  }),
}));

jest.mock("@react-native-async-storage/async-storage", () =>
  require("@react-native-async-storage/async-storage/jest/async-storage-mock")
);

// Test con mock de fetch
global.fetch = jest.fn().mockResolvedValue({
  ok: true,
  json: () => Promise.resolve([{ id: 1, nombre: "Test" }])
});

test("carga datos de API", async () => {
  render(<ListaScreen />);
  expect(await screen.findByText("Test")).toBeTruthy();
});
Consejo🧪 Mockea todos los módulos nativos (cámara, GPS, AsyncStorage). Los tests no corren en un dispositivo real, así que las APIs nativas no están disponibles.
← Networking y APIs RESTBuild y Publicación con EAS →

Practica esta lección

Resuelve los ejercicios del curso de React Native en la app, gratis y con corrección automática.

Empezar a practicar