Testing React Native Apps

import { calculateTotal } from './calculator';

test('calculates total correctly', () => {
  const items = [
    { price: 10, quantity: 2 },
    { price: 5, quantity: 1 }
  ];
  expect(calculateTotal(items)).toBe(25);
});

jest.mock('react-native', () => {
  const actual = jest.requireActual('react-native');
  return {
    ...actual,
    Alert: {
      alert: jest.fn()
    }
  };
});

import React from 'react';
import { render } from '@testing-library/react-native';
import { Text } from 'react-native';

const Greeting = ({ name }) => <Text>Hello, {name}!</Text>;

test('renders greeting', () => {
  const { getByText } = render(<Greeting name="John" />);
  expect(getByText('Hello, John!')).toBeTruthy();
});

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

const Counter = ({ onIncrement }) => (
  <Button onPress={onIncrement}>Press Me</Button>
);

test('increments counter on press', () => {
  const mockOnIncrement = jest.fn();
  const { getByText } = render(<Counter onIncrement={mockOnIncrement} />);
  fireEvent.press(getByText('Press Me'));
  expect(mockOnIncrement).toHaveBeenCalledTimes(1);
});

import { NativeModules } from 'react-native';

// Mock the native module
jest.mock('NativeModules', () => ({
  MyNativeModule: {
    fetchUserData: jest.fn(() => Promise.resolve({ id: 1, name: 'John Doe' })),
    saveUserSettings: jest.fn(() => Promise.resolve(true))
  }
}));

// In test
test('should fetch user data', async () => {
  const userData = await NativeModules.MyNativeModule.fetchUserData();
  expect(userData.name).toBe('John Doe');
});

import { render, screen } from '@testing-library/react-native';
import { useEffect } from 'react';
import { Text } from 'react-native';

const ComponentWithEffect = () => {
  const [data, setData] = useState('');

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData);
  }, []);

  return <Text>{data}</Text>;
};

// Test
test('renders data after effect', async () => {
  const { findByText } = render(<ComponentWithEffect />);
  expect(await findByText('fetched data')).toBeTruthy();
});

import { render, screen } from '@testing-library/react-native';
import { useState } from 'react';
import { Button, Text } from 'react-native';

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

  return (
    <>
      <Text testID="count">{count}</Text>
      <Button title="Increment" onPress={() => setCount(c => c + 1)} />
    </>
  );
};

// Test
test('increments count on button press', () => {
  const { getByTestId, getByText } = render(<CounterComponent />);
  const countText = getByTestId('count');
  const button = getByText('Increment');

  expect(countText.props.children).toBe(0);
  button.props.onPress();
  expect(countText.props.children).toBe(1);
});

import { render } from '@testing-library/react-native';
import App from '../App';

test('renders app correctly', () => {
  const { getByText } = render(<App />);
  expect(getByText(&#x27;Welcome to React Native&#x27;)).toBeTruthy();
});

import { render } from '@testing-library/react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../screens/HomeScreen';
import DetailScreen from '../screens/DetailScreen';

const Stack = createStackNavigator();

function TestNavigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

test('navigates to detail screen', () => {
  const { getByText } = render(<TestNavigation />);
  const homeScreen = getByText('Home Screen');
  expect(homeScreen).toBeTruthy();
});

import renderer from 'react-test-renderer';
import MyComponent from './MyComponent';

test('renders correctly', () => {
  const tree = renderer.create(<MyComponent />).toJSON();
  expect(tree).toMatchSnapshot();
});

it('fetches user data', async () => {
  const mockUser = { id: 1, name: 'John' };
  jest.spyOn(global, 'fetch').mockResolvedValueOnce({
    json: jest.fn().mockResolvedValue(mockUser),
  });

  const { getByText } = render(<UserProfile userId={1} />);
  await waitFor(() => getByText('John'));
});

import React from 'react';
import TestRenderer from 'react-test-renderer';

const MyComponent = ({ name }) => (
  <View>
    <Text>Hello, {name}!</Text>
  </View>
);

const renderer = TestRenderer.create(<MyComponent name="John" />);
console.log(renderer.toJSON());

// Install Detox
npm install --save-dev detox

// Configure detox in package.json
{
  "detox": {
    "configurations": {
      "ios.sim": {
        "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/MyApp.app",
        "build": "xcodebuild -workspace ios/MyApp.xcworkspace -scheme MyApp -configuration Release -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator"
      },
      "android.emu": {
        "binaryPath": "android/app/build/outputs/apk/release/app-release.apk",
        "build": "cd android && ./gradlew assembleRelease assembleAndroidTest -PisLocalBuild=true",
        "type": "android.emulator"
      }
    },
    "testCommand": "detox test --configuration ios.sim",
    "runner": "detox"
  }
}

describe('Example Test Suite', () => {
  beforeAll(async () => {
    await device.launchApp();
  });

  it('should show the welcome screen', async () => {
    await expect(element(by.id('welcomeScreen'))).toBeVisible();
  });

  it('should navigate to the settings screen', async () => {
    await element(by.id('settingsButton')).tap();
    await expect(element(by.id('settingsScreen'))).toBeVisible();
  });
});

const detox = require('detox');
const config = require('../package.json').detox;

beforeAll(async () => {
  await detox.init(config);
});

afterAll(async () => {
  await detox.cleanup();
});

npm install -g @maestro/cli