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

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>

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

Answer 1

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

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) решило проблему.