Mobile Performance Testing: Render Time and Memory — testing React Native apps with Detox and @testing-library/react-native.
Mobile Performance Testing: Render Time and Memory addresses the unique challenges of mobile application testing. Mobile apps have device-specific behaviors (touch gestures, orientation, system permissions), platform differences (iOS vs Android), and performance constraints that web testing frameworks do not cover.
1Layer Tool Speed Fidelity
2Unit Jest + @testing-library/rn Fast Low
3Component Jest + @testing-library/rn Fast Medium
4E2E (gray-box) Detox Slow High
5E2E (black-box) Appium Slow High
6Performance Flashlight + Detox Slow High1# Install @testing-library/react-native
2npm install --save-dev @testing-library/react-native @testing-library/jest-native
3
4# Install Detox
5npm install --save-dev detox
6npx detox init
7
8# Build and run Detox tests:
9npx detox build --configuration ios.sim.debug
10npx detox test --configuration ios.sim.debug1import { render, screen, fireEvent } from '@testing-library/react-native';
2
3test('renders and handles interaction', () => {
4 const onPress = jest.fn();
5 render(<EnrollButton courseId="c1" onEnroll={onPress} />);
6
7 const button = screen.getByRole('button', { name: /enroll/i });
8 fireEvent.press(button);
9 expect(onPress).toHaveBeenCalledWith('c1');
10});
11
12test('shows loading state during enrollment', async () => {
13 render(<EnrollButton courseId="c1" isLoading onEnroll={jest.fn()} />);
14 expect(screen.getByRole('progressbar')).toBeTruthy();
15 expect(screen.getByRole('button')).toBeDisabled();
16});1import { device, element, by, expect as detoxExpect } from 'detox';
2
3describe('Login E2E', () => {
4 beforeAll(async () => await device.launchApp({ newInstance: true }));
5
6 it('completes login flow', async () => {
7 await element(by.id('email-input')).typeText('[email protected]');
8 await element(by.id('password-input')).typeText('Pass123!');
9 await element(by.id('password-input')).tapReturnKey();
10 await detoxExpect(element(by.id('dashboard-screen'))).toBeVisible();
11 });
12
13 it('shows error on invalid credentials', async () => {
14 await device.reloadReactNative();
15 await element(by.id('email-input')).typeText('[email protected]');
16 await element(by.id('password-input')).typeText('WrongPass');
17 await element(by.id('login-button')).tap();
18 await detoxExpect(element(by.id('error-message'))).toBeVisible();
19 });
20});1// Test orientation changes
2await device.setOrientation('landscape');
3await detoxExpect(element(by.id('courses-list'))).toBeVisible();
4await device.setOrientation('portrait');
5
6// Test biometric authentication
7await device.setBiometricEnrollment(true);
8await element(by.id('use-face-id-button')).tap();
9await device.matchFace();
10await detoxExpect(element(by.id('dashboard-screen'))).toBeVisible();
11
12// Take screenshot for visual comparison
13await device.takeScreenshot('login-screen');
14
15// Test with slow network (3G simulation)
16await device.setStatusBar({ network: 'hsdpa' }); // 3G-ish
17await element(by.id('courses-tab')).tap();
18// Verify loading state appears
19await detoxExpect(element(by.id('loading-spinner'))).toBeVisible();1# GitHub Actions for React Native
2jobs:
3 unit-tests:
4 runs-on: ubuntu-latest
5 steps:
6 - uses: actions/checkout@v4
7 - run: npm ci && npm test -- --ci --coverage
8
9 e2e-ios:
10 runs-on: macos-latest # Required for iOS simulator
11 steps:
12 - uses: actions/checkout@v4
13 - run: npm ci
14 - run: cd ios && pod install
15 - run: npx detox build --configuration ios.sim.debug
16 - run: npx detox test --configuration ios.sim.debug --headless
17 - uses: actions/upload-artifact@v4
18 if: always()
19 with: { name: detox-results, path: artifacts/ }macOS runners cost ~10x Ubuntu runners. Strategy:
Working code for mobile performance testing: render time and memory in a React Native application.
1// Mobile performance testing with React Native
2import { render, act } from '@testing-library/react-native';
3import { performance } from 'perf_hooks';
4
5describe('Mobile performance benchmarks', () => {
6 it('CourseList renders 20 items under 100ms', async () => {
7 const courses = Array.from({ length: 20 }, (_, i) => ({
8 id: 'c' + i, title: 'Course ' + i, price: 49.99, rating: 4.5,
9 }));
10
11 const start = performance.now();
12 const { getByTestId } = render(<CourseList courses={courses} />);
13 await act(async () => {}); // flush effects
14 const renderTime = performance.now() - start;
15
16 expect(renderTime).toBeLessThan(100); // under 100ms
17 expect(getByTestId('courses-list')).toBeTruthy();
18 });
19
20 it('FlatList does not render off-screen items (virtualization)', () => {
21 const courses = Array.from({ length: 100 }, (_, i) => ({
22 id: 'c' + i, title: 'Course ' + i,
23 }));
24 const { queryByText } = render(<CourseList courses={courses} />);
25 // Items far off-screen should not be in the DOM (FlatList virtualization)
26 expect(queryByText('Course 99')).toBeNull();
27 expect(queryByText('Course 0')).toBeTruthy();
28 });
29
30 // Detox + Flashlight for real device performance:
31 // npx flashlight measure --app com.yourapp --test e2e/performance.e2e.ts
32 // Measures: FPS, CPU, memory, startup time
33});This implementation demonstrates mobile performance testing: render time and memory following React Native testing best practices. Unit tests with @testing-library/react-native run fast in CI without a device. Detox E2E tests run on simulators/emulators for user flow verification. The combination provides coverage at all layers while keeping CI costs manageable.
Continue with the next mobile testing topic to build comprehensive coverage for your React Native application.
Your progress is saved in this browser, on this device only.