排毒,过渡中的按钮匹配了多个元素

Detox, multiple elements were matched for button in transition

我正在使用 detox e2e 为我的 react-native 应用程序创建测试用例。长话短说,我在组件的渲染函数中有一个按钮,该按钮从左向右过渡。我已经为该按钮提供了一个唯一的测试 ID。在我的测试用例中,我希望该按钮使用其测试 ID 出现。但是当我 运行 "detox test" 时,测试失败并且错误提示多个元素与该测试 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" 的按钮可见。如果我从我的组件的渲染函数中删除转换标签,那么测试 运行s 成功并通过。显然按钮的转换存在一些问题。我读过 detox 的空闲状态同步处理动画问题。我不知道我错过了什么:/.

所以,显然这个特殊问题是由 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) 即可解决问题。