Detox doesn't work with React-Native 0.59 + React-Navigation

[alexmngn]

Describe the bug
After updating our project to React-Native 0.59, I'm facing issues running Detox.
The build works correctly but the application crashes as you open it with Detox.

TypeError: param is not an Object. (evaluating ''__isNative' in param')

It looks like it might be an issue by be correlated to react-navigation / react-native-gesture-handler. I use react-navigation 3.3.2

The application runs fine without Detox.
As Detox adds this cursor effect to know where it taps, I think it might be the reason why it breaks only when the app runs with Detox.

I've created a project on my github that reproduces the bug:

https://github.com/alexmngn/DetoxBug

Screenshots

Environment (please complete the following information):

• Detox: 11.0.0
• React Native: 0.59.1
• React Navigation: 3.3.2
• Node: 11.10.0
• Device: iOS Simulator
• Xcode: 10
• iOS: 12.1
• macOS: 10.14.3

[elyalvarado]

I can confirm this issue in my project with iOS, also using Detox 11.0.0, RN 0.59, and react-navigation 3.3.2

[zibs]

I can also confirm this issue. Using the same specs as the above ^.

CC @brentvatne maybe you have an idea here?

It seems like https://github.com/react-navigation/react-navigation-stack/blob/master/src/views/StackView/StackViewLayout.js#L110 is null when using detox, but is not when not using detox. Which is why I'm pinging you here, since I can't figure out why that would be null in some cases, and not in others. I couldn't figure out what was necessarily different about running detox test vs just running react-native run-ios that would cause one to be null and the other to not.

When it is null, it passes it here https://github.com/react-navigation/react-navigation-stack/blob/master/src/views/StackView/StackViewLayout.js#L303 to a PanGestureHandler which then dies at this check https://github.com/kmagiera/react-native-gesture-handler/blob/c9f7c46b42966c0ec9c7f97df3d5a119ce789ae6/createHandler.js#L42.

All of the above plays nicely together when not running Detox.

I also made a mvce https://github.com/zibs/mvce-detox-gesture-handler if the above one doesn't work. You can test it by running yarn, and then react-native run-ios to see it work, and then detox test to see it fail.

[brentvatne]

@zibs - thanks for doing that! can you try to repro this without using react-navigation at all, just react-native-gesture-handler?

[zibs]

@brentvatne good call. I've updated the repo https://github.com/zibs/mvce-detox-gesture-handler to use only a PanGestureHandler, and commented out all of the react-navigation code, and am getting the same result after running detox test (it works fine if built normally still). So it looks like it's isolated between Detox and rn-gesture-handler. Something still to do with onGestureEvent={this._onGestureEvent} being null I assume.

[ddzirt]

@zibs So basically commenting like this:

Will allow for detox to run:

But the issue remains the same, and from my understanding(I am not familiar with internals of both Detox and RNGH), this is likely because Detox adds something that is failing to pass this check(most likely cursor effect mentioned by @alexmngn), but I can't pinpoint where it is within Detox to check it out.

[ddzirt]

OK, modifying this check:
```
return (
param !== undefined &&
typeof param !== 'function' &&
(typeof param !== 'object || !('__isNative' in param)) &&
name !== 'onHandlerStateChange' &&
name !== 'onGestureEvent'
);

into:

function isObject(obj) {
return obj === Object(obj);
}

return (
param !== undefined &&
typeof param !== 'function' &&
(!isObject(param) || !('__isNative' in param)) &&
name !== 'onHandlerStateChange' &&
name !== 'onGestureEvent'
);
```

Solves this issue, because Detox is passing something that is a false positive or a false negative and it effectively breaks this check. Still can't actually figure out what is Detox putting in there exactly, except this is a Gesture:

2019-03-15 17:43:18.530 [info][tid:com.facebook.react.JavaScript] 'filterConfig -> value:', null, 'key: ', 'onGestureEvent'

And since it is passing null, all breaks.

[LeoNatan]

Hi guys,

I am not sure what is going on here. We do not use React Navigation.

Gut feeling tells me this isn't Detox related, but if you can assist tracking down what you think is causing this from Detox, I'd be happy to investigate and assist.

Thanks

[ddzirt]

Hi guys,

I am not sure what is going on here. We do not use React Navigation.

Gut feeling tells me this isn't Detox related, but if you can assist tracking down what you think is causing this from Detox, I'd be happy to investigate and assist.

Thanks

