Детокс, несколько элементов были найдены для кнопки при переходе

Question

Я использую detox e2e для создания тестовых случаев для моего приложения на основе активных приложений.Короче говоря, у меня есть кнопка внутри функции рендеринга моего компонента, и эта кнопка перемещается слева направо.Я дал уникальный идентификатор теста для этой кнопки.В моем тестовом примере я ожидаю, что эта кнопка появится с использованием ее идентификатора теста.Но когда я запускаю «тест на детоксикацию», тест не проходит, и ошибка говорит о том, что несколько элементов были сопоставлены с этим идентификатором теста.

Код для моего тестового файла:

describe('Login flow', () => {
    // test case for wallet generation

    it('should generate new wallet', async () => {
        await expect(element(by.id('WelcomeScreen'))).toBeVisible()
        await expect(element(by.id('WelcomeScreenCreateWalletButton'))).toBeVisible() 
    }) 
})

, а код для моей кнопки внутри функции рендеринга:

<Transition appear="horizontal">
          <View style={styles.buttonContainer}>
            <Button
              text={I18n.t('create-wallet')}
              onPress={this.createWallet}
              style={[styles.button, styles.topButton]}
              testID="WelcomeScreenCreateWalletButton"
            />

            <Button
              text={I18n.t('restore-wallet')}
              transparent
              onPress={this.restoreWallet}
              style={styles.button}
              shared={'button'}
              testID="WelcomeScreenRestoreWalletButton"
            />
          </View>
        </Transition>

Внутри моего тестового я ожидаю кнопкус testid "WelcomeScreenCreateWalletButton", чтобы быть видимым.Если я удаляю теги перехода из функции рендеринга моего компонента, тогда тест успешно проходит и проходит.Так что, видимо, есть некоторые проблемы с переходом кнопки.Я читал, что синхронизация в состоянии бездействия детокса решает проблемы с анимацией.Я не знаю, что мне не хватает: /.

Answer 1

Итак, по-видимому, именно эта проблема возникла в результате реакции-нативной-флюид-навигации, которая выполняет переходы путем дублирования элементов.Я использовал его для перехода кнопок слева направо.Простым решением было использование второго элемента и выполнение действий с ним.Код, который работает следующим образом:

describe('Login flow', () => {
// test case for wallet generation

    it('should generate new wallet', async () => {
        await expect(element(by.id('WelcomeScreen'))).toBeVisible()
        await expect(element(by.id('WelcomeScreenCreateWalletButton')).atIndex(1)).toBeVisible() 
    }) 
})

Добавление всего atIndex (1) решило проблему.