javascript - 排毒，过渡中的按钮匹配了多个元素

Question

我正在使用 detox e2e 为我的 react-native 应用程序创建测试用例。长话短说，我在组件的渲染函数中有一个按钮，该按钮从左向右过渡。我已经为该按钮提供了一个唯一的测试 ID。在我的测试用例中，我希望该按钮使用其测试 ID 出现。但是当我运行“排毒测试”时，测试失败并且错误提示多个元素与该测试 ID 匹配。

我的测试文件代码是:

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”的按钮可见。如果我从组件的渲染函数中删除转换标签，那么测试会成功运行并通过。显然按钮的转换存在一些问题。我读过 detox 的空闲状态同步处理动画问题。我不知道我错过了什么:/。

Answer 1

因此，显然这个特定问题是由 react-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) 即可解决问题。