react-native-testing

• React Native basics
• Understanding of async/await
• Familiarity with testing concepts

After completing this skill, you will be able to:

• [ ] Configure Jest for React Native
• [ ] Write component tests with Testing Library
• [ ] Mock native modules and APIs
• [ ] Implement E2E tests with Detox/Maestro
• [ ] Set up CI/CD test pipelines

---

1. Jest Setup

```javascript

// jest.config.js

module.exports = {

preset: 'react-native',

setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],

transformIgnorePatterns: [

'node_modules/(?!(react-native|@react-native)/)',

],

};

```

2. Component Testing

```tsx

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

import { Button } from './Button';

describe('Button', () => {

it('calls onPress when pressed', () => {

const onPress = jest.fn();

render();

fireEvent.press(screen.getByText('Click'));

expect(onPress).toHaveBeenCalled();

});

});

```

3. Hook Testing

```tsx

import { renderHook, act } from '@testing-library/react-native';

import { useCounter } from './useCounter';

describe('useCounter', () => {

it('increments count', () => {

const { result } = renderHook(() => useCounter());

act(() => result.current.increment());

expect(result.current.count).toBe(1);

});

});

```

4. Mocking

```typescript

// Mock native module

jest.mock('@react-native-async-storage/async-storage', () => ({

setItem: jest.fn(),

getItem: jest.fn(),

}));

// Mock API

jest.mock('./api', () => ({

fetchUser: jest.fn().mockResolvedValue({ id: '1', name: 'Test' }),

}));

```

5. E2E with Detox

```typescript

describe('Login', () => {

beforeAll(async () => {

await device.launchApp();

});

it('should login successfully', async () => {

await element(by.id('email')).typeText('test@example.com');

await element(by.id('password')).typeText('password');

await element(by.id('login-btn')).tap();

await expect(element(by.id('home'))).toBeVisible();

});

});

```

---

```tsx

// ProductCard.test.tsx

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

import { ProductCard } from './ProductCard';

const mockProduct = {

id: '1',

title: 'Test Product',

price: 99.99,

};

describe('ProductCard', () => {

it('renders product info', () => {

render();

expect(screen.getByText('Test Product')).toBeOnTheScreen();

expect(screen.getByText('$99.99')).toBeOnTheScreen();

});

it('handles press', () => {

const onPress = jest.fn();

render();

fireEvent.press(screen.getByRole('button'));

expect(onPress).toHaveBeenCalledWith('1');

});

});

```

---

| Error | Cause | Solution |

|-------|-------|----------|

| "Cannot find module" | Missing mock | Add jest.mock() |

| Async timeout | Missing await | Use waitFor() |

| Element not found | Wrong query | Check testID/role |

---

• [ ] Unit tests pass
• [ ] Component tests cover interactions
• [ ] E2E tests complete flows
• [ ] Coverage meets threshold (80%+)

---

```

Skill("react-native-testing")

```

Bonded Agent: 06-react-native-testing