排毒，多个元素匹配过渡按钮 [英] Detox, multiple elements were matched for button in transition

问题描述

我正在使用detox e2e为我的react-native应用程序创建测试用例。简而言之，我在组件的渲染功能中有一个按钮，该按钮从左向右过渡。我给了那个按钮一个唯一的测试ID。在我的测试用例中，我希望该按钮能够使用其测试ID出现。但是当我运行排毒测试时，测试失败并且错误表明多个元素与该测试ID匹配。

I am using detox e2e for creating test cases for my react-native application. Long story short, I have a button inside of my component's render function and that button transitions from left to right. I have given a unique test id to that button. Inside my test case i'm expecting that button to appear using its test id. But when I run "detox test", the test fails and error says that the multiple elements were matched against that test id.

我的测试文件的代码是：

Code for my test file is :

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() 
    }) 
})

我在渲染函数中的按钮代码是：

and code for my button inside render function is:

<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>

在我的测试用例中，我期待带有testidWelcomeScreenCreateWalletButton的按钮可见。如果我从组件的render函数中删除转换标记，则测试成功运行并通过。显然，按钮的转换存在一些问题。我已经读过detox的空闲状态同步处理动画问题。我不知道我错过了什么：/。

Inside my test case I'm expecting button with testid "WelcomeScreenCreateWalletButton" to be visible. If I remove transition tags from the render function of my component, then the test runs successfully and passes. So apparently there's some problem with the transition of the button. I've read that detox's idle state synchronization handles the animation problems. I don't know what I am missing :/.

推荐答案

所以，显然这个特殊问题是由react-native-引入的流体导航，通过复制项目进行转换。我正在使用它来从左到右转换按钮。简单的解决方案是使用第二个项目并对其执行操作。有效的代码如下：

So, apparently this particular issue was introduced by react-native-fluid-navigation which make transitions by duplicating items. I was using it for the transition of buttons from left to right. The simple solution was to use the second item and perform actions on it. The code that works is as follow:

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）解决了问题。

这篇关于排毒，多个元素匹配过渡按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！