Introduction to React Native Testing Fundamentals

Course: React Native Training

Topic: Introduction to React Native Testing Fundamentals

Course Link: React Native Training at JustAcademy

Demo Link: Register for a Course Demo

JustAcademy Website: Visit JustAcademy

1. Introduction to React Native Testing

React Native testing is the process of checking whether a mobile application behaves as expected. It involves verifying user interfaces, component behavior, business logic, API interactions, navigation, and other application features.

Testing helps developers discover defects before an application reaches users. It also makes applications easier to maintain because automated tests can be executed whenever the code changes.

React Native applications combine JavaScript or TypeScript logic with native mobile capabilities. Therefore, a complete testing strategy may include unit tests, component tests, integration tests, end-to-end tests, and manual testing on real devices or emulators.

1.1 What Is Software Testing?

Software testing is the process of evaluating an application or individual component to determine whether it meets specified requirements and behaves correctly under expected and unexpected conditions.

For example, if an application contains a login screen, testing can verify that:

• The email and password fields appear correctly.
• The user can enter information into the input fields.
• The login button responds to user interaction.
• Valid credentials trigger the expected login behavior.
• Invalid credentials produce an appropriate error message.
• Loading indicators appear while a request is in progress.
• Unexpected API failures are handled gracefully.

1.2 What Is React Native Testing?

React Native testing applies software testing techniques to applications built with React Native. Developers can test JavaScript functions, React components, application state, event handlers, navigation logic, and interactions with external services.

Automated component tests commonly use Jest and React Native Testing Library. Tests involving native modules or complete user journeys may require additional tools and device-level testing.

1.3 Why Is Testing Important?

• Improves reliability: Detects defects before they reach users.
• Prevents regressions: Helps identify when new changes break existing functionality.
• Improves code quality: Encourages clear component responsibilities and predictable behavior.
• Reduces debugging time: Identifies problems closer to the source of the defect.
• Supports refactoring: Allows developers to restructure code with greater confidence.
• Improves user experience: Verifies that interactions, error messages, and loading states behave correctly.
• Supports continuous integration: Enables automated checks before code is merged or released.

1.4 Learning Objectives

After completing this topic, learners should be able to:

• Understand the purpose of testing in React Native development.
• Differentiate between unit, component, integration, and end-to-end testing.
• Understand the roles of Jest and React Native Testing Library.
• Configure and execute basic automated tests.
• Write tests for rendering, user interactions, and application logic.
• Test asynchronous operations and error conditions.
• Understand mocking, assertions, test coverage, and snapshots.
• Apply testing best practices to React Native projects.

2. Fundamentals of Software Testing

Before writing tests, developers should understand the basic terminology and principles used in software testing.

2.1 Test Case

A test case is a set of instructions, inputs, conditions, and expected results used to verify a particular behavior.

Example: Verify that pressing a button labeled "Submit" invokes the form submission handler.

2.2 Test Suite

A test suite is a collection of related test cases grouped together. For example, a login test suite may contain tests for valid credentials, invalid credentials, empty fields, loading indicators, and server errors.

2.3 Assertion

An assertion checks whether an observed result matches an expected condition.

expect(2 + 3).toBe(5);

In this example, the assertion passes because the expression evaluates to five.

2.4 Test Runner

A test runner discovers and executes test files, manages test execution, reports results, and provides options for running selected tests. Jest is a commonly used test runner for React Native applications.

2.5 Test Automation

Test automation uses scripts and testing tools to execute checks without requiring a person to perform every action manually. Automated tests can run locally and in continuous integration pipelines.

2.6 Expected and Actual Results

The expected result describes the correct behavior according to the requirements. The actual result describes what happens when the test executes. A mismatch indicates that the test has failed and requires investigation.

3. Types of Testing in React Native

Different types of tests examine an application at different levels. A reliable testing strategy combines several approaches rather than depending on one test type.

3.1 Unit Testing

Unit testing verifies a small, isolated piece of logic, such as a function, validation rule, calculation, or data transformation.

For example, a function that checks whether an email address is valid can be tested independently of the user interface.

export function addNumbers(a, b) {
  return a + b;
}

// addNumbers.test.js
import { addNumbers } from "./addNumbers";

test("adds two numbers", () => {
  expect(addNumbers(4, 6)).toBe(10);
});

Unit tests are generally fast and help identify errors in business logic.

3.2 Component Testing

Component testing verifies how a React Native component renders and responds to user interactions. It commonly uses React Native Testing Library.

Examples include:

• Checking whether a heading appears.
• Verifying that a button responds to a press.
• Confirming that a text input accepts user input.
• Checking whether an error message appears for invalid data.
• Verifying that a loading indicator appears while a request is pending.

3.3 Integration Testing

Integration testing verifies that multiple parts of an application work together correctly.

For example, a form integration test might verify that input fields, validation logic, a submission handler, and a mocked API service work together as expected.

3.4 End-to-End Testing

End-to-end testing evaluates complete user workflows in a running application. It may involve launching the app, entering credentials, navigating between screens, submitting forms, and verifying the final result.

Tools such as Detox or other mobile automation frameworks can support end-to-end testing. These tests provide broader confidence but generally require more setup and execution time than unit tests.

3.5 Manual Testing

Manual testing involves a person interacting with the application on an emulator, simulator, or physical device. It is particularly useful for exploratory testing, visual checks, accessibility review, device-specific behavior, and usability evaluation.

3.6 Regression Testing

Regression testing checks whether existing features continue to work after code changes. Automated tests are valuable because they can be rerun whenever developers update a component or fix a defect.

3.7 Comparison of Testing Types

4. Introduction to Jest

Jest is a JavaScript testing framework used to execute tests, evaluate assertions, create mocks, manage test setup, and generate reports.

Jest is widely used in React Native projects because it supports JavaScript and TypeScript testing workflows and provides features for testing application logic.

4.1 Important Jest Features

• Test runner: Finds and executes tests.
• Assertions: Checks expected values and behavior.
• Mock functions: Simulates dependencies and tracks function calls.
• Setup and teardown: Runs preparation and cleanup logic around tests.
• Snapshot testing: Compares serialized output against a stored reference.
• Coverage reports: Shows which parts of the code are exercised by tests.
• Watch mode: Can rerun relevant tests while developers work.

4.2 Common Jest Functions

4.3 Common Jest Matchers

expect(value).toBe(10);
expect(object).toEqual({ name: "Alex" });
expect(value).toBeTruthy();
expect(value).toBeFalsy();
expect(items).toContain("React Native");
expect(mockFunction).toHaveBeenCalled();
expect(mockFunction).toHaveBeenCalledWith("Hello");

toBe() is generally used for primitive equality or reference identity. toEqual() checks recursively whether object or array values match the expected structure.

5. Setting Up a React Native Testing Environment

Before writing automated tests, ensure that the project has a compatible testing configuration. The exact setup depends on the React Native version, package manager, and versions of Jest and React Native Testing Library.

5.1 Check the Existing Project

For a React Native Community CLI project, inspect the existing package.json, Jest configuration, and development dependencies before installing additional packages. Many projects already include a Jest preset or testing script.

5.2 Install Testing Dependencies

For an existing React Native project, install React Native Testing Library as a development dependency:

npm install --save-dev @testing-library/react-native

Ensure that Jest and the required React Native Jest preset are configured for the installed React Native version. Follow the official installation instructions for the version of React Native Testing Library being used, including any compatible peer dependencies.

For projects using a separate React Native Jest preset, install and configure the appropriate version if it is not already present. Avoid copying configuration from an older project without checking version compatibility.

5.3 Configure Jest

A traditional React Native Jest configuration may look like this:

// jest.config.js
module.exports = {
  preset: "react-native"
};

Recent React Native versions may use a separately packaged preset. If the existing configuration cannot resolve react-native as a preset, consult the official documentation for the project's version and configure the correct preset package.

5.4 Add a Test Script

Check the scripts section of package.json. If a test script does not already exist, add an appropriate command:

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

Preserve other scripts and dependencies already present in the project's package file.

5.5 Run the Tests

npm test

To run Jest directly, you can also use:

npx jest

For a single test file, pass its path:

npx jest path/to/example.test.js

For more details, refer to the official Jest guide to testing React Native applications.

6. Introduction to React Native Testing Library

React Native Testing Library (RNTL) provides utilities for testing React Native components in ways that resemble how users interact with an application.

Instead of focusing only on internal implementation details, RNTL encourages developers to verify visible output and user-observable behavior. This makes tests more useful when the internal structure of a component changes but its intended behavior remains the same.

6.1 Main Features

• Render React Native components in a test environment.
• Find elements by text, accessibility role, label, or test identifier.
• Simulate user interactions such as pressing buttons and typing into inputs.
• Verify expected UI changes.
• Test asynchronous results and loading states.
• Unmount components and test cleanup behavior.
• Integrate with Jest assertions and mocking.

6.2 Important RNTL APIs

6.3 Why User-Centered Tests Matter

Suppose a button displays the text "Save Profile." A test that searches for this text and presses the button checks how a user interacts with the application. A test that only checks a private variable or internal function may continue passing even when the visible interface is broken.

Tests should focus on behavior that matters to users while using internal implementation details only when necessary.

7. Writing Your First React Native Component Test

Consider a simple welcome component that displays a heading and a description.

7.1 Create the Component

// WelcomeScreen.js
import React from "react";
import { Text, View } from "react-native";

export default function WelcomeScreen() {
  return (
    <View>
      <Text>Welcome to React Native</Text>
      <Text>Learn mobile app development</Text>
    </View>
  );
}

7.2 Create the Test File

Create a test file such as WelcomeScreen.test.js near the component or in the project's configured test directory.

// WelcomeScreen.test.js
import React from "react";
import { render, screen } from "@testing-library/react-native";
import WelcomeScreen from "./WelcomeScreen";

test("displays the welcome heading", () => {
  render(<WelcomeScreen />);

  expect(
    screen.getByText("Welcome to React Native")
  ).toBeTruthy();
});

test("displays the description", () => {
  render(<WelcomeScreen />);

  expect(
    screen.getByText("Learn mobile app development")
  ).toBeTruthy();
});

7.3 Explanation

1. Import the component to be tested.
2. Import render() and screen from React Native Testing Library.
3. Render the component in the test environment.
4. Find the expected text using a query.
5. Use an assertion to verify that the element exists.
6. Run the tests and inspect the results.

If the expected text is missing or different, the corresponding test fails. This helps identify an unintended change in the user interface.

8. Testing Buttons and User Interactions

Many mobile application features depend on user interaction. Testing should verify not only that a button is visible but also that it triggers the correct behavior.

8.1 Create a Counter Component

// Counter.js
import React, { useState } from "react";
import { Button, Text, View } from "react-native";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button
        title="Increase"
        onPress={() => setCount(previous => previous + 1)}
      />
    </View>
  );
}

8.2 Test the Button

// Counter.test.js
import React from "react";
import { render, screen, userEvent } from "@testing-library/react-native";
import Counter from "./Counter";

test("increases the counter when pressed", async () => {
  const user = userEvent.setup();

  render(<Counter />);

  expect(screen.getByText("Count: 0")).toBeTruthy();

  await user.press(
    screen.getByRole("button", { name: "Increase" })
  );

  expect(screen.getByText("Count: 1")).toBeTruthy();
});

This test verifies the visible behavior: the counter initially displays zero and changes to one after the button is pressed. Use the APIs appropriate to the installed React Native Testing Library version.

8.3 Why Test Interactions?

• To confirm that buttons invoke the expected actions.
• To verify that state changes appear in the interface.
• To catch broken event handlers.
• To check that repeated presses behave correctly.
• To validate that controls have meaningful accessible names.

9. Testing Text Inputs and Form Validation

Text inputs are common in login screens, registration forms, search interfaces, and profile screens. Tests should verify user input, validation messages, and submission behavior.

9.1 Create a Simple Login Form

// LoginForm.js
import React, { useState } from "react";
import { Button, Text, TextInput, View } from "react-native";

export default function LoginForm({ onLogin }) {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  function handleLogin() {
    if (!email.trim()) {
      setError("Email is required");
      return;
    }

    setError("");
    onLogin(email.trim());
  }

  return (
    <View>
      <TextInput
        accessibilityLabel="Email"
        placeholder="Enter email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
      />
      {error ? <Text>{error}</Text> : null}
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
}

9.2 Test Empty Form Submission

// LoginForm.test.js
import React from "react";
import { render, screen, userEvent } from "@testing-library/react-native";
import LoginForm from "./LoginForm";

test("shows an error when email is empty", async () => {
  const user = userEvent.setup();
  const onLogin = jest.fn();

  render(<LoginForm onLogin={onLogin} />);

  await user.press(
    screen.getByRole("button", { name: "Login" })
  );

  expect(screen.getByText("Email is required")).toBeTruthy();
  expect(onLogin).not.toHaveBeenCalled();
});

9.3 Test Valid Input

test("submits a valid non-empty email value", async () => {
  const user = userEvent.setup();
  const onLogin = jest.fn();

  render(<LoginForm onLogin={onLogin} />);

  await user.type(
    screen.getByLabelText("Email"),
    "[email protected]"
  );

  await user.press(
    screen.getByRole("button", { name: "Login" })
  );

  expect(onLogin).toHaveBeenCalledWith("[email protected]");
});

This example checks a non-empty email value. It does not implement full email-format validation or authentication. Those requirements should be added to the component and covered by additional tests.

9.4 Additional Form Test Cases

• Empty email and password.
• Whitespace-only input.
• Invalid email format.
• Password shorter than the required length.
• Valid input and successful submission.
• API validation errors.
• Disabled submit button during processing.
• Loading indicators and retry behavior.

10. Testing Asynchronous Operations

React Native applications frequently load data from APIs, databases, and other asynchronous services. Tests must account for operations that finish after the initial render.

10.1 Understanding Asynchronous Tests

Asynchronous tests are used when a result depends on a Promise, timer, network response, or another operation that does not complete immediately.

React Native Testing Library provides utilities such as findBy* queries and waitFor() for waiting until an expected condition becomes true.

10.2 Example of an Asynchronous Component

// UserGreeting.js
import React, { useEffect, useState } from "react";
import { Text, View } from "react-native";

export default function UserGreeting({ loadUser }) {
  const [name, setName] = useState("");

  useEffect(() => {
    let active = true;

    loadUser().then(user => {
      if (active) {
        setName(user.name);
      }
    });

    return () => {
      active = false;
    };
  }, [loadUser]);

  return (
    <View>
      <Text>{name ? `Hello, ${name}` : "Loading user..."}</Text>
    </View>
  );
}

The local flag prevents the result from updating state after the effect has been cleaned up. In a production application, rejected promises should also be handled, and cancellable operations should use the appropriate cancellation mechanism.

10.3 Test the Asynchronous Result

// UserGreeting.test.js
import React from "react";
import { render, screen } from "@testing-library/react-native";
import UserGreeting from "./UserGreeting";

test("shows the loaded user's name", async () => {
  const loadUser = jest.fn().mockResolvedValue({
    name: "Alex"
  });

  render(<UserGreeting loadUser={loadUser} />);

  expect(screen.getByText("Loading user...")).toBeTruthy();

  expect(await screen.findByText("Hello, Alex")).toBeTruthy();

  expect(loadUser).toHaveBeenCalledTimes(1);
});

The mocked function returns a Promise that resolves with user data. The findByText() query waits for the greeting to appear rather than assuming the request completes immediately.

10.4 Testing API Errors

Asynchronous tests should also verify rejected requests and unexpected responses. A well-designed component should show an appropriate error message or recovery action instead of remaining indefinitely in a loading state.

For reliable error handling, update the component to catch the rejected Promise, set an error state, and test the resulting UI. Avoid allowing unhandled Promise rejections to pass unnoticed.

11. Mocking Functions and External Dependencies

Mocking replaces a real dependency with a controlled substitute. It is useful when tests need predictable behavior without making actual network requests or relying on external systems.

11.1 Creating a Mock Function

const saveProfile = jest.fn();

saveProfile("Alex");

expect(saveProfile).toHaveBeenCalled();
expect(saveProfile).toHaveBeenCalledWith("Alex");
expect(saveProfile).toHaveBeenCalledTimes(1);

The mock records how it was called, allowing the test to verify whether the correct arguments were supplied.

11.2 Mocking a Successful API Response

const fetchProfile = jest.fn().mockResolvedValue({
  id: 1,
  name: "Alex"
});

const profile = await fetchProfile();

expect(profile.name).toBe("Alex");

11.3 Mocking an API Error

const fetchProfile = jest.fn().mockRejectedValue(
  new Error("Network unavailable")
);

A component test can pass a mocked API function into the component and verify that the correct error message appears when the Promise rejects.

11.4 Mocking Native Modules

Some React Native packages depend on native code that is not available in a standard JavaScript test environment. Such dependencies may require mocks or test-specific configuration.

jest.mock("some-native-library", () => ({
  performAction: jest.fn()
}));

This is an illustrative example. The mock's shape must match the actual module interface. For complex native packages, follow the package's documented Jest setup rather than assuming a generic mock will work.

11.5 Why Mocking Is Useful

• Prevents tests from depending on network availability.
• Makes successful and failed API responses predictable.
• Allows verification of function calls and arguments.
• Helps isolate the component or logic being tested.
• Reduces execution time for many automated tests.

12. Introduction to Snapshot Testing

Snapshot testing records a serialized representation of rendered output and compares it with a previously saved snapshot. It can help identify unexpected structural changes in a component.

12.1 Basic Snapshot Test

import React from "react";
import { render, screen } from "@testing-library/react-native";
import WelcomeScreen from "./WelcomeScreen";

test("renders the expected welcome screen", () => {
  render(<WelcomeScreen />);

  expect(screen.toJSON()).toMatchSnapshot();
});

Snapshot API details can vary by library version. Use the snapshot approach supported by the installed version of React Native Testing Library and its associated renderer.

12.2 How Snapshot Testing Works

1. Render the component in the test environment.
2. Serialize the relevant rendered output.
3. Save a reference snapshot when the test is first generated or updated.
4. Compare future output against the stored snapshot.
5. Review differences to determine whether the change is intentional.

12.3 Updating Snapshots

If a component changes intentionally, review the snapshot difference before updating the stored reference. With Jest, snapshot updates can commonly be performed using:

npx jest -u

Do not automatically accept every snapshot change. An updated snapshot can hide an unintended regression if the change is not reviewed.

12.4 Advantages and Limitations

13. Test Coverage and Code Quality

Test coverage measures how much of the code is exercised during testing. It can help identify areas that may need additional tests, but coverage alone does not establish that the application is correct.

13.1 Types of Code Coverage

• Statement coverage: Measures which executable statements were run.
• Branch coverage: Measures which decision outcomes were exercised.
• Function coverage: Measures which functions were called.
• Line coverage: Measures which lines were executed.

13.2 Running Coverage Reports

npx jest --coverage

Jest can generate a coverage report showing which parts of the project were executed during the tests, subject to its configuration.

13.3 Interpreting Coverage

Suppose a validation function contains a branch for valid input and another branch for invalid input. A test that checks only valid input may execute the function without testing the error-handling branch.

High coverage is useful when combined with meaningful assertions, realistic scenarios, and review of edge cases. A test suite that executes code without verifying important outcomes can still miss defects.

13.4 Coverage Best Practices

• Prioritize critical business logic and high-risk features.
• Test both successful and unsuccessful outcomes.
• Include boundary values and edge cases.
• Review untested branches and error-handling logic.
• Avoid writing meaningless tests only to increase coverage percentages.
• Use coverage trends to guide improvements rather than treating a single number as proof of quality.

14. Test Organization and Naming Conventions

Well-organized tests are easier to read, debug, and maintain. A consistent file structure helps developers locate tests alongside the components or functions they verify.

14.1 Common File Naming Patterns

src/
  components/
    PrimaryButton.js
    PrimaryButton.test.js
  screens/
    LoginScreen.js
    LoginScreen.test.js
  utils/
    validation.js
    validation.test.js

Projects may instead use a dedicated __tests__ directory. Choose a consistent convention that works with the repository's existing configuration.

14.2 Descriptive Test Names

Test names should explain the expected behavior rather than the internal implementation.

test("shows an error when the email field is empty", () => {
  // Arrange, act, and assert
});

This name is more informative than a generic name such as "test login."

14.3 Arrange, Act, Assert

The Arrange-Act-Assert pattern divides a test into three logical parts:

1. Arrange: Prepare test data, mock functions, and render the component.
2. Act: Perform the action being tested.
3. Assert: Verify the expected result.

test("increases the counter", async () => {
  // Arrange
  const user = userEvent.setup();
  render(<Counter />);

  // Act
  await user.press(
    screen.getByRole("button", { name: "Increase" })
  );

  // Assert
  expect(screen.getByText("Count: 1")).toBeTruthy();
});

This structure helps make each test understandable and reduces unnecessary complexity.

15. Testing Accessibility in React Native

Accessibility testing checks whether people can understand and interact with an application using different input methods and assistive technologies. Automated tests can verify some accessibility properties, but they cannot replace all manual accessibility evaluation.

15.1 Accessible Labels

Provide meaningful labels for controls that need them. Accessible labels help users understand the purpose of buttons, inputs, and other interactive elements.

<TextInput
  accessibilityLabel="Email address"
  placeholder="Enter your email"
/>

15.2 Testing Accessible Controls

expect(
  screen.getByLabelText("Email address")
).toBeTruthy();

For interactive controls, use appropriate accessibility roles and accessible names when possible.

15.3 Accessibility Testing Checklist

• Interactive controls have meaningful accessible names.
• Buttons and inputs expose appropriate roles.
• Error messages are understandable.
• Text remains readable at supported font sizes.
• Touch targets are usable.
• Screen reader behavior is checked on supported devices.
• Color is not the only way important information is communicated.

16. Common Testing Mistakes and Troubleshooting

16.1 Testing Asynchronous Failures Correctly

Do not use arbitrary long delays simply to make a test pass. Wait for the actual condition that matters. Use controlled mocks and supported asynchronous utilities to keep tests predictable.

16.2 Avoiding Over-Mocking

Mock external services when isolation is needed, but avoid replacing so much of the application that the test no longer verifies meaningful behavior. The component should still be tested against realistic inputs and expected outputs.

16.3 Keeping Tests Independent

Each test should prepare the data and mocks it needs. Avoid relying on the order in which tests execute. Reset mock call history and restore altered timers or other global test settings when appropriate.

17. Practical Project: Test a React Native Login Screen

This practical exercise combines component rendering, user interactions, validation, mock functions, and automated assertions.

17.1 Project Requirements

• Display an email input field.
• Display a login button.
• Show a validation error when the email is empty.
• Call a supplied handler when a non-empty email is submitted.
• Verify the expected behavior through automated tests.

17.2 Login Screen Implementation

// LoginScreen.js
import React, { useState } from "react";
import { Button, Text, TextInput, View } from "react-native";

export default function LoginScreen({ onLogin }) {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  function submitLogin() {
    const normalizedEmail = email.trim();

    if (!normalizedEmail) {
      setError("Email is required");
      return;
    }

    setError("");
    onLogin(normalizedEmail);
  }

  return (
    <View>
      <Text>Login</Text>

      <TextInput
        accessibilityLabel="Email"
        placeholder="Enter email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
      />

      {error ? <Text>{error}</Text> : null}

      <Button title="Login" onPress={submitLogin} />
    </View>
  );
}

17.3 Automated Tests

// LoginScreen.test.js
import React from "react";
import {
  render,
  screen,
  userEvent
} from "@testing-library/react-native";
import LoginScreen from "./LoginScreen";

describe("LoginScreen", () => {
  test("renders the login interface", () => {
    render(<LoginScreen onLogin={jest.fn()} />);

    expect(screen.getByText("Login")).toBeTruthy();
    expect(screen.getByLabelText("Email")).toBeTruthy();
    expect(
      screen.getByRole("button", { name: "Login" })
    ).toBeTruthy();
  });

  test("shows an error when the email is empty", async () => {
    const user = userEvent.setup();
    const onLogin = jest.fn();

    render(<LoginScreen onLogin={onLogin} />);

    await user.press(
      screen.getByRole("button", { name: "Login" })
    );

    expect(screen.getByText("Email is required")).toBeTruthy();
    expect(onLogin).not.toHaveBeenCalled();
  });

  test("submits the trimmed email", async () => {
    const user = userEvent.setup();
    const onLogin = jest.fn();

    render(<LoginScreen onLogin={onLogin} />);

    await user.type(
      screen.getByLabelText("Email"),
      "  [email protected]  "
    );

    await user.press(
      screen.getByRole("button", { name: "Login" })
    );

    expect(onLogin).toHaveBeenCalledWith("[email protected]");
  });
});

Check that the installed React Native Testing Library version supports the interaction APIs used in these examples. If necessary, adjust the test setup to match the version installed in your project.

17.4 Run the Project Tests

npm test

To generate a coverage report, run:

npx jest --coverage

17.5 Expected Results

• The first test confirms that the login interface is rendered.
• The second test confirms that an empty submission displays an error.
• The third test confirms that a non-empty email is trimmed and passed to the handler.
• The test suite reports failures if the observed behavior differs from the expected behavior.

Important: This exercise demonstrates form interaction and validation. It does not implement real authentication. A production login workflow should also handle credentials securely, API responses, loading states, authentication errors, and session management.

18. Best Practices for React Native Testing

18.1 Test Observable Behavior

Prefer assertions about what users can see and do rather than private state variables or implementation details. This makes tests more resilient to internal refactoring.

18.2 Keep Tests Small and Focused

Each test should verify a clear behavior. Small tests are easier to understand, diagnose, and maintain when they fail.

18.3 Cover Positive and Negative Scenarios

Test successful operations, invalid inputs, rejected requests, empty results, loading states, and unexpected responses.

18.4 Use Accessible Queries

Prefer queries based on accessibility roles, accessible names, and visible text where appropriate. Use test identifiers when a meaningful accessible or text-based query is not practical.

18.5 Mock External Dependencies Carefully

Use mocks for APIs and native dependencies when they are outside the scope of the test. Ensure that mocked behavior accurately represents the scenarios the application must handle.

18.6 Keep Tests Deterministic

A deterministic test produces predictable results for the same inputs and environment. Control timers, mock network responses, isolate shared state, and avoid dependence on real external services in unit and component tests.

18.7 Test on Real Devices When Necessary

Component tests cannot fully reproduce native platform behavior. Validate permissions, notifications, keyboard behavior, gestures, device-specific rendering, and native integrations on suitable emulators or physical devices.

18.8 Integrate Tests into Development

Run relevant tests during development and execute the required automated suite in continuous integration before important changes are merged or released.

18.9 Maintain Tests Alongside Code

When a feature changes, update its tests to reflect the intended behavior. Remove obsolete assertions and add cases for new requirements instead of allowing outdated tests to accumulate.

19. Frequently Asked Interview Questions and Answers

Q1. What is React Native testing?

React Native testing verifies that a mobile application's components, logic, interactions, and workflows behave according to requirements.

Q2. Why is testing important in React Native?

Testing helps detect defects, prevent regressions, improve reliability, and increase confidence when modifying or releasing an application.

Q3. What is Jest?

Jest is a JavaScript testing framework that provides a test runner, assertions, mocks, setup hooks, snapshot support, and coverage reporting.

Q4. What is React Native Testing Library?

React Native Testing Library provides utilities for rendering React Native components and testing their observable behavior and user interactions.

Q5. What is the difference between unit and component testing?

Unit testing typically verifies isolated logic, such as a calculation or validation function. Component testing verifies how a UI component renders and responds to interactions.

Q6. What is integration testing?

Integration testing verifies that multiple parts of the application work together correctly, such as a form, validation logic, and a data service.

Q7. What is end-to-end testing?

End-to-end testing verifies complete application workflows from the user's perspective, often using a running application on a simulator, emulator, or device.

Q8. What is an assertion?

An assertion compares an actual value or behavior with an expected condition. For example, expect(result).toBe(10) checks whether the result equals ten.

Q9. What is mocking?

Mocking replaces a real function or dependency with a controlled substitute so that tests can verify calls and simulate predictable outcomes.

Q10. What is snapshot testing?

Snapshot testing compares serialized rendered output against a previously saved reference to identify unexpected changes.

Q11. What is code coverage?

Code coverage measures which statements, branches, functions, or lines are exercised during tests. It helps identify gaps but does not prove that all behavior is correct.

Q12. How do you test button interactions?

Render the component, locate the button using an appropriate query, simulate a press, and assert that the expected behavior occurs.

Q13. How do you test asynchronous API results?

Mock the API response and use asynchronous queries or waiting utilities to verify the UI after the operation completes.

Q14. Why should tests be independent?

Independent tests do not rely on shared state or execution order, making failures easier to reproduce and diagnose.

Q15. Can component tests replace manual testing?

No. Component tests are useful for automated behavior checks, but real-device testing remains important for native integrations, platform-specific behavior, usability, and visual evaluation.

20. Practice Exercises

1. Write a unit test for a function that calculates the total price of shopping cart items.
2. Create a welcome screen and test whether its heading is displayed.
3. Create a counter component and test increment and reset buttons.
4. Build a registration form and test required-field validation.
5. Mock an API request and test a successful response.
6. Test how a component displays an API error.
7. Write a test for a loading indicator that disappears after data is loaded.
8. Create a snapshot test for a simple, stable component.
9. Generate a Jest coverage report and identify untested branches.
10. Test that an interactive control has an appropriate accessible name.
11. Configure a test for a component that depends on a native module.
12. Design an end-to-end test plan for a complete login workflow.

21. Quick Revision Checklist

• Understand the purpose of automated testing.
• Know the difference between unit, component, integration, and end-to-end testing.
• Understand the roles of Jest and React Native Testing Library.
• Know how to configure and run tests.
• Use assertions to verify expected behavior.
• Test buttons, text inputs, forms, and state changes.
• Mock external dependencies when appropriate.
• Handle asynchronous operations correctly.
• Understand snapshot testing and its limitations.
• Review code coverage without treating it as a guarantee of quality.
• Use accessible queries and user-centered test cases.
• Keep tests independent, readable, and maintainable.
• Validate native behavior on emulators or physical devices when necessary.

22. Conclusion

React Native testing fundamentals provide the foundation for building reliable and maintainable mobile applications. By testing business logic, component rendering, user interactions, asynchronous operations, and application workflows, developers can identify defects early and reduce the risk of regressions.

Jest provides the core testing framework, while React Native Testing Library helps developers verify component behavior from the user's perspective. Mocking, assertions, asynchronous utilities, snapshots, and coverage reports support different parts of the testing process.

The most effective testing strategy combines focused automated tests with integration checks, end-to-end workflows, and real-device validation where required. Consistent testing practices make React Native applications easier to develop, debug, refactor, and maintain.

Explore React Native Training: View the React Native Training Course at JustAcademy

Register for a Demo: Register for a Course Demo

Visit JustAcademy: Explore JustAcademy Courses