Bdd react native

Setting up a React Native project with TypeScript, Cucumber, and Detox involves several steps. Here’s a comprehensive guide including the folder structure, files, and example code for a login test.

### Folder Structure

```
my-react-native-app/
├── .detox/
├── android/
├── ios/
├── e2e/
│   ├── step_definitions/
│   │   └── loginSteps.ts
│   ├── support/
│   │   └── world.ts
│   └── login.feature
├── src/
│   ├── components/
│   ├── screens/
│   │   └── LoginScreen.tsx
│   ├── App.tsx
│   └── index.ts
├── .buckconfig
├── .eslintrc.js
├── .gitignore
├── babel.config.js
├── cucumber.js
├── detox.config.js
├── package.json
├── tsconfig.json
└── yarn.lock
```

### 1. Set Up Your Project

1. **Initialize your React Native project with TypeScript:**

   ```bash
   npx react-native init my-react-native-app --template react-native-template-typescript
   cd my-react-native-app
   ```

2. **Install necessary dependencies:**

   ```bash
   yarn add cucumber detox @cucumber/cucumber detox-cli @types/cucumber
   ```

3. **Install Detox dependencies:**

   ```bash
   yarn add detox --dev
   ```

4. **Install TypeScript and related types:**

   ```bash
   yarn add typescript @types/react @types/react-native --dev
   ```

### 2. Configure TypeScript

Ensure your `tsconfig.json` is set up correctly:

```json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es6"],
    "module": "commonjs",
    "moduleResolution": "node",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*", "e2e/**/*"],
  "exclude": ["node_modules"]
}
```

### 3. Configure Detox

Create a `detox.config.js` file:

```js
module.exports = {
  testRunner: 'jest',
  runnerConfig: 'e2e/config.json',
  configurations: {
    android: {
      device: {
        avdName: 'Pixel_3a_API_30_x86',
        type: 'android.emulator',
      },
      app: 'android/app/build/outputs/apk/debug/app-debug.apk',
    },
    ios: {
      device: {
        type: 'simulator',
      },
      app: 'ios/build/Build/Products/Debug-iphonesimulator/my-react-native-app.app',
    },
  },
};
```

### 4. Configure Cucumber

Create a `cucumber.js` file:

```js
module.exports = {
  default: `--require-module ts-node/register --require e2e/step_definitions/**/*.ts --format progress --format json:./reports/cucumber_report.json`,
};
```

### 5. Detox Configuration for Jest

Create `e2e/config.json`:

```json
{
  "setupFilesAfterEnv": ["<rootDir>/e2e/setup.js"],
  "testTimeout": 120000
}
```

Create `e2e/setup.js`:

```js
const detox = require('detox');
const config = require('../detox.config');

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

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

### 6. Example Code

#### `e2e/login.feature`

```gherkin
Feature: Login

  Scenario: Successful login
    Given I am on the login screen
    When I enter valid credentials
    And I tap on the login button
    Then I should see the home screen
```

#### `e2e/step_definitions/loginSteps.ts`

```typescript
import { Given, When, Then } from '@cucumber/cucumber';
import { element, by, expect } from 'detox';

Given('I am on the login screen', async () => {
  await expect(element(by.id('loginScreen'))).toBeVisible();
});

When('I enter valid credentials', async () => {
  await element(by.id('usernameInput')).typeText('testuser');
  await element(by.id('passwordInput')).typeText('password123');
});

When('I tap on the login button', async () => {
  await element(by.id('loginButton')).tap();
});

Then('I should see the home screen', async () => {
  await expect(element(by.id('homeScreen'))).toBeVisible();
});
```

#### `src/screens/LoginScreen.tsx`

```typescript
import React from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';

const LoginScreen = () => {
  return (
    <View testID="loginScreen" style={styles.container}>
      <TextInput testID="usernameInput" placeholder="Username" style={styles.input} />
      <TextInput testID="passwordInput" placeholder="Password" secureTextEntry style={styles.input} />
      <Button testID="loginButton" title="Login" onPress={() => {}} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 12,
    paddingHorizontal: 8,
  },
});

export default LoginScreen;
```

### 7. Running Your Tests

To run your Detox tests, use:

```bash
npx detox test --configuration ios
```

or

```bash
npx detox test --configuration android
```

Ensure your emulator or simulator is running before executing the tests.

This setup provides a complete guide for configuring Cucumber and Detox with a React Native TypeScript project and includes an example login test.