Estrategias de ensayo nativo: Unidad, Integración y Pruebas de extremo a extremo

Qué a un examen de unidad en retroactivo

• Funciones de utilidad] – Formatos de datos, lógica de validación, ayudantes de fecha y operaciones de matemáticas.
• Los ganchos personales] – Verifique que las transiciones estatales y los efectos secundarios se comportan como se esperaba.
• Reductores y lógica de gestión estatal > Confirma que las acciones producen el nuevo estado correcto.
• Componentes de preparación] – Asegurarse de que se produzcan los productos adecuados para los propulsores dados (aunque estas fronteras se limitan a la integración si se involucran los componentes del niño).

Ejemplo de prueba de unidad práctica

Considere una función de utilidad que formatea una cadena de fecha para la visualización en la interfaz de usuario. Una prueba de unidad proporcionaría varios valores de entrada y afirmaría la cadena de salida exacta.

import { formatDisplayDate } from './dateUtils';

describe('formatDisplayDate', () => {
 it('returns "Today" for the current date', () => {
 const now = new Date();
 expect(formatDisplayDate(now)).toBe('Today');
 });

 it('returns "Yesterday" for one day ago', () => {
 const yesterday = new Date();
 yesterday.setDate(yesterday.getDate() - 1);
 expect(formatDisplayDate(yesterday)).toBe('Yesterday');
 });

 it('returns a formatted short date for older dates', () => {
 const date = new Date('2024-03-15');
 expect(formatDisplayDate(date)).toBe('Mar 15');
 });
});

Estas pruebas se ejecutan en milisegundos y proporcionan una retroalimentación inmediata. No requieren un dispositivo o emulador, haciéndolos ideales para un gancho pre-commitir o un rápido cheque local durante el desarrollo.

Beneficios de la prueba de unidad

• El bucle de retroalimentación rápida] – Las pruebas de unidad se ejecutan en una fracción de segundo, permitiendo a los desarrolladores a iterar rápidamente.
• Exactitud de punto] – Cuando una prueba de unidad falla, el alcance del fallo es inmediatamente claro.
• Permite TDD] – El desarrollo impulsado por los ensayos se vuelve más natural cuando las pruebas son ligeras y se centran.
• Documentación por ejemplo] – Las pruebas de unidad bien escritas sirven como documentación ejecutable para cómo se pretende que una función se comporta.

Pruebas de integración: Colaboraciones de componentes verificadores

Mientras que las pruebas de unidad confirman que las piezas individuales funcionan en forma aislada, las pruebas de integración verifican que esas piezas funcionan correctamente. En una aplicación React Native, las pruebas de integración a menudo implican la fabricación de un árbol de componentes, simulando las interacciones de los usuarios, y afirmando que la interfaz de usuario actualiza según lo esperado.

React Native Testing Library (RNTL)] es la herramienta de ir a pruebas de integración. RNTL se basa en la parte superior de Jest y proporciona utilidades para renderizar componentes, consultando la salida renderizada y disparando eventos. Promueve el comportamiento de prueba que los usuarios experimentan realmente en lugar de detalles de la implementación interna.

Qué hacer para la integración de la prueba de reacción

• Interacciones complejas – ¿Apretando un botón activa la navegación correcta o el cambio de estado?
• Form workflows – ¿Los mensajes de validación aparecen cuando los campos requeridos están vacíos?
• Flujo de datos] – ¿Se actualiza correctamente un componente de lista cuando los datos se obtienen de una API (con solicitudes de red modificadas)?
• Comportamiento de nivel decreciente] – ¿La pantalla de inicio de sesión completa pasa de estado ocioso a cargar estado a estado de error?

Prueba de integración práctica Ejemplo

Imagine una pantalla de inicio de sesión con campos de correo electrónico y contraseña, un botón de envío y un área de error de validación. Utilizando RNTL, puede simular el llenado en campos y pulsar el botón, a continuación, afirma que el mensaje de error esperado aparece cuando un campo está vacío:

