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