You are partially right, Detox is not entirely at fault, and React Navigation is out of this scope completely. Issue comes from React Native Gesture Handler(I am submitting a PR to fix that(https://github.com/kmagiera/react-native-gesture-handler/pull/525), since it is really small) that receives event that has "null" as a param, this event comes from Detox.

So, what I am actually interested in(and I hope you or anyone working on Detox could help me out) is where and how Detox adds gesture events, since those events are what were breaking RNGH and maybe, theoretically, we can prevent that by adding fix within Detox itself.

[LeoNatan]

Detox simulates events from the native, like all events. It uses the same API Apple uses to send events. That's why the issue seems strange to me.

[ddzirt]

As far as I understand, this triggers events:
https://github.com/wix/Detox/blob/e7cbb696d7f8a1beff3ac50e319dbcca1aa2b60e/detox/ios/Detox/DetoxUserActivityDispatcher.swift#L67

But what bothers me is that even having such test:

it('App loaded', async () => { await expect(element(by.id('RootView'))).toBeVisible() })

Something is passing some gesture event(I am assuming it is coming from Detox, still, I might be wrong about it, since I failed to find anything remotely close to what I thought it would be) and I can't find the source of this event.

I'll be able to dig into this further later this week, so I'll do updates as soon as I investigate further into this.

[zibs]

@ddzirt Your fix seems to make it play nicer with rngh, but still did not solve my problem when using react-navigation, and it seems to be because:

This ternary: https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Animated.js#L15 seems to be called with Platform.isTesting being true, and so Animated.event returns null: https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/AnimatedMock.js#L122 as seen there. I assume this is why we see Animated.Event being null is certain cases with gesture-handler and react-navigation.

To make my detox tests work fully, I have to comment out the ternary in first link so that my app runs with AnimatedImplementation and not AnimatedMock.

[LeoNatan]

@ddzirt I don't understand what the line you quoted has anything to do with this thread. That is our internal triggering mechanism for mocked NSUserActivity. Unless you are actively using this feature of Detox, it is not used normally.

[zibs]

@LeoNatan Any thoughts on why I need to use AnimatedImplementation vs AnimatedMock? Detox seems to default to using AnimatedMock, which causes Animated.event's to be null, as shown by my links in the above comment. This makes react-navigation no longer work (and causes that rngh crash).

[LeoNatan]

Sorry, I have no idea what those are. I don’t think Detox has any relation to those.

[zibs]

Np - just curious if you had any ideas on your end on how something internally may have affected how Animated works.

[LeoNatan]

No. Detox operates natively only. RN decisions, especially in JS, should be oblivious to Detox.

[ddzirt]

@ddzirt Your fix seems to make it play nicer with rngh, but still did not solve my problem when using react-navigation, and it seems to be because:

This ternary: https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Animated.js#L15 seems to be called with Platform.isTesting being true, and so Animated.event returns null: https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/AnimatedMock.js#L122 as seen there. I assume this is why we see Animated.Event being null is certain cases with gesture-handler and react-navigation.

To make my detox tests work fully, I have to comment out the ternary in first link so that my app runs with AnimatedImplementation and not AnimatedMock.

@zibs I forked RNGH(posting actual RNGH version), made a fix and tested it on my actual project that has such setup:

"react": "^16.8.3",

"react-native": "0.59.1",

"react-native-gesture-handler": "^1.1.0",

"react-native-reanimated": "^1.0.0-alpha.12",

"react-navigation": "^3.3.2",

[ddzirt]

@zibs So, I took your project and tested my solution on it:

It works. If you wish to try it yourself I can push this.

[LeoNatan]

Guys, now that https://github.com/kmagiera/react-native-gesture-handler/pull/525 has been merged, can I close this issue?

[ddzirt]

Guys, now that kmagiera/react-native-gesture-handler#525 has been merged, can I close this issue?

In my opinion we can close this one, since the issue is not directly connected to Detox itself(or at least I could not reproduce issue after applying a fix to RNGH). Maybe anyone has specific project setup that can showcase the issue and I'll look into it?

[LeoNatan]

Let's close it. If something comes up that Detox doesn't do correctly, please open a new issue. Thanks

[alexmngn]

@ddzirt I have tried your changes, it looks like it doesn't throw that error anymore, though react-navigation doesn't seem to work at all. Not sure if it's related though.
Tapping on a button to navigate to a screen (in a stack navigator) doesn't do anything.

[yogeshthanvi]

Hi @LeoNatan this a big blocker , if we are trying the new changes then navigation stops working and if we wont then there is an error as mentioned in trail. It is very important to upgrade now on RN 59 as from August 1, 2019 Google Play will not accept apps with 32 bit only .so files. So from 59 64 bit support is added . Please can we really take care of this it will be blocker for detox growth even.

[LeoNatan]

I don't understand what I am supposed to do. I believe Detox works as expected. I believe the issue should be directed at React Navigation.

[ddzirt]

@alexmngn try using this:

await device.disableSynchronization();

[LeoNatan]

Wait. If synchronization is a cause of issues, please try running the test with the --debug-synchronization 200 argument and see where it is stuck. This will help understand where in React Navigation there is an issue.

[yogeshthanvi]

Tried both none is working seems to be an issue with navigation

Yogesh Thanvi
QA Team Lead
Punchh Tech India Pvt Ltd

On Tue, Mar 26, 2019 at 6:28 PM Leo Natan [e-mail] wrote:

Wait. If synchronization is a cause of issues, please try running the test
with the --debug-synchronization 200 argument and see where it is stuck.
This will help understand where in React Navigation there is an issue.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/wix/Detox/issues/1207#issuecomment-476616071, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AX8BluId3hUkylZpXGXqyFvKVYNpZpyXks5vahl5gaJpZM4bz9Nr
.

[LeoNatan]

Guys, when investigating #1234, we found that in RN59, If Detox is attached, RN thinks its in testing mode and disables some functionality. I wonder if that is not a cause of some of the issues here. I'll release 12.1 soon with the fix for #1234. Please test if it helps with other issues discussed here.