Mock ImageCropPicker in React Native Detox

Question

I'm trying to mock the react-native-image-crop-picker package (the openCamera function specifically) in Detox but I'm not managing to do it. Detox simply does not consider the mock.

.detoxrc.json:

{
  "testRunner": "jest",
  "runnerConfig": "e2e/config.json",
  "uiHierarchy": "enabled",
  "configurations": {
    "android.emu.debug": {
      "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
      "build": "yarn detox:prepare",
      "type": "android.emulator",
      "device": {
        "avdName": "Pixel_4_API_29"
      }
    }
  }
}

.config.json:

{
  "preset": "ts-jest",
  "testEnvironment": "./environment",
  "testRunner": "jest-circus/runner",
  "testTimeout": 120000,
  "reporters": ["detox/runners/jest/streamlineReporter"],
  "verbose": true,
  "testMatch": [
    "**/__tests__/**/*.js?(x)",
    "**/?(*.)(e2e).js?(x)",
    "**/__tests__/**/*.ts?(x)",
    "**/?(*.)(e2e).ts?(x)"
  ]
}

config.js:

require('@babel/register')({
  //cache: true,
  presets: [require('metro-react-native-babel-preset')],
  plugins: [require('@babel/plugin-transform-runtime').default],
  only: ['./e2e', './ts', './js'],
  ignore: ['node_modules'],
});

environment.js:

const {
  DetoxCircusEnvironment,
  SpecReporter,
  WorkerAssignReporter,
} = require('detox/runners/jest-circus');

class CustomDetoxEnvironment extends DetoxCircusEnvironment {
  constructor(config) {
    super(config);

    // Can be safely removed, if you are content with the default value (=300000ms)
    this.initTimeout = 300000;

    // This takes care of generating status logs on a per-spec basis. By default, Jest only reports at file-level.
    // This is strictly optional.
    this.registerListeners({
      SpecReporter,
      WorkerAssignReporter,
    });
  }
}

module.exports = CustomDetoxEnvironment;

metro.config.js:

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

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  /**
   *
   * Blacklist is a function that takes an array of regexes
   * and combines them with the default blacklist to return a single regex.
   *
   */
  resolver: {
    blacklistRE: blacklist([/.\/amplify\/.*/]),
    sourceExts: process.env.RN_SRC_EXT
      ? process.env.RN_SRC_EXT.split(',').concat(defaultSourceExts)
      : defaultSourceExts,
  },
};

E2E folder: E2E Folder

ImageCropPicker.e2e.js:

import ImageCropPicker from 'react-native-image-crop-picker';

ImageCropPicker.openCamera = function openCamera() {
  console.tron.log('mocked');
  return {
    mime: 'test',
    data: 'test',
  };
};

I also tried to put the ImageCropPicker.e2e.js file outside the mocks folder, but it did not work as well.

Detox, Node, Device and OS versions:

Detox: 17.6.0
Node: 10.23.0
Device: Pixel 4 API 29
OS: Linux Pop!_OS 20.10
React-Native: 0.62.0

Can you help me? I appreciate your time!

Mock ImageCropPicker in React Native Detox

0 Answers