How to mock different scenarios with Detox?

[lukebrandonfarrell]

A question on how I would mock different scenarios, say I wanted to mock an image picker:

• Mock selection of a PNG
• Mock selection of a JPG
• Mock selection of multiple PNG images

I can write a mock of my image picker which returns a PNG file path in my detox tests, but how would I configure variable behaviour per test run? i.e. say I wanted to test all the three scenarios above with the same mock file. (or different mock files). It seems as if this is not supported.

If this isn't supported, what would be the road to supporting something like this? Are other people interested in this feature? It would need to be controlled with environment variables, as the mock code is setup at compile time, not runtime.

[d4vidi]

Hey @lukebrandonfarrell, that's a very interesting topic.
Mocking is not something Detox is suppose to support per se (no Detox feature is associated with that, explicitly). However, it is something so fundamental in testing, that we care about helping out with it as if was a core feature.

In general, the recommended mocking technique is described in our mocking guide. As for the use case you're describing, it sounds to me that it aligns with the technique pretty well. Largely, I think these principles sum it up:

1. Assuming your main React component for image picking is implemented in a file called ImagePicker.jsx -- create a mock equivalent in a file called ImagePicker.e2e.jsx.
2. To me it sounds like the mocked component should in fact be a screen that contains 3 buttons (for example: select PNG, select JPG, select multiple PNGs). Each button should be assigned a unique test ID.
3. When executing the tests, set RN_SRC_EXT to e2e.jsx,e2e.js.
4. In your detox test implementing the selection flow, integrate the mocking screen's behaviour - namely, tap on the proper button associated with each case.

Does that roughly solve you case?

[lukebrandonfarrell]

Thanks @d4vidi so using device.appLaunchArgs we can pass arguments from the mock server into the app itself, would that be right?

It seems as if to access these in Android, we'd need to use currentActivity.getIntent().getBundleExtra("launchArgs"). so to access these in RN, we'd need to write a small custom module? Would I be on the right track here?

For iOS the docs say On iOS, the specified launch arguments are passed as the process launch arguments and available through normal means, what would be the normal process (Objective-C) for obtaining launch arguments on iOS? (Maybe we can improve the docs here)

Thanks for drilling down into the details with me !

[d4vidi]

That's basically it. If you're using react-native-navigation in your project, then you have these available out-of-the-box using Navigation.getLaunchArgs(). Otherwise, you can use these references:

• Android: https://github.com/wix/react-native-navigation/blob/master/lib/android/app/src/main/java/com/reactnativenavigation/utils/LaunchArgsParser.java#L19
• iOS: https://github.com/wix/react-native-navigation/blob/master/lib/ios/RNNBridgeModule.m#L231

[lukebrandonfarrell]

Thanks @d4vidi !

[d4vidi]

Courtesy of @ruben00james: here's a good blogpost about mocking such flows with Detox: https://medium.com/geekculture/how-to-mock-react-native-image-picker-using-detox-9f7ced41b67f

[pke]

as for env vars you could use react-native-config and .env files and use those in your react files.

[ruben00james]

I have a question:

Can i put the ImagePickerProvider.ts and ImagePickerProvider.e2e.ts files used for mocking in another directory like e2e/mocks? If yes, what do i then need to change to my configuration?

i would like to know this because putting all these files in the root of our project is not ideal.