import { render, fireEvent, screen } from '@testing-library/react-native';
import LoginScreen from '../screens/LoginScreen';

describe('LoginScreen', () => {
 it('shows validation error when email is empty on submit', () => {
 render(<LoginScreen />);

 const emailInput = screen.getByPlaceholderText('Email');
 const submitButton = screen.getByRole('button', { name: 'Log In' });

 // Leave email empty, fill in password
 fireEvent.changeText(screen.getByPlaceholderText('Password'), 'myPassword123');
 fireEvent.press(submitButton);

 expect(screen.getByText('Please enter your email address')).toBeTruthy();
 });
});

Esta prueba confirma que el componente aplica reglas de validación cuando el usuario intenta presentar una forma incompleta. No se burla de funciones internas o se preocupa por los detalles de la implementación de la biblioteca de validación de ácido#8212; prueba el comportamiento de la cara del usuario.

Beneficios de la prueba de integración

• Catches interaction bugs] – Descubre temas que solo se pueden ver cuando los componentes se comunican, como los manipuladores incorrectos de eventos o mal configurados.
• La confianza más alta que las pruebas unitarias solas] – Las pruebas de unidad de paso para funciones individuales no garantizan que esas funciones funcionen correctamente.
• Los equilibrios de velocidad y realismo – Los exámenes de integración son más lentos que los exámenes de unidad, pero mucho más rápido que los ensayos de E2E, ocupando un terreno medio valioso en la pirámide de prueba.

Pruebas de fin a fin: simulando la experiencia real de usuario

Una prueba E2E lanza la aplicación en un dispositivo o emulador, navega a través de pantallas, introduce datos y verifica que la aplicación se comporta como un usuario real. Estas pruebas ejercitan la pila completa, incluyendo la interfaz de usuario, módulos nativos, APIs backend y almacenamiento de dispositivos.

Detox es el principal marco de pruebas E2E para React Native. Construido por Wix, Detox está diseñado específicamente para React Native y proporciona capacidades de prueba de grises. Se ejecuta pruebas en un dispositivo (real o emulado), se sincroniza con los ciclos de animación y red nativa de la aplicación, y ofrece una API limpia para las interacciones de usuario.

Qué a E2E prueba en retroactivo nativo

• Viajes de usuario críticos] – Creación de cuentas, búsqueda de productos, flujo de comprobación, actualizaciones de perfiles.
• Navigación y vinculación profunda – Asegurar que el uso de una notificación de enlaces profundos a la pantalla correcta.
• Comportamiento de oficina] – ¿La aplicación maneja con gracia la pérdida de red durante una operación clave?
• Corrientes de notificación de envío] – ¿Aceptar una notificación conduce al estado de pantalla esperado?

Ejemplo práctico de prueba E2E con Detox

describe('Checkout Flow', () => {
 beforeAll(async () => {
 await device.launchApp();
 });

 it('should add item to cart and complete purchase', async () => {
 await element(by.text('Add to Cart')).tap();
 await expect(element(by.text('Cart (1)'))).toBeVisible();

 await element(by.text('Checkout')).tap();

 await element(by.id('emailInput')).typeText('[email protected]');
 await element(by.id('passwordInput')).typeText('securePassword');
 await element(by.text('Log In')).tap();

 await element(by.text('Confirm Purchase')).tap();
 await expect(element(by.text('Order Confirmed'))).toBeVisible();
 });
});

Esta prueba lanza la aplicación, interactúa con la interfaz de usuario exactamente como lo haría un usuario, y valida que el flujo de compra se completa con éxito. Debido a que Detox sincroniza con el ciclo de renderización de la aplicación, sabe cuándo las animaciones y solicitudes de red han terminado, reduciendo las pruebas de flaky.

Beneficios de la prueba de fin a fin

