PricingLoginStart free
React Native Academy · Lección

Perfeccionamiento, pruebas y publicación en ambas tiendas

Escriba pruebas unitarias para los hooks principales, añada un flujo E2E de Maestro para el recorrido crítico, optimice el bundle, genere los recursos para las tiendas y envíe la aplicación a App Store y Google Play.

Lección 4 de 413 pasos

Perfeccionamiento, pruebas y publicación en ambas tiendas es una lección gratuita de React Native Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Native Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Native Academy incluye 4 lecciones en total.

Tramo final: perfeccionar, probar y publicar

La última fase de cualquier proyecto de aplicación es la que más disciplina exige: perfeccionar los detalles que los usuarios realmente notarán, escribir pruebas que detecten regresiones antes de que lleguen a producción y ejecutar el proceso de envío para ambas tiendas. Cada una de estas tareas parece que debería ser rápida, pero requiere tanto tiempo como el desarrollo de funcionalidades; planifique el tiempo en consecuencia. Una aplicación bien pulida y con una cobertura de pruebas adecuada se publica con confianza.

Perfeccionamiento de la interfaz: espaciado y tipografía coherentes

El perfeccionamiento comienza con los tokens de diseño: una única fuente de verdad para el espaciado, los tamaños y pesos de fuente, los radios de borde y los colores. Defínalos en un archivo theme.ts e impórtelos en todas partes, en lugar de escribir valores fijos como padding: 16 dispersos por las pantallas. La coherencia es lo que hace que una aplicación parezca premium: cuando todos los botones tienen la misma altura, todos los encabezados usan la misma fuente y todas las tarjetas tienen la misma sombra, la interfaz transmite intención.

// src/theme.ts
export const theme = {
  colors: {
    primary: '#007AFF',
    background: '#F2F2F7',
    surface: '#FFFFFF',
    text: '#000000',
    textSecondary: '#8E8E93',
    error: '#FF3B30',
    success: '#34C759',
  },
  spacing: {
    xs: 4, sm: 8, md: 16, lg: 24, xl: 32
  },
  typography: {
    largeTitle: { fontSize: 34, fontWeight: '700' },
    title: { fontSize: 22, fontWeight: '600' },
    body: { fontSize: 17, fontWeight: '400' },
    caption: { fontSize: 12, fontWeight: '400' },
  },
  borderRadius: { sm: 8, md: 12, lg: 16, full: 999 },
};

Auditoría de accesibilidad

La accesibilidad es tanto un requisito legal como un indicador de calidad. Audite su aplicación para comprobar: etiquetas accesibles en todos los botones de icono (accessibilityLabel), tamaños mínimos de las áreas táctiles de 44×44pt en iOS y 48×48dp en Android, roles de accesibilidad correctos (accessibilityRole='button' para elementos que se pueden pulsar) y contraste de color (al menos 4.5:1 para el texto del cuerpo). Use Accessibility Inspector de iOS o TalkBack de Android para probar el comportamiento del lector de pantalla.

// Accessible icon button
<TouchableOpacity
  onPress={handleDelete}
  accessibilityLabel='Delete habit'
  accessibilityRole='button'
  accessibilityHint='Permanently removes this habit and its history'
  style={{ padding: 12 }}  // Ensures 44pt touch target with 20pt icon
>
  <Ionicons name='trash-outline' size={20} color='#FF3B30' />
</TouchableOpacity>

// Screen reader text for images
<Image
  source={{ uri: habit.icon }}
  accessibilityLabel={`${habit.name} habit icon`}
  accessible={true}
/>

Escribir pruebas unitarias para los hooks principales

Pruebe con pruebas unitarias la lógica de negocio independiente de la interfaz: cálculos, hooks con consultas simuladas y funciones auxiliares. El cálculo de rachas es un candidato perfecto: pruebe casos límite como un arreglo vacío, un solo día, un intervalo intermedio y el caso en que hoy no se haya completado. Use @testing-library/react-native con renderHook para probar hooks personalizados que utilizan el estado y los efectos de React.

// src/utils/__tests__/streaks.test.ts
import { calculateStreak } from '../streaks';

describe('calculateStreak', () => {
  it('returns 0 for empty completions', () => {
    expect(calculateStreak([])).toBe(0);
  });

  it('returns 1 when only today is completed', () => {
    const today = new Date().toISOString().split('T')[0];
    expect(calculateStreak([today])).toBe(1);
  });

  it('returns correct streak for consecutive days', () => {
    const dates = ['2026-06-21', '2026-06-20', '2026-06-19'];
    // Mock today as 2026-06-21 in tests
    expect(calculateStreak(dates)).toBe(3);
  });

  it('stops at a gap', () => {
    // Today=21, gap at 20, then 19
    const dates = ['2026-06-21', '2026-06-19'];
    expect(calculateStreak(dates)).toBe(1);
  });
});

Pruebas de componentes con React Native Testing Library

