Error running tests with Detox in Expo React Native project

Question

When I try to run my tests using detox in a React Native Expo project, I get the following error:

detox[18834] WARN:  [Client.js/PENDING_REQUESTS] App has not responded to the network requests below:
  (id = -1000) isReady: {}

That might be the reason why the test "Login workflow should have login screen" has timed out.

detox[18834] INFO:  Login workflow: should have login screen [FAIL]

 FAIL  e2e/firstTest.e2e.js (137.697 s)
  Login workflow
    ✕ should have login screen (120015 ms)

  ● Login workflow › should have login screen

    thrown: "Exceeded timeout of 120000 ms for a hook.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

       7 |   });
       8 |
    >  9 |   it('should have login screen', async () => {
         |   ^
      10 |     await expect(element(by.id('loginFormTitle'))).toBeVisible()
      11 |   });
      12 |

      at firstTest.e2e.js:9:3
      at Object.<anonymous> (firstTest.e2e.js:8:1)

detox[18833] ERROR: [cli.js] Error: Command failed: node_modules/.bin/jest --config e2e/config.json '--testNamePattern=^((?!:android:).)*$' --maxWorkers 1 e2e

I am running iPhone 11 Pro simulator, and the expo app is already running in a separate server. I also have a Exponent.app in my /bin folder, which I downloaded from Expo's website. The logic in my test case doesn't require any timeout and it involves just a simple login screen.

Any solution for this error?

Answer 1

As of December 2020, I'm using detox 17.14.3 with Expo 39.0.5 and I've managed to solve this issue without needing to use a standalone build. Patch and explanation provided below.

It turns out that detox-expo-helpers is overriding an environment variable (specifically SIMCTL_CHILD_DYLD_INSERT_LIBRARIES) to specify the path to the ExpoDetoxHook framework (provided by the expo-detox-hook package). Well, that update to the environment now happens too late in the cycle. It takes place when running Detox's reloadApp, but by then, Detox has started up Jest which has workers running with their own copy of process.env. Workers get a copy of process.env at the time of creation, and they are not shared with the parent process, so the changes this library makes to environment variables are not reflected inside Jest workers. The hook framework is not available to the running application, and so the Detox is stuck waiting for a ready signal that doesn't come.

Detox's launchApp for iOS simulator uses SIMCTL_CHILD_DYLD_INSERT_LIBRARIES to specify it's own library, but because the environment vars are isolated in the worker, it does not see the change this package makes. To solve this, I modified this library to expose the changes to process.env as a separate exported function, and then I call that much earlier in the test lifecycle to ensure it is set before any workers are started. Here is a patch compatible with patch-package.

# file patches/detox-expo-helpers+0.6.0.patch

diff --git a/node_modules/detox-expo-helpers/index.js b/node_modules/detox-expo-helpers/index.js
index 864493b..3147a55 100644
--- a/node_modules/detox-expo-helpers/index.js
+++ b/node_modules/detox-expo-helpers/index.js
@@ -45,7 +45,16 @@ function resetEnvDyldVar(oldEnvVar) {
   }
 }
 
-const reloadApp = async (params) => {
+let initialized = false;
+let detoxVersion;
+let oldEnvVar;
+const init = () => {
+  if (initialized) {
+    return;
+  }
+
+  initialized = true;
+
   if (!fs.existsSync(expoDetoxHookPackageJsonPath)) {
     throw new Error("expo-detox-hook is not installed in this directory. You should declare it in package.json and run `npm install`");
   }
@@ -56,12 +65,16 @@ const reloadApp = async (params) => {
     throw new Error ("expo-detox-hook is not installed in your osx Library. Run `npm install -g expo-detox-cli && expotox clean-framework-cache && expotox build-framework-cache` to fix this.");
   }
 
-  const detoxVersion = getDetoxVersion();
-  const oldEnvVar = process.env.SIMCTL_CHILD_DYLD_INSERT_LIBRARIES;
+  detoxVersion = getDetoxVersion();
+  oldEnvVar = process.env.SIMCTL_CHILD_DYLD_INSERT_LIBRARIES;
 
   if (semver.gte(detoxVersion, '9.0.6')) {
     process.env.SIMCTL_CHILD_DYLD_INSERT_LIBRARIES = expoDetoxHookFrameworkPath;
   }
+}
+
+const reloadApp = async (params) => {
+  init();
 
   const formattedBlacklistArg = await blacklistCmdlineFormat(params && params.urlBlacklist);
   const url = await getAppUrl();
@@ -121,5 +134,6 @@ module.exports = {
   getAppUrl,
   getAppHttpUrl,
   blacklistLiveReloadUrl,
+  init,
   reloadApp,
 };

With that in place, I modified my e2e/environment.js file to look like the following. The addition is the initExpo call. When it runs this early in the test lifecycle, the environment is modified before any workers are started, and as a result, calls to reloadApp no longer wait indefinitely.

/* eslint-disable import/no-extraneous-dependencies */
const { init: initExpo } = require('detox-expo-helpers');
const { DetoxCircusEnvironment, SpecReporter, WorkerAssignReporter } = require('detox/runners/jest-circus');

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

    initExpo();

    // 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;

Answer 2

I had a similar issue using the latest version of Expo (v39).

It seems like the issue is that Detox waits for an app is ready event before running the tests, but this doesn’t get triggered with the most recent versions of the Expo SDK.

The solution I ended up with was to create a standalone build of the app and run Detox against that.

My .detoxrc.json looks like:

{
  ...,
  "configurations": {
    "ios": {
      "type": "ios.simulator",
      "build": "expo build:ios -t simulator",
      "binaryPath": "bin/myapp.app",                                                                                                            
    }
  }
}