Mocking with RN Detox

Question

I am following the detox mocking guide with typescript. The app always prints console.log of X.ts file instead of X.e2e.ts file.

Dependency version.

react-native: 0.61.5,
detox: 16.4.0

Metro Configuration:

"detox": {
    "test-runner": "jest",
    "runner-config": "e2e/config.json",
    "configurations": {
      "ios.sim.debug": {
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/App.app",
        "build": "RN_SRC_EXT=e2e.js,e2e.ts xcodebuild -workspace ios/App.xcworkspace -scheme 'App Test' -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "device": {
          "type": "iPhone 11"
        }
      }
    }
  }

metro.config.js

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

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false
      }
    })
  },
  resolver: {
    sourceExts: process.env.RN_SRC_EXT ? process.env.RN_SRC_EXT.split(",").concat(defaultSourceExts) : defaultSourceExts
  }
};

console.log("default", defaultSourceExts);
console.log("module.exports from e2e", module.exports);

/** above console results into the following

default [ 'js', 'json', 'ts', 'tsx' ]
module.exports from e2e { transformer:
   { getTransformOptions: [AsyncFunction: getTransformOptions] },
  resolver: { sourceExts: [ 'e2e.ts', 'js', 'json', 'ts', 'tsx' ] } }
*/

/src/AppEvent.js

const logEvent = (): void => {
  console.log("from non-test event file");
};

export default {
  logEvent
};

/src/AppEvent.e2e.ts

const logEvent = (): void => {
  console.log("from test event file");
};

export default {
  logEvent
};

When I run detox build && detox test metro server doesn't log e2d files, So I had to run metro separately using RN_SRC_EXT=e2e.js,e2e.ts yarn start

I have problems with same version of react-native using mocking. Does your metro config works well? Looks its not replacing the .e2e files for prod ones.. @NAUSHAD — robto09, Aug 13 '20 at 21:31
Also experiencing this, did you come up with a fix @naushad or @robto09? — Eric Carmichael, Apr 25 '21 at 22:48

score 0 · Answer 1 · answered Sep 06 '21 at 15:14

0

ive tried this method too but it was more boilerplate than tests, check this out: https://www.npmjs.com/package/10mock you can look at example code here: https://github.com/10play/10mock-example-app

answered Sep 06 '21 at 15:14

Shahar Eliyahu

116
1
3

score 0 · Answer 2 · answered Aug 01 '22 at 15:46

I'm using a slightly different version of config maybe this will help for anybody finding this as reference. Config:

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  let resolverSourceExts = [...sourceExts, 'svg', 'cjs'];
  // mocking setup for detox
  if (process.env.RN_SRC_EXT) {
    resolverSourceExts =
      process.env.RN_SRC_EXT.split(',').concat(resolverSourceExts);
  }
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      sourceExts: resolverSourceExts,
    },
  };
})();

I have faced a similar issue with components not being picked up after migrating to TS. Apparently, my components were all TSX not TS files.

I changed my RN_SRC_EXT to e2e.tsx and it worked flawlessly.

Mocking with RN Detox

2 Answers2