• Confianza similar a la producción – E2E prueba valida la aplicación en un entorno que refleja de cerca lo que los usuarios experimentan.
• Catches integration gaps] – Issues that span multiple subsystems, such as a backend change that breaks a mobile API contract, are caught before release.
• Validates integraciones de terceros >#8211; Las puertas de pago, proveedores de autenticación y SDKs analíticos se prueban en contexto.
• Provee una red de seguridad para las principales versiones] – Ejecutar una suite completa de E2E antes de que un golpe de versión le dé confianza al equipo en el envío.

Creación de una estrategia de prueba equilibrada

Un error común es sobre-invertir en un tipo de prueba mientras descuida a otros. El concepto de pirámide de prueba, popularizado por Mike Cohn, recomienda un gran número de pruebas de unidad rápidas y aisladas en la base, un número moderado de pruebas de integración en el medio, y un pequeño número de pruebas de E2E lentas y costosas en la parte superior.

Para una aplicación típica de React Native, esto podría traducir a:

• 70% de pruebas de unidad] – Cubrir funciones de utilidad, ganchos, reductores y componentes simples de presentación.
• 20% integration tests] – Focusing on screen-level workflows, form validation, and component interactions with mocked dependentncies.
• 10% de pruebas de extremo a extremo – Protección de los viajes de usuario más críticos y de los flujos de bloqueo de liberación.

Estos porcentajes son un punto de partida, no una regla rígida. Ajusta la mezcla basada en la complejidad de tu aplicación, el tamaño del equipo y el perfil de riesgo. Si tu aplicación maneja transacciones financieras sensibles, podrías asignar más presupuesto a las pruebas E2E para el flujo de pago.

Automatización e integración de CI

El análisis se vuelve realmente eficaz cuando se automatiza. Realizar pruebas manualmente es propensa a errores y no escala. Integrar su suite de prueba en un oleoducto de integración continua (CI) como GitHub Actions, Bitrise o CircleCI.

Configure CI para realizar pruebas de unidad e integración en cada solicitud de tirada. Estas pruebas son lo suficientemente rápidas para completar en unos minutos, proporcionando una rápida retroalimentación a los desarrolladores. Reserve E2E pruebas para fusionarse con la rama principal o para las carreras nocturnas, ya que tardan más y requieren más infraestructura.

Detox, por ejemplo, puede funcionar en CI usando emuladores Android o simuladores iOS. Los servicios como BrowserStack y Sauce Labs ofrecen granjas de dispositivos basadas en la nube para ejecutar pruebas E2E a escala sin mantener un laboratorio local de dispositivos.

Pitfalls comunes y cómo evitarlos

Pruebas de Flaky

Pruebas descaradas que pasan y fallan intermitentemente erosionando la confianza en la suite de prueba. Las causas comunes incluyen problemas de tiempo (esperando una animación o solicitud de red para completar), estado compartido entre pruebas y dependencia de servicios externos. Use la sincronización integrada de Detox, evite compartir estado mutable y burla API externas en pruebas de integración para reducir el coquetismo.

Detalles de la aplicación de los ensayos

Los exámenes que se rompen cuando se refactor código interno (sin cambios de comportamiento) son una bandera roja. RNTL desalienta la prueba interna de estado o componente directamente. En lugar de ello, prueba con qué ve e interactúa el usuario. Esto hace que las pruebas sean más resistentes y más valiosas.

Cambio de imagen

Si te burlas de la capa API, no estás probando la integración entre tu app y el verdadero backend. Haz mocos de reserva para servicios externos que sean lentos, poco fiables o costosos para llamar en pruebas, y prueba las verdaderas rutas de integración cuando sea posible.

Ignorar el comportamiento del módulo nativo

React Native bridges JavaScript and native code. Algunos errores sólo se pueden ver en dispositivos reales. Mientras que las pruebas E2E en los emuladores capturan muchos problemas, ejecutando un subconjunto de pruebas críticas en dispositivos físicos antes de la liberación es una práctica sabia.

Resumen de Herramientas y Ecosistemas