{"id":16082109,"url":"https://github.com/varunon9/rn-e2e-testing-detox","last_synced_at":"2025-03-18T06:30:26.767Z","repository":{"id":36368640,"uuid":"213039562","full_name":"varunon9/rn-e2e-testing-detox","owner":"varunon9","description":"Step by step guide for end to end testing in react native (Android) using detox","archived":false,"fork":false,"pushed_at":"2023-01-04T22:11:16.000Z","size":1946,"stargazers_count":8,"open_issues_count":20,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-28T07:49:27.836Z","etag":null,"topics":["android","detox","e2e-testing","react-native"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/varunon9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-05T17:13:21.000Z","updated_at":"2025-01-31T05:54:29.000Z","dependencies_parsed_at":"2023-01-17T01:31:12.207Z","dependency_job_id":null,"html_url":"https://github.com/varunon9/rn-e2e-testing-detox","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varunon9%2Frn-e2e-testing-detox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varunon9%2Frn-e2e-testing-detox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varunon9%2Frn-e2e-testing-detox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varunon9%2Frn-e2e-testing-detox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/varunon9","download_url":"https://codeload.github.com/varunon9/rn-e2e-testing-detox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243906173,"owners_count":20366985,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","detox","e2e-testing","react-native"],"created_at":"2024-10-09T11:25:37.455Z","updated_at":"2025-03-18T06:30:26.325Z","avatar_url":"https://github.com/varunon9.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native e2e testing using detox\n\nStep by step guide for end to end testing in react native (Android) using detox\n\n### About this app\n\nThis app has been created using `react-native init` and then edited to contain a login form for the demonstration of integration testing using [detox](https://github.com/wix/Detox/).\n\n### Prerequisites\n\n1. You must have `node` and `npm` already setup in your machine\n2. Install Detox command line tool globally using `npm install -g detox-cli`\n\n### Installing and setting up detox in Android\n\n1. Go to your react native project directory, e.g. `cd RnE2eTestingDetox/`\n2. Install `detox` as dev dependency `yarn add detox -D`\n3. Add following configuration in `android/build.gradle` inside `allprojects.repositories`\n\n```\nmaven {\n    // All of Detox' artifacts are provided via the npm module\n    url \"$rootDir/../node_modules/detox/Detox-android\"\n}\n```\n\n4. Inside `android/build.gradle`, change minSdkVersion to 18 and add `kotlinVersion = \"1.3.41\"` in `ext` block\n\n```\next {\n    buildToolsVersion = \"28.0.3\"\n    minSdkVersion = 18\n    compileSdkVersion = 28\n    targetSdkVersion = 28\n    kotlinVersion = \"1.3.41\"\n}\n```\n\n5. Inside `android/build.gradle`, add the Kotlin Gradle-plugin to your classpath\n\n```\ndependencies {\n    classpath(\"com.android.tools.build:gradle:3.4.2\")\n    classpath \"org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion\"\n\n    // NOTE: Do not place your application dependencies here; they belong\n    // in the individual module build.gradle files\n}\n```\n\n6. Inside `app/build.gradle`, add the following two lines in `android.defaultConfig` block\n\n```\ndefaultConfig {\n  testBuildType System.getProperty('testBuildType', 'debug')  // This will later be used to control the test apk build type\n  testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'\n}\n```\n\n7. Inside `app/build.gradle`, add the following line in `android.buildTypes.release` block\n\n```\n// Detox-specific additions to pro-guard\nproguardFile \"${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules-app.pro\"\n```\n\n8. Inside `app/build.gradle`, add the following lines in `dependencies` section\n\n```\nandroidTestImplementation('com.wix:detox:+') { transitive = true }\nandroidTestImplementation 'junit:junit:4.12'\nimplementation \"androidx.annotation:annotation:1.1.0\"\n```\n\n9. Add the file `android/app/src/androidTest/java/com/[your.package]/DetoxTest.java`. Don't forget to change the package name to your project's. Refer [DetoxTest.java](https://github.com/wix/Detox/blob/master/examples/demo-react-native/android/app/src/androidTest/java/com/example/DetoxTest.java)\n\n10. Hit `detox init -r jest` to use jest as test-runner. Its output will be something like-\n\n```\ndetox[27185] INFO:  [init.js] Created a file at path: e2e/config.json\ndetox[27185] INFO:  [init.js] Created a file at path: e2e/init.js\ndetox[27185] INFO:  [init.js] Created a file at path: e2e/firstTest.spec.js\ndetox[27185] INFO:  [init.js] Patching package.json at path: ~rn-e2e-testing-detox/RnE2eTestingDetox/package.json\ndetox[27185] INFO:  [init.js]   json[\"detox\"][\"test-runner\"] = \"jest\";\n```\n\n11. Add the following configuration inside `package.json`. (`test-runner`would already be there created in last step)\n\n```\n\"detox\": {\n    \"configurations\": {\n      \"android.emu.debug\": {\n        \"binaryPath\": \"android/app/build/outputs/apk/debug/app-debug.apk\",\n        \"build\": \"cd android \u0026\u0026 ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug \u0026\u0026 cd ..\",\n        \"type\": \"android.emulator\",\n        \"name\": \"Nexus_4_API_23\"\n      },\n      \"android.emu.release\": {\n        \"binaryPath\": \"android/app/build/outputs/apk/release/app-release.apk\",\n        \"build\": \"cd android \u0026\u0026 ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release \u0026\u0026 cd ..\",\n        \"type\": \"android.emulator\",\n        \"name\": \"Nexus_4_API_23\"\n      }\n    },\n    \"test-runner\": \"jest\"\n  }\n```\n\n12. Note that in above configuration, I am using `\"name\": \"Nexus_4_API_23\"`. This is the name of my emulator device. You can find yours using-\n\n```\n// ANDROID_HOME environment variable is set to Android Sdk directory (/Android/Sdk)\n$ANDROID_HOME/emulator/emulator -list-avds\n```\n\n13. Build a debug apk using `detox build -c android.emu.debug`\n\n14. Edit `./e2e/firstTest.spec.js` file to have your app specific testing instructions. For this example app, it would be-\n\n```\ndescribe('Login flow test', () =\u003e {\n  beforeEach(async () =\u003e {\n    //await device.reloadReactNative();\n  });\n\n  it('should have login screen', async () =\u003e {\n    await expect(element(by.id('loginView'))).toBeVisible();\n  });\n\n  it('should fill login form', async () =\u003e {\n    await element(by.id('usernameInput')).typeText('varunk');\n    await element(by.id('passwordInput')).typeText('test123\\n');\n    await element(by.id('loginButton')).tap();\n  });\n\n  it('should show dashboard screen', async () =\u003e {\n    await expect(element(by.id('dashboardView'))).toBeVisible();\n    await expect(element(by.id('loginView'))).toNotExist();\n  });\n});\n``` \n\n15. Run e2e testing `detox test -c android.emu.debug`\n\n### Demo\n\n![e2e testing demo](./screenshots/e2e-testing-rn-detox.gif)\n\n### Git diff for setting up Detox in react-native Android\n\nhttps://github.com/varunon9/rn-e2e-testing-detox/commit/8536e816cd256e75794a8327a94400f462326f03\n\n### Medium Blog\n\nhttps://medium.com/@varunon9/e2e-testing-of-react-native-app-android-using-detox-a-step-by-step-guide-bfb520c1a9ac?sk=bd355b27920cf639e1b202a57667e2ec","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvarunon9%2Frn-e2e-testing-detox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvarunon9%2Frn-e2e-testing-detox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvarunon9%2Frn-e2e-testing-detox/lists"}