Integrating Jest in a React Native App

Jest is a powerful testing framework that comes pre-installed with React Native. It enables developers to write and run unit tests efficiently. In this guide, we will explore how to integrate and use Jest in a React Native project.

Verifying Jest Installation

When you create a new React Native project, Jest is already configured and included as a dependency. You can verify this by checking your package.json file:

{
  "devDependencies": {
    "jest": "^29.x.x",
    "@testing-library/react-native": "^12.x.x",
    "react-test-renderer": "^18.x.x"
  },
  "jest": {
    "preset": "react-native"
  }
}

This confirms that Jest is set up and ready to use.

Writing Your First Test

Let’s create a simple test for an App.tsx file. This file includes two utility functions (getGreeting and addNumbers) along with the main App component.

Sample App.tsx

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

// ✅ Exported function for testing
export const getGreeting = (name: string) => {
  return `Hello, ${name}!`;
};

// ✅ Function to add two numbers (for testing)
export const addNumbers = (a: number, b: number) => a + b;

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>{getGreeting('Bro')}</Text>
      <Text testID="counter-text">Count: {count}</Text>
      <Button testID="increment-button" title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

export default App;

Inside your project, create a __tests__ directory and add a test file App.test.tsx:

import React from 'react';
import ReactTestRenderer from 'react-test-renderer';
import App, { getGreeting, addNumbers } from '../App';

// ✅ Test getGreeting function
test('getGreeting should return a greeting message', () => {
  expect(getGreeting('John')).toBe('Hello, John!');
  expect(getGreeting('Alice')).toBe('Hello, Alice!');
});

// ✅ Test addNumbers function
test('addNumbers should return the sum of two numbers', () => {
  expect(addNumbers(2, 3)).toBe(5);
  expect(addNumbers(-1, 1)).toBe(0);
});

// ✅ Snapshot test to ensure App UI remains consistent
test('App renders correctly', () => {
  const tree = ReactTestRenderer.create(<App />).toJSON();
  expect(tree).toMatchSnapshot(); // Snapshot testing
});

Running the Tests

To execute the tests, run the following command:

npm test

This command will:

• Find all test files (*.test.tsx or files inside __tests__ directory).
• Run the test cases and display the results.
• Generate snapshots for UI components.

Updating Snapshots

If you make changes to your component and need to update the snapshots, run:

npm test -- -u

This command will update the existing snapshots to match the latest component output.

• Jest generates a snapshot file in __snapshots__/App.test.tsx.snap.
• It saves the rendered output of your App component.

On subsequent test runs:

• Jest compares the current render to the saved snapshot.
• If the component output matches, the test passes.
• If there’s a difference (e.g., text or layout changes), the test fails, and Jest prompts you to update the snapshot.

Where Snapshots Are Stored

Snapshots are saved in:

__tests__/__snapshots__/App.test.tsx.snap

Output

Conclusion

Jest is an essential tool for testing React Native applications. It provides easy-to-use unit and snapshot testing capabilities that help maintain stable and bug-free applications. By following this guide, you can efficiently integrate Jest into your React Native workflow and ensure your app remains reliable.

Reference

https://jestjs.io/docs/tutorial-react-native