Search code examples
react-nativemocha.jsjestjsdetox

Error: Error: No views in hierarchy found matching: (with tag value: is "email" and view has effective visibility=VISIBLE)

Hi I am doing detox test for react native android version 0.57. I have two screens launch screen and login screen. I am able to go to login screen but while testing elements in login screen I am getting this error. Code is `

describe.only('test2', () => {
    before(async () => {
      await device.reloadReactNative();
    });

    it('should have welcome screen', async () => {
      await expect(element(by.text('Welcome'))).toBeVisible();
    });

    it('should Click button', async () => {
      await expect(element(by.id('login'))).toBeVisible();
      await element(by.id('login')).tap();
    });

    it('should select email', async () => {
      await expect(element(by.id('email'))).toBeVisible();
    });

  })

`

while executing last it i am getting this error. help me out this issue.

render function is 

render() {
return (
    <View style={styles.mainContainer} testID='email'>
        {this.renderTopLogoContainer()}
        {this.renderBottomContainer()}
        <View style={{ height: 30, justifyContent: 'center' }}>
                {this.state.useMobile ? <Text style={{ color: colors.SECONDARY_FONT_COLOR, alignSelf: 'center', fontSize: 13, }} onPress={() => { this.setState({ useMobile: false, wrongEntryMesaage: '', userName: "" }) }}>{I18n.t("Use email")}</Text> : <Text style={{ color: colors.SECONDARY_FONT_COLOR, alignSelf: 'center', fontSize: 13 }} onPress={() => { this.setState({ useMobile: true, wrongEntryMesaage: '', userName: "" }) }}>{I18n.t("Use mobile")}</Text>}
        </View>
        <Button
            rounded title={I18n.t("GET OTP")}
            buttonStyle={styles.button}
            disabled={
                this.state.useMobile ? (this.state.userName.length === 10) && (this.props.processingRequest) || !(this.state.userName.length === 10) && !(this.props.processingRequest)
                    : (this.state.userName.length > 0) && (this.props.processingRequest) || !(this.state.userName.length > 0) && !(this.props.processingRequest)}
            onPress={this.onGetOTPForUserNamePressedDebounced} 
        />

        {this.props.getOtpFailed ? Snackbar.show({
            title: this.props.error.display_message,
            duration: Snackbar.LENGTH_LONG
        }) : null}
    </View>
);

}

Solution

  • Check the view hierarchy for the testID

    So when trying to debug testIDs not showing you should check the view hierarchy it is easiest done in iOS. Instructions for doing it can be found here https://github.com/wix/Detox/blob/master/docs/Troubleshooting.RunningTests.md#debug-view-hierarchy

    Try a timeout

    If it is in the view hierarchy then Detox could be expecting the testID before it has actually is displayed. You could edit your last test so that it uses a waitFor with a timeout.

    https://github.com/wix/Detox/blob/master/docs/Troubleshooting.RunningTests.md#test-tries-to-find-my-component-before-its-created

    Something like this may work. Though you may need to adjust the time of the timeout await waitFor(element(by.text('email'))).toBeVisible().withTimeout(2000);

    Watch your test

    You should also watch your test and make sure that it is performing as is expected. Is it navigating from screen to screen? Can you see the buttons being tapped?

    Perhaps even though it is clicking the button the navigation isn’t occurring.