Realizar testing en React Native usando Jest

Tiempo de lectura: 2 minutos

Hola, hoy vamos a aprender, como realizar testing usando Jest en React Native y Expo.

Supongamos que tienes un componente de login llamado LoginScreen que contiene campos de entrada de usuario y contraseña, así como un botón de inicio de sesión.

En primer lugar, asegúrate de tener Jest configurado en tu proyecto de React Native. Puedes instalar Jest ejecutando el siguiente comando en la raíz de tu proyecto:

npm install --save-dev jest
npx expo install jest-expo jest
npm install --save-dev @testing-library/react-native

Una vez que Jest esté instalado, ahora vamos a editar package.sjon con :

scripts:{
...
 "test": "jest"
}

"jest": {
  "preset": "react-native"
},

Para asegurar que las librerias necesarias funcionen con Jest tenemos que cambiar el contenido de jest por este en packcage.json:

"jest": {
  "preset": "jest-expo",
  "transformIgnorePatterns": [
    "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
  ]
}

Añadiremos los nombres de las librerías que utilizamos separadas por |.

Ahora crea un archivo llamado LoginScreen.test.js en el mismo directorio que el componente LoginScreen. Aquí es donde escribirás tus pruebas.

A continuación, te muestro un ejemplo de cómo podrían ser las pruebas para el login:

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

describe('LoginScreen', () => {
  test('Iniciar sesión exitosamente', () => {
    const { getByTestId } = render(<LoginScreen />);
    const usernameInput = getByTestId('username-input');
    const passwordInput = getByTestId('password-input');
    const loginButton = getByTestId('login-button');

    // Simula la entrada del usuario y la contraseña
    fireEvent.changeText(usernameInput, 'nombredeusuario');
    fireEvent.changeText(passwordInput, 'contraseña');

    // Simula el evento de clic en el botón de inicio de sesión
    fireEvent.press(loginButton);

    // Asegúrate de que el usuario haya iniciado sesión correctamente
    // Esto puede implicar verificar un cambio en el estado del componente o
    // realizar una validación adicional en tu lógica de inicio de sesión.

    // Aquí, puedes realizar las afirmaciones correspondientes para verificar que el inicio de sesión
    // fue exitoso. Por ejemplo:
    expect(loginButton.props.disabled).toBe(true);
  });

  test('Validación de campos obligatorios', () => {
    const { getByTestId } = render(<LoginScreen />);
    const loginButton = getByTestId('login-button');

    // Simula el evento de clic en el botón de inicio de sesión sin ingresar ninguna información
    fireEvent.press(loginButton);

    // Asegúrate de que se muestre un mensaje de error o una indicación visual de que los campos son obligatorios.
    // Por ejemplo:
    expect(getByTestId('error-message')).toBeTruthy();
  });
});

En el ejemplo anterior, estamos utilizando la función render de @testing-library/react-native para renderizar el componente LoginScreen y obtener referencias a los elementos relevantes utilizando getByTestId. Luego, utilizamos fireEvent para simular la entrada del usuario y el evento de clic en el botón de inicio de sesión.

Finalmente, realizamos afirmaciones utilizando las funciones de aserción de Jest, como expect, para verificar que el comportamiento sea el esperado.

Recuerda que este es solo un ejemplo básico y que las pruebas pueden variar según tus requisitos específicos y la lógica de tu aplicación. Espero que este ejemplo te sea útil como punto de partida para realizar pruebas de login en tu aplicación de React Native utilizando Jest.