https://github.com/kelset/react-native-e2e-jest-appium-webdriverio
sample codebase for E2E testing with Jest, Appium and WebDriverIO for Android and iOS
https://github.com/kelset/react-native-e2e-jest-appium-webdriverio
appium e2e jest react-native webdriverio
Last synced: 27 days ago
JSON representation
sample codebase for E2E testing with Jest, Appium and WebDriverIO for Android and iOS
- Host: GitHub
- URL: https://github.com/kelset/react-native-e2e-jest-appium-webdriverio
- Owner: kelset
- License: mit
- Created: 2022-08-19T12:16:40.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-07T10:56:54.000Z (4 months ago)
- Last Synced: 2025-04-21T18:14:11.499Z (29 days ago)
- Topics: appium, e2e, jest, react-native, webdriverio
- Language: Java
- Homepage:
- Size: 615 KB
- Stars: 47
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# E2E testing for React Native with Jest, Appium and WebDriverIO (iOS and Android)
[](./CONTRIBUTING.md)
In this repo you will find a sample project to showcase how to do E2E testing with [Jest](https://jestjs.io/) + [Appium](https://appium.io/) + [WebDriverIO](https://webdriver.io/) for Android and iOS on react-native.
_It's a bit janky but it serves the purpose of showcasing how to a basic setup needs to be correctly wired._
## How to use
First off, install the needed tooling:
```bash
npm install [email protected] -g
appium driver install uiautomator2
appium driver install xcuitest
```
> More details about drivers in Appium [here](https://appium.github.io/appium/docs/en/2.0/guides/managing-exts/) and [here](https://appium.github.io/appium/docs/en/2.0/quickstart/uiauto2-driver/)
Once you have done that, you can get the repo locally via the classic `git clone [email protected]:kelset/react-native-e2e-jest-appium-webdriverio.git` command (I prefer SSH over HTTP for cloning, but you do you).
Then you can navigate right into the codebase via `cd react-native-e2e-jest-appium-webdriverio`, followed by a `yarn install` command to install all the necessary dependencies.
After this, run the app on the Android emulator/ iOS simulator via `yarn android`/`yarn ios` - **you need to do this at least once** (for simplicity sake, we want the app to be already installed on the simulator/emulator before testing).
Once the app is on the emulator/simulator and Metro is running, you can open a new terminal window and start the Appium server via `yarn start:appium`.
With the server is running, you can use the commands `test:e2e:android` and `test:e2e:ios` to try out the E2E loop, or use `test:e2e:all` to run both one after the other.
### A note on setup
Please make sure that your local emulator/simulator config matches the `e2e-config.js` setup or it will fail 'cause it won't be able to connect to the platform.
## Notes on E2E: how does it work?
I'll try to keep it simple and to walk through all the main concepts and hacks that make it all work.
The basic premise is that this is, from Appium's perspective, just a project like any other: the app it needs to test is a black box, and it gets to communicate with it via webdriverIO's client.
Via the command `test:e2e:android` we start the testing, that starts up the `basicE2E.test.js` script - this file gets via an helper script `e2e-config.js` which platform to test (passed as an ENV variable, `E2E_DEVICE` during the yarn command, check `test:e2e:android` in `package.json`) and goes into the `package.json`, section `e2e`, and uses those info the `beforeAll` to stand up the webdriverIO client.
Then the actual testing is done by using as "communication point" to invoke the native components this following pattern `client.$('~')` (the ~ is intentional, and important!). The `` here is what we setup in `App.js`, and it should be just the `accessibilityID` option (that RN passes back to the native component) but actually we need to use a bit of a workaround script called `testProps` (at the top of `App.js`) to tailor this use for iOS/Android and for the `Text` component. (_huge props to Slav Kurochkin for finding this out and explaining it [in this article](http://93days.me/testing-react-native-application/)_)
This way we can interact with all the elements on screen that have their string setup as props via `{...testProps()}`.
If this isn't clear enough or you'd like a blogpost on this subject, feel free to [open an issue](https://github.com/kelset/react-native-e2e-jest-appium-webdriverio/issues/new) or talk to me [over on Twitter](https://twitter.com/kelset).
## Inspiration and resources
Getting this together was quite a bit of work because there aren't many resources around that walk you through the entire setup for React Native Android/iOS - I pieced this sample app together by following and taking bit and pieces from multiple places. In no particular order:
- https://appium.io/docs/en/about-appium/intro/?lang=en
- https://webdriver.io/docs/gettingstarted
- https://appium.io/docs/en/drivers/android-uiautomator2/
- https://appium.io/docs/en/drivers/ios-xcuitest/index.html
- http://93days.me/appium-test-automation-with-jest-and-webdriver-io/
- http://93days.me/testing-react-native-application/
- https://blog.codemagic.io/mobile-testing-appium-react-native-apps/
- https://blog.logrocket.com/testing-your-react-native-app-with-appium/
I was also inspired by a few repos and how they dealt with similar configs:
- https://github.com/hadnazzar/react-native-appium/blob/master/e2e/__tests__/appium-test-wdio.js.old
- https://github.com/garthenweb/react-native-e2etest/blob/master/package.json
- https://github.com/microsoft/react-native-windows/blob/main/docs/e2e-testing.md
- https://github.com/microsoft/fluentui-react-native/tree/main/apps/fluent-tester/src/E2E#e2e-testing-overview
## Contributing
Contributions are more than welcome! _(as already mentioned, code is janky and could use a bit more polish)_
Check [CONTRIBUTING](./CONTRIBUTING.md) for more.
Thanks to [@MadeInFrance](https://github.com/MadeinFrance) for his help.
## License & CoC
This repo is [MIT licensed](./LICENSE) and follows the [Contributor Covenant Code of Conduct](./CODE_OF_CONDUCT.md).