E2E：从具有Wix Detox的UIImagePickerController中选择图像 [英] E2E: Select an image from a UIImagePickerController with Wix Detox

问题描述

我需要编写一个e2e测试，该测试必须在UIImagePickerController中选择一个图像，我尝试使用 element（by.type（'UIImagePickerController'））。 tapAtPoint（）没有用。我需要一种选择图像的方法。我发现了一种方法可以通过本机测试来实现。

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.

也因为我使用的是一个react-native-repackeger所需的更高版本，所以对我而言，模拟不是一个选择。

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

• 与使用图像选择器的任何应用程序一起使用

• Use with any application that uses image picker

尝试使用元素（by.type（'UIImagePickerController'））。tapAtPoint（{x：50，y：200}）

• 排毒：6.0.2


• 节点：8.9.0


• 设备：iOS Simulator 6s


• Xcode：9.2


• macOS：10.13.1


• 本机：0.46.4

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

没有日志，设备会在正确的位置点击，但不会产生效果。

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

推荐答案

忽略了原始问题，指出在提出的案例中，模拟不是一个选择，但是在搜索解决方案时，我几次遇到这个Stack Overflow问题，并想分享自己最终针对我的情况提出的建议。

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.

通过将 react-native-image-picker 包装到我自己的导出文件中，我可以解决e2e测试的局限性：

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;

然后创建带有自定义扩展名的模拟文件（即 e2e.js ）：

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,
    });
  },
};

最后，配置Metro bundler优先处理自定义扩展名：

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

[项目根目录] /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,
  },
};

然后使用 RN_SRC_EXT 环境变量运行到自定义扩展名：

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

RN_SRC_EXT=e2e.js react-native start

请参见排毒模拟指南了解更多信息。

这篇关于E2E：从具有Wix Detox的UIImagePickerController中选择图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！