Detox e2e testing with react-navigation and react-native-fluid-transitions - expect .toBeVisible failing

Question

I have a detox e2e test to test out the flow from the start of my app up to the login.

My app starts with a splash screen. It then loads my StackNavigator whose first element is a FluidNavigator from react-native-fluid-transitions library.

The test fails with an error that it is unable to pass my assertion for my element:

    Failed: [Error: Error: An assertion failed.

    Exception with Assertion: {
      "Assertion Criteria":  "assertWithMatcher:matcherForSufficientlyVisible(>=0.750000)",
      "Element Matcher":  "((!(kindOfClass('RCTScrollView')) && (respondsToSelector(accessibilityIdentifier) && accessibilityID('signInOrRegisterPage'))) || (((kindOfClass('UIView') || respondsToSelector(accessibilityContainer)) && parentThatMatches(kindOfClass('RCTScrollView'))) && ((kindOfClass('UIView') || respondsToSelector(accessibilityContainer)) && parentThatMatches((respondsToSelector(accessibilityIdentifier) && accessibilityID('signInOrRegisterPage'))))))"
    }


    Error Trace: [
      {
        "Description":  "Assertion with matcher [M] failed: UI element [E] failed to match the following matcher(s): [S]",
        "Description Glossary":    {
          "M":  "matcherForSufficientlyVisible(>=0.750000)",
          "E":  "<RCTView:0x7fb63252a270; AX=N; AX.id='signInOrRegisterPage'; AX.label='Welcome to the CompCare Member App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>",
          "S":  "matcherForSufficientlyVisible(>=0.750000)"
        },
        "Error Domain":  "com.google.earlgrey.ElementInteractionErrorDomain",
        "Error Code":  "3",
        "File Name":  "GREYAssertions.m",
        "Function Name":  "+[GREYAssertions grey_createAssertionWithMatcher:]_block_invoke",
        "Line":  "75"
      }
    ]

Here is my e2e test:

describe('Login with Pin', () => {
  beforeEach(async () => {
    await device.reloadReactNative();
  });

  it('should show the Sign In Or Register page', async () => {
    await expect(element(by.id('signInOrRegisterPage'))).toBeVisible();
  });

  it('should show the register button and the sign in button', async () => {
    await expect(element(by.id('btnRegisterForApp'))).toBeVisible();
    await expect(element(by.id('btnSignIn'))).toBeVisible();
  });

  it('should navigate to the sign in page', async () => {
    await element(by.id('btnSignIn')).tap();
    await expect(element(by.id('signInPage'))).toBeVisible();
  });

  it('should show the pin input keypad', async () => {
    await expect(element(by.id('pinInputKeypad'))).toBeVisible();
  });

  it('should show the dashboard after entering a series of digits', async () => {
    await element(by.id('testInput1')).tap();
    await element(by.id('testInput9')).tap();
    await element(by.id('testInput6')).tap();
    await element(by.id('testInput0')).tap();
    //await expect(element(by.id('dashboard'))).toBeVisible();
  });
})

I have tried using detox's await device.disableSynchronization(); and then using await waitFor(element(by.id('signInOrRegisterPage'))).toBeVisible().withTimeout(2000);. That didn't work either.

Here is more of my code in case it helps:

App.js

import React, { Component } from 'react';
import SplashScreen from 'react-native-splash-screen';
import { View } from 'react-native';

import StackNavigator from './components/StackNavigator';

export default class App extends Component {

  componentDidMount() {
    SplashScreen.hide();
  }

  render() {
    return (
        <StackNavigator />
    );
  }
}

Basics of my StackNavigator.js

const StackNavigator = createStackNavigator(
  {
    FluidTransitionNavigator: {
      screen: FluidTransitionNavigator
    },
    Dashboard: {
      screen: Dashboard
    }
  },
  {
    initialRouteName: 'FluidTransitionNavigator',
    headerMode: 'float',
    navigationOptions: (props) => ({
      header: renderHeader(props)
    }),
    // transitionConfig: transitionConfig
  }
);

Basics of my FluidTransitionNavigator:

const FluidTransitionNavigator = FluidNavigator({
  SignInOrRegister: {
    screen: SignInOrRegister
  },
  Login: {
    screen: Login
  }
});

My SignInOrRegister page:

class SignInOrRegister extends Component {
  onRegisterPress() {
  }

  onSignInPress() {
    this.props.navigation.push('Login');
  }

  render() {
    return (
      <View style={styles.mainViewStyle} testID='signInOrRegisterPage'>

        <Transition appear="horizontal">
          <View style={{ flex: 1, zIndex: 2}}>
            <Text style={styles.welcomeTextStyle}>Welcome to the App</Text>
            <View style={styles.logoViewStyle}>
              <Image
                source={require('./images/Logo.png')}
                style={styles.logoStyle}
              />
            </View>
            <Text style={styles.instructionTextStyle}>
              I just installed the app.
            </Text>
            <UniButton testID='btnRegisterForApp' style={{ marginTop: 10 }} type='primary' label='Register for App' onPress={this.onRegisterPress.bind(this)} />
            <UniButton testID='btnSignIn' style={{ marginTop: 30, zIndex: 10 }} type='secondary' label='I just want to Sign In' onPress={this.onSignInPress.bind(this)} />
          </View>
        </Transition>

        <Transition shared="brand_btm">
          <View style={styles.brandingImageViewStyle}>
            <BrandingBottom />
          </View>
        </Transition>
      </View>
    );
  }
}

I have also tried removing the Transition elements from my SignInOrRegister component:

render() {
    return (
      <View style={styles.mainViewStyle} testID='signInOrRegisterPage'>

        {/* <Transition appear="horizontal"> */}
          <View style={{ flex: 1, zIndex: 2}}>
            <Text style={styles.welcomeTextStyle}>Welcome to the CompCare Member App</Text>
            <View style={styles.logoViewStyle}>
              <Image
                source={require('./images/Logo.png')}
                style={styles.logoStyle}
              />
            </View>
            <Text style={styles.instructionTextStyle}>
              I just installed the app.
            </Text>
            <UniButton testID='btnRegisterForApp' style={{ marginTop: 10 }} type='primary' label='Register for App' onPress={this.onRegisterPress.bind(this)} />
            <UniButton testID='btnSignIn' style={{ marginTop: 30, zIndex: 10 }} type='secondary' label='I just want to Sign In' onPress={this.onSignInPress.bind(this)} />
          </View>
        {/* </Transition> */}

        {/* <Transition shared="brand_btm"> */}
          <View style={styles.brandingImageViewStyle}>
            <BrandingBottom />
          </View>
        {/* </Transition> */}
      </View>
    );
  }

But I still get a failed test.

Here is the entire View Hierarchy:

Hierarchy: <UIWindow:0x7fb6326273e0; AX=N; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |--<RCTRootView:0x7fb632519780; AX=N; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |--<RCTRootContentView:0x7fb634a00450; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |--<RCTView:0x7fb632530950; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |--<RCTView:0x7fb63252ef50; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |  |--<RCTView:0x7fb63252e960; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |  |  |--<RCTView:0x7fb63252e390; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |  |  |  |--<RCTView:0x7fb63252d340; AX=N; AX.frame={{0, 0}, {375, 64}}; AX.activationPoint={187.5, 32}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 64}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |--<RCTView:0x7fb63252ced0; AX=N; AX.frame={{-375, 0}, {375, 64}}; AX.activationPoint={-187.5, 32}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{-375, 0}, {375, 64}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |--<RCTView:0x7fb63252ca60; AX=N; AX.frame={{-375, 0}, {375, 64}}; AX.activationPoint={-187.5, 32}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 64}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb63252b8f0; AX=N; AX.frame={{-375, 20}, {375, 43.5}}; AX.activationPoint={-187.5, 41.75}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 20}, {375, 43.5}}; opaque; alpha=1>
      |  |  |  |  |  |  |--<RCTView:0x7fb634b02770; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |--<RCTView:0x7fb634a02910; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |--<RCTView:0x7fb634a02610; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb634a01240; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632536870; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=0; UIE=N>
      |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632536260; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 50}, {375, 617}}; AX.activationPoint={187.5, 358.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 50}, {375, 617}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632533f30; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 50}, {375, 617}}; AX.activationPoint={187.5, 358.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 617}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632532ed0; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 50}, {375, 617}}; AX.activationPoint={187.5, 358.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 617}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632532900; AX=Y; AX.label='I just want to Sign In'; AX.frame={{0, 384.5}, {375, 43.5}}; AX.activationPoint={187.5, 406.25}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 334.5}, {375, 43.5}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb6325322e0; AX=N; AX.label='I just want to Sign In'; AX.frame={{85.5, 384.5}, {204, 43.5}}; AX.activationPoint={187.5, 406.25}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{85.5, 0}, {204, 43.5}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTTextView:0x7fb632531e70; AX=Y; AX.label='I just want to Sign In'; AX.frame={{106.5, 395.5}, {163, 22}}; AX.activationPoint={188, 406.5}; AX.traits='UIAccessibilityTraitStaticText'; AX.focused='N'; frame={{21, 11}, {163, 22}}; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632531860; AX=Y; AX.label='Register for App'; AX.frame={{0, 311}, {375, 43.5}}; AX.activationPoint={187.5, 332.75}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 261}, {375, 43.5}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632524d20; AX=N; AX.label='Register for App'; AX.frame={{100.5, 311}, {174, 43.5}}; AX.activationPoint={187.5, 332.75}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{100.5, 0}, {174, 43.5}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTTextView:0x7fb63251b750; AX=Y; AX.label='Register for App'; AX.frame={{121.5, 322}, {132, 22}}; AX.activationPoint={187.5, 333}; AX.traits='UIAccessibilityTraitStaticText'; AX.focused='N'; frame={{21, 11}, {132, 22}}; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTTextView:0x7fb632523100; AX=Y; AX.label='I just installed the app.'; AX.frame={{0, 279.5}, {375, 22}}; AX.activationPoint={187.5, 290.5}; AX.traits='UIAccessibilityTraitStaticText'; AX.focused='N'; frame={{0, 229.5}, {375, 22}}; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb63251bd20; AX=N; AX.frame={{0, 150.5}, {375, 114}}; AX.activationPoint={187.5, 207.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 100.5}, {375, 114}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTImageView:0x7fb63251c190; AX=N; AX.frame={{49.5, 165.5}, {276, 99}}; AX.activationPoint={187.5, 215}; AX.traits='UIAccessibilityTraitImage'; AX.focused='N'; frame={{49.5, 15}, {276, 99}}; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTTextView:0x7fb632526d30; AX=Y; AX.label='Welcome to the App'; AX.frame={{0, 80}, {375, 71}}; AX.activationPoint={187.5, 115.5}; AX.traits='UIAccessibilityTraitStaticText'; AX.focused='N'; frame={{0, 30}, {375, 71}}; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb63252ad20; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb63252a890; AX=N; AX.label='Welcome to the CompCare Member App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      +  +  +  +  +  +  +  +  +  +  +  +  +--<RCTView:0x7fb63252a270; AX=N; AX.id='signInOrRegisterPage'; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb6348012c0; AX=N; AX.frame={{0, 395}, {375, 272}}; AX.activationPoint={187.5, 531}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 395}, {375, 272}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb6349019d0; AX=N; AX.frame={{0, 395}, {375, 272}}; AX.activationPoint={187.5, 531}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 272}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632720000; AX=N; AX.frame={{0, 395}, {375, 272}}; AX.activationPoint={187.5, 531}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 272}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb634800d30; AX=N; AX.frame={{0, 395}, {375, 272}}; AX.activationPoint={187.5, 531}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 272}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTImageView:0x7fb63271fd20; AX=N; AX.frame={{0, 395}, {375, 272}}; AX.activationPoint={187.5, 531}; AX.traits='UIAccessibilityTraitImage'; AX.focused='N'; frame={{0, 0}, {375, 272}}; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632717e80; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 50}, {375, 617}}; AX.activationPoint={187.5, 358.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 50}, {375, 617}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632718cf0; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 50}, {375, 617}}; AX.activationPoint={187.5, 358.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 617}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb6327189f0; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame={{0, 50}, {375, 617}}; AX.activationPoint={187.5, 358.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 617}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb6327186f0; AX=Y; AX.label='I just want to Sign In'; AX.frame={{0, 384.5}, {375, 43.5}}; AX.activationPoint={187.5, 406.25}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 334.5}, {375, 43.5}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632529b40; AX=N; AX.label='I just want to Sign In'; AX.frame={{85.5, 384.5}, {204, 43.5}}; AX.activationPoint={187.5, 406.25}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{85.5, 0}, {204, 43.5}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTTextView:0x7fb63250ce50; AX=Y; AX.label='I just want to Sign In'; AX.frame={{106.5, 395.5}, {163, 22}}; AX.activationPoint={188, 406.5}; AX.traits='UIAccessibilityTraitStaticText'; AX.focused='N'; frame={{21, 11}, {163, 22}}; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632719c90; AX=Y; AX.label='Register for App'; AX.frame={{0, 311}, {375, 43.5}}; AX.activationPoint={187.5, 332.75}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 261}, {375, 43.5}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632719990; AX=N; AX.label='Register for App'; AX.frame={{100.5, 311}, {174, 43.5}}; AX.activationPoint={187.5, 332.75}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{100.5, 0}, {174, 43.5}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTTextView:0x7fb632715c30; AX=Y; AX.label='Register for App'; AX.frame={{121.5, 322}, {132, 22}}; AX.activationPoint={187.5, 333}; AX.traits='UIAccessibilityTraitStaticText'; AX.focused='N'; frame={{21, 11}, {132, 22}}; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTTextView:0x7fb632716a40; AX=Y; AX.label='I just installed the app.'; AX.frame={{0, 279.5}, {375, 22}}; AX.activationPoint={187.5, 290.5}; AX.traits='UIAccessibilityTraitStaticText'; AX.focused='N'; frame={{0, 229.5}, {375, 22}}; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632719270; AX=N; AX.frame={{0, 150.5}, {375, 114}}; AX.activationPoint={187.5, 207.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 100.5}, {375, 114}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTImageView:0x7fb632702a20; AX=N; AX.frame={{49.5, 165.5}, {276, 99}}; AX.activationPoint={187.5, 215}; AX.traits='UIAccessibilityTraitImage'; AX.focused='N'; frame={{49.5, 15}, {276, 99}}; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTTextView:0x7fb6348007e0; AX=Y; AX.label='Welcome to the App'; AX.frame={{0, 80}, {375, 71}}; AX.activationPoint={187.5, 115.5}; AX.traits='UIAccessibilityTraitStaticText'; AX.focused='N'; frame={{0, 30}, {375, 71}}; alpha=1>]

