Victory-native: Detox tests hang & fail if the app is using victory-native

[chaitanyadeorukhkar]

Bugs and Questions

Checklist

• [x] This is a victory-native specific issue. (Issues that _also_ appear in victory should be opened here)

• [x] I have read through the FAQ and Guides before asking a question

• [x] I am using the latest version of victory-native

• [x] I have checked to make sure that my versions of react-native and react-native-svg are compatible with this version of victory-native. Read about version requirements

• [x] I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

Running Detox tests with victory-native in the app, hangs the test, and fails eventually. This happens _only_ on Android. iOS tests run successfully with victory-native

Reproduction

I have created a repo to demonstrate this. I've included instructions in the readme (with screenshots) on how to reproduce this issue. You can find it here: https://github.com/chaitanyadeorukhkar/detox_victory_demo

[chaitanyadeorukhkar]

After digging into this a bit more I realized that the timers run in loops. Victory native uses https://github.com/d3/d3-timer which keeps running in never-ending loops. Because of this detox keeps waiting for the timers to resolve which they never do. Is this intentional to keep d3-timer in a never-ending loop?

[scaralfred]

Has anyone fixed this or found a workaround?

[chaitanyadeorukhkar]

I did find a temporary workaround. Created a file called e2e/mocks/d3-timer.js with this code

function now() {}

function timer() {
  return {
    restart: () => {},
    stop: () => {},
  };
}

function timerFlush() {}

export { timer, now, timerFlush };

Used this file to "mock" d3-timer in our e2e tests by adding this to our .babelrc.js. You can read up on configuring module resolvers here

plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        extensions: [
          '.ios.js',
          '.android.js',
          '.js',
        ],
        alias: {
          'd3-timer':
            process.env.BABEL_ENV === 'e2e' ? './e2e/mocks/d3-timer.js' : './node_modules/d3-timer',
        },
      },
    ],
  ],

And finally changed the detox config in package.json to add BABEL_ENV

"android.emu.release": {
        "binaryPath": "android/app/build/outputs/apk/release/app-release.apk",
        "build": "cd android && BABEL_ENV=e2e ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release && cd ..",
        "type": "android.emulator",
        "device": {
          "avdName": "emulator"
        }
      }

This disables the graph animations & visuals but at least doesn't block the rest of our e2e tests. Hope this helps!

[scaralfred]

This looks great. Thanks! Could you share the same "builld" line, but for iOS?

[scaralfred]

I did find a temporary workaround. Created a file called e2e/mocks/d3-timer.js with this code

function now() {}

function timer() {
  return {
    restart: () => {},
    stop: () => {},
  };
}

function timerFlush() {}

export { timer, now, timerFlush };

Used this file to "mock" d3-timer in our e2e tests by adding this to our .babelrc.js. You can read up on configuring module resolvers here

plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        extensions: [
          '.ios.js',
          '.android.js',
          '.js',
        ],
        alias: {
          'd3-timer':
            process.env.BABEL_ENV === 'e2e' ? './e2e/mocks/d3-timer.js' : './node_modules/d3-timer',
        },
      },
    ],
  ],

And finally changed the detox config in package.json to add BABEL_ENV

"android.emu.release": {
        "binaryPath": "android/app/build/outputs/apk/release/app-release.apk",
        "build": "cd android && BABEL_ENV=e2e ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release && cd ..",
        "type": "android.emulator",
        "device": {
          "avdName": "emulator"
        }
      }

This disables the graph animations & visuals but at least doesn't block the rest of our e2e tests. Hope this helps!

This looks great. Thanks! Could you share the same "builld" line, but for iOS?

[chaitanyadeorukhkar]

@scaralfred It works fine on iOS. I only had an issue with Android. You can refer this for iOS

[rcscott]

Thanks @chaitanyadeorukhkar, your solution worked for me.

[amq]

Until now, I was able to test the production build with detox (extremely cool and valuable if you think about it), but with victory/d3 I'm forced to use mocks and thus a separate build.

How could someone external like me or a detox developer help with this?