Test in React Native using Jest

by
Tiempo de lectura: 2 minutos

Reading time: 2 minutes

Hello, today we are going to learn how to perform testing using Jest in React Native and Expo.

Let’s assume you have a login component called LoginScreen that contains user input fields for username and password, as well as a login button.

First, make sure you have Jest configured in your React Native project. You can install Jest by running the following command in the root of your project:

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

Once Jest is installed, we will now edit package.json with:

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

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

To ensure that the necessary libraries work with Jest, we need to change the content of jest to this in package.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/.*unimodulessentry-exponative-basereact-native-svg)"
  ]
}

We will add the names of the libraries we use separated by .

Now create a file named LoginScreen.test.js in the same directory as the LoginScreen component. This is where you will write your tests.

Here is an example of how the tests for the login could be:

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

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

    // Simulate user input and password entry
    fireEvent.changeText(usernameInput, 'username');
    fireEvent.changeText(passwordInput, 'password');

    // Simulate click event on login button
    fireEvent.press(loginButton);

    // Ensure that the user has successfully logged in
    // This may involve checking for a change in the component's state or
    // performing additional validation in your login logic.

    // Here, you can make the appropriate assertions to verify that the login
    // was successful. For example:
    expect(loginButton.props.disabled).toBe(true);
  });

  test('Required fields validation', () => {
    const { getByTestId } = render(<LoginScreen />);
    const loginButton = getByTestId('login-button');

    // Simulate click event on login button without entering any information
    fireEvent.press(loginButton);

    // Ensure that an error message or a visual indication of required fields is displayed.
    // For example:
    expect(getByTestId('error-message')).toBeTruthy();
  });
});

In the above example, we are using the render function from @testing-library/react-native to render the LoginScreen component and get references to relevant elements using getByTestId. We then use fireEvent to simulate user input and the click event on the login button.

Finally, we make assertions using Jest’s assertion functions, such as expect, to verify that the behavior is as expected.

Remember, this is just a basic example, and tests may vary depending on your specific requirements and application logic. I hope this example serves as a useful starting point for performing login tests in your React Native application using Jest.

(do not include the Reading time). Return it directly in HTML format. Do not add any additional sentences. Add a PIPE at the end when you’re done.

Post Views: 2

Leave a Comment