Escriba pruebas de componentes para los elementos de interfaz más utilizados: HabitCard, que muestra el nombre y la racha del hábito; CheckInButton, que cambia de estado al pulsarlo; y OfflineBanner, que aparece únicamente cuando no hay conexión. Simule las dependencias (Supabase y React Query) en el límite de la prueba para probar los componentes de forma aislada, sin realizar llamadas de red reales.

// src/components/__tests__/HabitCard.test.tsx
import { render, fireEvent } from '@testing-library/react-native';
import { HabitCard } from '../HabitCard';

const mockHabit = {
  id: '1', name: 'Morning Run', icon: 'run',
  color: '#007AFF', streak: 5
};

it('renders habit name and streak', () => {
  const { getByText } = render(<HabitCard habit={mockHabit} onPress={() => {}} />);
  expect(getByText('Morning Run')).toBeTruthy();
  expect(getByText('5 days')).toBeTruthy();
});

it('calls onPress when tapped', () => {
  const onPress = jest.fn();
  const { getByTestId } = render(
    <HabitCard habit={mockHabit} onPress={onPress} testID='habit-card' />
  );
  fireEvent.press(getByTestId('habit-card'));
  expect(onPress).toHaveBeenCalledTimes(1);
});

E2E con Maestro: prueba del recorrido crítico

Escriba un flujo de Maestro para el recorrido crítico del usuario: iniciar sesión, crear un hábito, registrar su cumplimiento, verificar que la racha se actualiza y cerrar sesión. Esto detecta errores de integración que las pruebas unitarias no encuentran: el estado de navegación, las llamadas de red y el estado de la interfaz funcionando conjuntamente. Ejecútelo en un simulador o dispositivo real en cada compilación de CI antes de promocionar la aplicación al siguiente canal de pruebas.

# maestro/critical-path.yaml
---
appId: com.yourcompany.habittracker
---
- launchApp:
    clearState: true
- tapOn: 'Sign In'
- inputText: 'test@example.com'
- tapOn: 'Password'
- inputText: 'TestPass123!'
- tapOn: 'Sign In'
- waitForAnimationToEnd
- assertVisible: 'My Habits'
- tapOn: 'Add Habit'
- inputText: 'Morning Run'
- tapOn: 'Save'
- waitForAnimationToEnd
- assertVisible: 'Morning Run'
- tapOn:
    id: 'check-in-btn-1'
- waitForAnimationToEnd
- assertVisible: '1 day'  # Streak shows 1 day
- tapOn: 'Settings'
- tapOn: 'Sign Out'
- assertVisible: 'Sign In'

Optimización del tamaño del bundle

Antes de enviar la aplicación, analice y minimice el bundle de JavaScript. Use react-native-bundle-visualizer para identificar las dependencias de gran tamaño. Algunas optimizaciones habituales son sustituir moment.js (280 KB) por date-fns (compatible con tree shaking, unos 5 KB por importación), eliminar los paquetes de iconos que no utilice (importe únicamente los iconos que use) y aplicar carga diferida (React.lazy + Suspense) a pantallas pesadas, como ajustes o incorporación, que los usuarios rara vez visitan después del primer inicio.

# Analyze bundle
npx react-native-bundle-visualizer

# Opens a visual treemap in browser showing:
# - node_modules breakdown by size
# - Your source code size
# - Duplicate modules

# Common large packages to replace:
# moment (280KB) -> date-fns tree-shaking
# lodash (full, 70KB) -> lodash-es specific imports
# FontAwesome all icons -> import only used icons

# Result: each 100KB reduction = ~50KB gzip reduction
# = faster first install + lower Play/App Store size

Generar recursos para las tiendas

Cree los recursos gráficos necesarios para la tienda antes de enviar la aplicación: icono de la aplicación (1024×1024 para iOS, icono adaptativo para Android), pantalla de inicio (todas las variantes de tamaño mediante la configuración de pantalla de inicio de Expo), capturas de pantalla (entre 3 y 6 como mínimo por cada tamaño de dispositivo requerido) y un gráfico promocional (1024×500 para Android). Use una herramienta de diseño como Figma, junto con plugins de marcos de dispositivos, para crear capturas de pantalla de aspecto profesional sin necesitar un diseñador de marketing.

// app.json — icon and splash configuration
{
  'expo': {
    'icon': './assets/icon.png',        // 1024x1024 PNG
    'splash': {
      'image': './assets/splash.png',
      'resizeMode': 'contain',
      'backgroundColor': '#007AFF'
    },
    'ios': {
      'icon': './assets/icon.png'
    },
    'android': {
      'icon': './assets/icon.png',
      'adaptiveIcon': {
        'foregroundImage': './assets/adaptive-icon.png',
        'backgroundColor': '#007AFF'
      }
    }
  }
}

Compilación final para producción

