Detox React Native Testing

Natural language testing for React Native applications using Detox driver and Wix Pilot. Write mobile UI tests in plain English and let AI handle the automation.

What This Skill Does

This skill enables you to write end-to-end tests for React Native apps using natural language instead of complex Detox selectors and actions. The AI translates your plain English instructions into proper Detox commands, making mobile testing more accessible and maintainable.

Prerequisites

Installation Steps

1. Install Required Packages

```bash

npm install --save-dev @wix-pilot/detox detox @wix-pilot/core

```

Or with yarn:

```bash

yarn add -D @wix-pilot/detox detox @wix-pilot/core

```

2. Create LLM Handler

Create a file `test/pilot-handler.ts`:

```typescript

import { PromptHandler } from '@wix-pilot/core';

export class CustomPromptHandler implements PromptHandler {

async runPrompt(prompt: string, image?: string): Promise<string> {

// Example: Using Anthropic Claude

const response = await fetch('https://api.anthropic.com/v1/messages', {

method: 'POST',

headers: {

'Content-Type': 'application/json',

'x-api-key': process.env.ANTHROPIC_API_KEY!,

'anthropic-version': '2023-06-01'

},

body: JSON.stringify({

model: 'claude-3-5-sonnet-20241022',

max_tokens: 1024,

messages: [{ role: 'user', content: prompt }]

})

});

const data = await response.json();

return data.content[0].text;

}

isSnapshotImageSupported(): boolean {

return true; // Enable if your LLM supports vision

}

}

```

3. Configure Test File

Create `e2e/app.test.ts`:

```typescript

import pilot from '@wix-pilot/core';

import { DetoxFrameworkDriver } from '@wix-pilot/detox';

import { CustomPromptHandler } from '../test/pilot-handler';

describe('React Native App', () => {

beforeAll(async () => {

pilot.init({

driver: new DetoxFrameworkDriver(),

promptHandler: new CustomPromptHandler(),

});

});

beforeEach(() => pilot.start());

afterEach(() => pilot.end());

it('should complete login flow', async () => {

await pilot.perform([

'Launch the app',

'Tap the "Login" button',

'Enter "[email protected]" in the email field',

'Enter "SecurePass123" in the password field',

'Tap the "Submit" button',

'Verify the home screen is displayed'

]);

});

it('should navigate through tabs', async () => {

await pilot.perform([

'Tap the "Profile" tab at the bottom',

'Scroll down to see settings',

'Tap "Edit Profile"',

'The profile editor should appear'

]);

});

});

```

4. Run Tests

```bash

iOS

detox test --configuration ios.sim.debug

Android

detox test --configuration android.emu.debug

```

Writing Effective Test Instructions

Good Patterns

**Be specific about elements:**

```typescript

'Tap the blue "Continue" button at the bottom'

'Enter "[email protected]" in the email input field'

'Verify the success message appears at the top'

```

**Use natural descriptions:**

```typescript

'Scroll down until you see the logout button'

'Wait for the loading spinner to disappear'

'The user avatar should be visible in the top right'

```

**Chain related actions:**

```typescript

await pilot.perform([

'Open the settings menu',

'Toggle notifications to enabled',

'Tap "Save Changes"',

'A confirmation toast should appear'

]);

```

Avoid These Patterns

❌ Vague instructions: `'Click something'`

❌ Technical selectors: `'Tap testID="login-btn"'`

❌ Ambiguous references: `'Tap that button'`

✅ Clear descriptions: `'Tap the green "Sign In" button'`

✅ Natural language: `'Enter my email in the input field'`

✅ Explicit expectations: `'The dashboard title should say "Welcome"'`

Common Testing Scenarios

Authentication Flow

```typescript

await pilot.perform([

'Launch the app',

'Tap "Create Account"',

'Fill in the registration form with test data',

'Accept terms and conditions',

'Tap "Sign Up"',

'Verify email confirmation screen appears'

]);

```

Form Validation

```typescript

await pilot.perform([

'Enter invalid email "notanemail"',

'Tap outside the field',

'An error message should appear below the email field',

'Enter valid email "[email protected]"',

'The error should disappear'

]);

```

Navigation Testing

```typescript

await pilot.perform([

'Tap the menu icon in top left',

'Select "Settings" from the drawer',

'The settings screen should load',

'Tap the back arrow',

'Return to home screen'

]);

```

Troubleshooting

Tests Timing Out

Element Not Found

LLM Returns Invalid Actions

Environment Variables

Set these in your `.env` file:

```bash

Example for Anthropic Claude

ANTHROPIC_API_KEY=sk-ant-...

Or for OpenAI

OPENAI_API_KEY=sk-...

```

Best Practices

1. **Start simple**: Test basic flows first before complex scenarios

2. **Use descriptive names**: Name tests clearly to explain what they verify

3. **Keep steps atomic**: Each instruction should do one clear thing

4. **Add assertions**: Always verify expected outcomes with "should" statements

5. **Handle waits**: Explicitly wait for async operations to complete

6. **Reuse patterns**: Extract common flows into helper functions if needed

Integration with CI/CD

Add to your pipeline (e.g., GitHub Actions):

```yaml

run: |

detox build --configuration ios.sim.release

detox test --configuration ios.sim.release --cleanup

env:

ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}

```

Additional Resources