You can see where I have placed a row of pluses to indicate where it is finding the element in this hierarchy.

I found a similar question over here: https://stackoverflow.com/questions/52665147/detox-multiple-elements-were-matched-for-button-in-transition I really think my problem has something to do with react-native-fluid-transitions but trying the solution from this question did not work for me. — Kevin van Zyl, Nov 26 '18 at 09:56

Kevin van Zyl · Accepted Answer · 2018-11-26T16:30:58.577

I am quite sure (but not 100% sure) that this issue is introduced by the react-native-fluid-transitions library.

The library seems to add many wrappers to make animations function, it also repeats views. This results in the element that is assigned the testID being rendered far inside the hierarchy and being repeated. I got around this by using the atIndex(1).

I ended up using atIndex(1) as opposed to atIndex(0) because it turned out when trying to do a tap, the element at index 0 was not interactable, however the element at index 1 was.

When using the toBeVisible expectation, then there seems to be an issue on iOS (in relation to react-native-fluid-transitions) with opacity which might also have to do with animations. I got around that by using the waitFor with withTimeout.

I have opened an issue here: https://github.com/fram-x/FluidTransitions/issues/138

it('should show the Sign In Or Register page', async () => {

  await waitFor(element(by.id('signInOrRegisterPage')).atIndex(1)).toBeVisible().withTimeout(2000);
});

it('should show the register button and the sign in button', async () => {

  await waitFor(element(by.id('btnRegisterForApp')).atIndex(1)).toBeVisible().withTimeout(2000);
  await waitFor(element(by.id('btnSignIn')).atIndex(1)).toBeVisible().withTimeout(2000);

  await element(by.id('btnSignIn')).atIndex(1).tap();
});

I really hope this will be of use to the developers of the react-native-fluid-transitions library, and to anyone else using it with detox.

I received an answer from a Contributor on the **react-native-fluid-transitions** to my issue ticket: _FluidTransitions creates a copy of all transition elements and runs the transition in a separate overlay, this is probably why it fails._ — Kevin van Zyl, Nov 30 '18 at 11:59

Detox e2e testing with react-navigation and react-native-fluid-transitions - expect .toBeVisible failing

1 Answers1