Question

使用detox确实有问题，我也不知道为什么。我知道这种问题以前已经发布过，但是他们似乎都没有真正回答我的问题。我将首先详细说明它，然后发布一些代码和配置。

说明

我想先尝试我的应用程序的登录功能。我有一个第一个屏幕，用户输入他的团队，然后按一个按钮进入另一个屏幕进行登录。我要求服务器检查团队是否存在。如果团队错了，他会收到一条错误消息。我想测试此错误消息是否显示。

运行以下测试时，显示红色错误消息，但测试以超时结束。此图显示了测试的停止位置。

代码

这是测试：

describe('Login', () => {
  it('should show error message after bad team', async () => {
    await element(by.id('selectTeam_teamInput')).typeText('failingTeam');
    await element(by.id('selectTeam_domainInput')).replaceText('mydomain.cloud');
    await element(by.id('selectTeam_nextButton')).tap();
    await expect(element(by.id('selectTeam_errorMessage'))).toExist();
    await expect(element(by.id('selectTeam_errorMessage'))).toBeVisible();
  });
});

这里是视图（goToLogin方法触发了将prop organisationInfosStatus更改为success或error的异步调用。当它是error时，我显示此错误消息）：

<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
  <View>
    {this.props.organisationInfosStatus === 'error' && (
      <View
        testID="selectTeam_errorMessage"
        style={{
          height: 24,
          marginBottom: 24,
          alignItems: 'center',
          justifyContent: 'center',
          borderWidth: 2,
          borderColor: 'white',
        }}
      >
        <Text style={{ color: theme.color.red.shade500, fontWeight: '500' }}>
          <Trad id="login.invalidTeam">Invalid team</Trad>
        </Text>
      </View>
    )}
    <View>
      <Text
        style={{
          marginHorizontal: 16,
          marginBottom: 24,
          fontSize: 18,
          lineHeight: 21,
          textAlign: 'center',
        }}
      >
        <Trad id="login.selectTeam">Please insert your team name</Trad>
      </Text>
      <View
        style={{
          paddingRight: 8,
          paddingLeft: 16,
          justifyContent: 'space-between',
          flexDirection: 'row',
          borderTopWidth: theme.border.width,
          borderBottomWidth: theme.border.width,
          borderColor: theme.color.grey.shade300,
        }}
      >
        <TextInput
          testID="selectTeam_teamInput"
          style={{ paddingVertical: 16, flex: 1 }}
          placeholder={TradSingleton.getTrad('login.organizationName')() || 'organization'}
          autoCapitalize="none"
          autoCorrect={false}
          onChangeText={teamName => this.setState({ teamName })}
          onSubmitEditing={this.goToLogin}
          returnKeyType="go"
          underlineColorAndroid="transparent"
          value={this.state.teamName}
        />
        <Text style={{ paddingVertical: 16 }}>.</Text>
        <View style={[{ flexDirection: 'row', justifyContent: 'space-between' }]}>
          <TextInput
            testID="selectTeam_domainInput"
            style={{
              paddingVertical: 16,
              marginRight: 8,
              minWidth: 50,
              maxWidth: 200,
            }}
            placeholder={TradSingleton.getTrad('login.domain')() || 'domain'}
            autoCapitalize="none"
            autoCorrect={false}
            onChangeText={domain => this.setState({ domain })}
            onSubmitEditing={this.goToLogin}
            returnKeyType="go"
            underlineColorAndroid="transparent"
            value={this.state.domain}
            keyboardType="email-address"
            ref="domainField"
          />
          <TouchableOpacity
            style={{
              backgroundColor: 'white',
              padding: 4,
              justifyContent: 'center',
              alignItems: 'center',
            }}
            onPress={() => {
              this.setState({ domain: '' });
              this.refs.domainField.focus();
            }}
            hitSlop={functions.hitSlop()}
          >
            <Icon
              icon={icon.get('close')}
              iconStyle={{ height: 12, width: 12, tintColor: theme.color.grey.shade500 }}
            />
          </TouchableOpacity>
        </View>
      </View>
      <Button
        onPress={this.goToLogin}
        testID="selectTeam_nextButton"
        containerStyle={[styleSheet.loginButton, { marginTop: 24 }]}
        disabled={this.state.loginButtonDisabled}
        textStyle={styleSheet.loginButtonText}
        tradId="utils.next"
      >
        Next
      </Button>
    </View>
  </View>
</TouchableWithoutFeedback>

这是我的init.js：

require('babel-polyfill');
const detox = require('detox');
const config = require('../package.json').detox;

before(async () => {
  await detox.init(config);
});

after(async () => {
  await detox.cleanup();
});

最后是我的mocha.opts：

--recursive
--timeout 20000
--bail
--file e2e/init.js

我正在使用react-native-router-flux，但这是不同版本的安装程序：

"react": "16.8.3",
"react-native": "^0.59.4",
"react-native-router-flux": "4.1.0-beta.5",
"react-navigation": "3.6.1",
"detox": "^12.1.3",

其他信息

在升级到0.59之前，我遇到的问题是0.57.1。如果是先前版本或路由器4.0.6，则存在同样的问题。我尝试了expect，waitFor和超时，同样的问题：/

我还与一个有效的团队尝试了相同的测试，以查看它是否基本上找到了下一个视图。超时以完全相同的方式结束。

如果需要更多信息，请告诉我：）

谢谢！

超过了XXXms的超时时间。对于异步测试和挂钩，请确保调用了“ done（）”

说明

代码

其他信息

0 个答案: