Testing React Native Applications: Best practices and Frameworks

Testing is a habit — one that not every developer possesses.

Imagine driving through a busy intersection with no traffic lights.

Chaos, right ?

That’s exactly what software without testing feels like.

Testing is an integral part of software development.

For React Native applications, it ensures your features work as expected — and continue to do so as your app grows.

Yet many developers skip tests because “it works on my machine” or due to tight deadlines.

Just like you go to the gym to stay fit, testing keeps your codebase healthy.

I’ll admit, I have written my fair share of tests and then stopped.

Until I realized that many of the bugs I kept missing were the direct result of extending functionality and refactoring without proper test coverage.

Those hidden bugs eventually slipped into production.

In this article, we’ll explore testing strategies, best practices, coverage, and frameworks you can use to catch bugs before they ever reach production.

Why Testing Matters

Every app has moving parts — logic, APIs, components, and user flows. Without automated tests, changes can unintentionally break those parts.

A good test suite helps you:

• Prevent regressions.
• Document expected behavior.
• Increase confidence when refactoring.
• Ship features faster and safer.

Testing Frameworks for React Native

There are several testing tools commonly used in react native applications, including:

1. Jest

The default testing framework in React Native.
Fast, supports mocking, and integrates with libraries like react-test-renderer and @testing-library/react-native.
Great for unit and integration tests.

2. React Native Testing Library (RNTL)

A library built on top of @testing-library.
Encourages testing components the way users interact with them (via text, roles, and accessibility labels).
Example: getByText("Submit") instead of checking internal props.

3. Detox

A powerful E2E testing framework for React Native.
Automates user flows on real devices or emulators.
Ensures your app behaves correctly in real-world scenarios.

4. Cypress (for Web/Expo Web)

If your React Native project also targets web via Expo, Cypress is a great choice for browser-based E2E testing.

Test Coverage

Coverage helps track which parts of your code are tested. Common metrics include:

• Statements — how many statements in the code are executed.
• Branches — whether conditional paths (if, switch, ternary) are tested.
• Functions — coverage of function calls.
• Lines — percentage of lines run during tests.

Best Practices for Testing React Native

Whether it’s unit tests, integration tests, or E2E tests, almost every testing framework follows this Arrange → Act → Assert (AAA) pattern.

You should also make more obvious what the SUT (subject under test) is.

Example: AAA in Action

import React from "react";
import { render, fireEvent } from "@testing-library/react-native";
import { Button, Text } from "react-native";
function GreetingButton() {
  const [message, setMessage] = React.useState("");
  return (
    <>
      <Button title="Say Hello" onPress={() => setMessage("Hello, World!")} />
      <Text>{message}</Text>
    </>
  );
}
test("it shows greeting after button press", () => {
  // Arrange
  const { getByText } = render(<GreetingButton />);
  // Act
  fireEvent.press(getByText("Say Hello"));
  // Assert
  expect(getByText("Hello, World!")).toBeTruthy();
});

Best Practices

1. Test behavior, not implementation

Focus on what the user sees and does, rather than the internal details of your component. This makes tests more robust and less prone to breaking when you refactor code.

2. Keep tests fast

Unit tests should execute quickly to encourage frequent running. Slow tests discourage developers from running them regularly.

3. Mock external dependencies

APIs, AsyncStorage, native modules, and other side-effect-prone dependencies should be mocked. This prevents flaky tests and ensures your tests run reliably.

4. Use CI/CD pipelines

Automate your tests using tools like GitHub Actions, Bitrise, or CircleCI. This ensures regressions are caught before code is merged.

5. Don’t chase 100% coverage blindly

Focus on critical paths and meaningful coverage rather than trying to hit 100% line coverage. High coverage doesn’t always mean high-quality tests.

6. Use snapshots wisely

Snapshots are useful for catching unintended changes in UI, but avoid overusing them for implementation details. Also update snapshots intentionally when UI changes are expected.

7. Use Husky (optional)

Husky can enforce pre-commit hooks to run tests or linting before commits. This is helpful, but optional — only adopt it if your team finds it useful.

How to Setup Husky

React Native Test Setup

If you would like to start testing a new or an existing react native app.

It’s very easy

Plus any of the popular frameworks (like Jest for unit testing or Detox for end-to-end testing) can be integrated seamlessly.

How To Create a New React Native Project

To create a new project, you can use the official React Native Community CLI:

npx @react-native-community/cli init rntesting 

Once the setup is complete, open the newly created folder in your favorite IDE (such as VS Code) and you’re ready to start adding tests.

By default, projects created with the Community CLI come with Jest preinstalled and configured, so you can immediately run tests with:

npm run test
yarn run test

Let’s update a few things to help us write and run our test.

"test:nowatch": "jest --watchAll=false",
"test:coverage": "jest --coverage --watchAll=false",
"test:update:snapshot": "npm test -- -u"

We would update our jest.config.js

module.exports = {
  preset: 'react-native', // use the react-native preset
  transformIgnorePatterns: [
    'node_modules/(?!(@react-native|react-native|react-native-reanimated|react-native-image-picker)/)', // add any other packages that need to be transformed
  ],
  setupFiles: [
    './jestSetup.js', // your custom setup file
  ],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      'jest-transform-stub', // mock static assets
  },
  fakeTimers: {
    enableGlobally: true, // use fake timers for all tests
  },
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}', // your source files
    '!src/assets/**', // exclude assets
    '!src/**/*.d.ts', // exclude types
    '!src/**/index.{js,ts,tsx}', // exclude barrel index files
  ],
  testMatch: [
    '**/__tests__/**/*.{js,jsx,ts,tsx}', // look for tests in __tests__
    '**/?(*.)+(spec|test).{js,jsx,ts,tsx}', // or files ending in .test/.spec
  ],
  collectCoverage: true, // enable coverage collection
  coverageThreshold: {
    // set coverage thresholds
    global: {
      branches: 100, // set to 100% or your desired threshold
      functions: 100, // set to 100% or your desired threshold
      lines: 100, // set to 100% or your desired threshold
      statements: 100, // set to 100% or your desired threshold
    },
  },
};

Now the next time you run coverage you should be able to see your code coverage and a coverage folder would be generated.

npm run test:coverage

To view the report in your browser open up the index.html file under rntesting/coverage/lcov-report/index.html .

Github Repo Link

Conclusion

We all dream of the fancy job with good pay but the harsh reality you are not ready to write test :).

Likewise teams that invest in tests build software that lasts.

Do you want to practice?

You can fork the repo, experiment, and add your own test cases. Let’s help each other write better, more reliable apps !

Cheers and happy testing!

Windows Android Development Setup

React Native Get Started Without a Framework

React Native Testing Library