Inicie las compilaciones de producción de EAS para ambas plataformas. Verifique que el número de versión y el código de versión sean correctos antes de compilar; cambiarlos después requiere una nueva compilación. Ejecute ambas compilaciones en paralelo para ahorrar tiempo. Cuando ambas hayan terminado, súbalas a TestFlight y a las pruebas internas de Play Console para realizar una última prueba de humo con el binario exacto de producción antes de enviarlo a revisión.

# Verify versions before building
cat app.json | grep '"version"'
# -> "version": "1.0.0"
# -> "versionCode": 1
# -> "buildNumber": "1"

# Build both platforms in parallel
eas build --platform ios --profile production &
eas build --platform android --profile production &
wait

# Or use the combined command:
eas build --platform all --profile production

# After builds complete, check status:
eas build:list --status finished --limit 2

Prueba de humo de la compilación de producción

Instale el binario exacto de producción en un dispositivo real antes de enviarlo a revisión. Suba el .ipa de iOS a TestFlight y el .aab de Android a las pruebas internas de Play Console. Pruebe desde cero el flujo de registro, la funcionalidad principal, las notificaciones push y el flujo de compra (si corresponde); no dé por supuesto que el comportamiento de la versión de desarrollo coincide con el de la compilación de producción. Las compilaciones de producción tienen configuraciones diferentes de firma, minificación y ProGuard que pueden revelar errores que no se detectan durante el desarrollo.

// Pre-submission smoke test checklist:

// Install production build on physical device
// (not simulator — push notifications require real device)

// Test:
// [ ] Fresh install and sign up flow
// [ ] Sign out and sign in with existing account
// [ ] Core feature: create, complete, view streak
// [ ] Push notification: schedule and receive
// [ ] Background behavior: close and reopen app
// [ ] Deep links from browser/email
// [ ] Offline: airplane mode then restore network
// [ ] Landscape orientation (if not locked)
// [ ] All tabs and major screens load without crash
// [ ] Performance: no jank on FlatList scroll

Envío a ambas tiendas

Envíe la aplicación a ambas tiendas simultáneamente para que los plazos de revisión coincidan y pueda lanzarla en ambas plataformas el mismo día. Use eas submit para ambas. La revisión de App Store suele tardar entre 1 y 3 días; la de Google Play, entre 1 y 7 días para una primera aplicación (las actualizaciones suelen tardar menos). Prepare los recursos de marketing (sitio web de la aplicación, publicaciones en redes sociales y dossier de prensa) para poder anunciar el lanzamiento en cuanto ambas tiendas lo aprueben. Supervise a diario los paneles de revisión de ambas tiendas durante el periodo de revisión.

# Submit to App Store (TestFlight first, then App Review)
eas submit --platform ios --latest

# Submit to Play Console (internal -> production)
eas submit --platform android --latest

# Or submit both at once:
eas submit --platform all --latest

# After submission:
# iOS: App Store Connect > App > 1.0 Prepare for Submission
#      > Add for Review > Submit to App Review
# Android: Play Console > Production > Create release
#           > Promote internal build > Review > Start rollout

Comprobación rápida

Compruebe su comprensión de los conceptos de React Native Mobile Development tratados en esta lección.

Responde en la lección interactiva

Resumen de la lección

En esta lección ha aprendido: a auditar y perfeccionar su aplicación con tokens de diseño, etiquetas de accesibilidad y áreas táctiles mínimas, a escribir pruebas unitarias para la lógica de rachas y pruebas de componentes con RNTL y a escribir un flujo E2E de Maestro para el recorrido de usuario crítico y enviar la aplicación a App Store y Play Store. ¡Enhorabuena! Ha completado el itinerario de React Native Mobile Development. Ahora tiene las habilidades necesarias para crear, probar y publicar aplicaciones de React Native de calidad para producción en ambas plataformas.

Gratis para empezar

Aprende JavaScript con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
30
Lecciones
120
Empezar a aprender gratisVer el curso completo

Preguntas frecuentes

¿La lección «Perfeccionamiento, pruebas y publicación en ambas tiendas» es gratis?

Sí — el texto completo de «Perfeccionamiento, pruebas y publicación en ambas tiendas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Native Academy, actualiza a CoddyKit PRO. El curso de React Native Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Perfeccionamiento, pruebas y publicación en ambas tiendas»?

Escriba pruebas unitarias para los hooks principales, añada un flujo E2E de Maestro para el recorrido crítico, optimice el bundle, genere los recursos para las tiendas y envíe la aplicación a App Sto… Practicas React Native Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Native Academy?

No se requiere experiencia previa. React Native Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Perfeccionamiento, pruebas y publicación en ambas tiendas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Native Academy?

Sí. Cada lección de React Native Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Planificación de la arquitectura y la pila tecnológica
  2. Flujo de autenticación y rutas protegidas
  3. Función principal: feed de datos con compatibilidad sin conexión
  4. Perfeccionamiento, pruebas y publicación en ambas tiendas
← Volver a React Native Academy