E2E: Select an image from a UIImagePickerController with Wix Detox

Question

Description

I need to write an e2e test that in some point it has to select an image in UIImagePickerController, I tried to use element(by.type('UIImagePickerController')). tapAtPoint() with no use. I need a way to select an image. I have found a way to do it with native tests.

Also mocking isn't an option for me since I use a higher version that the one react-native-repackeger needs.

Steps to Reproduce

• Use with any application that uses image picker

• Try to use element(by.type('UIImagePickerController')).tapAtPoint({ x: 50, y: 200 })

Detox, Node, Device, Xcode and macOS Versions

• Detox: 6.0.2
• Node: 8.9.0
• Device: iOS Simulator 6s
• Xcode: 9.2
• macOS: 10.13.1
• React-Native: 0.46.4

Device and verbose Detox logs

There's no logs, the device taps on the right location but the tap doesn't make an effect.

Answer 1

Noticed the original question stated that mocks were not an option in the case presented, but I came across this Stack Overflow question a few times in my searches for a solution and thought to share what I ultimately came up with for my situation.

I was able to get around the limitations for the e2e test by wrapping react-native-image-picker in my own export:

ImagePicker.js

import ImagePicker from 'react-native-image-picker';

export default ImagePicker;

And then creating a mock with a custom extension (i.e. e2e.js):

ImagePicker.e2e.js

const mockImageData = '/9j/4AAQSkZ...MORE BASE64 DATA OF CUTE KITTENS HERE.../9k=';

export default {
  showImagePicker: function showImagePicker(options, callback) {
    if (typeof options === 'function') {
      callback = options;
    }

    callback({
      data: mockImageData,
    });
  },
};

Finally, configure the metro bundler to prioritize your custom extension:

[project root]/rn-cli.config.js

const defaultSourceExts = require('metro-config/src/defaults/defaults')
  .sourceExts;

module.exports = {
  resolver: {
    sourceExts: process.env.RN_SRC_EXT
      ? process.env.RN_SRC_EXT.split(',').concat(defaultSourceExts)
      : defaultSourceExts,
  },
};

Then run with the RN_SRC_EXT environment variable set to the custom extension:

RN_SRC_EXT=e2e.js react-native start

See the Detox Mocking Guide for more information.