detox - 动画按钮阻止排毒

Question

这就是我对动画按钮的意思。我让它有一个 ID，但它无法被 Detox 以某种方式定位。

Detox eliminates flakiness by automatically synchronizing your tests with the app. A test cannot continue to the next line if the app is busy. The test will only resume when the app becomes idle. Detox monitors your app very closely in order to know when it's idle. It tracks several asynchronous operations and waits until they complete. This includes:

Keeping track of all network requests that are currently in-flight and waiting until they complete Keeping track of pending animations and waiting until they complete Keeping track of timers (like setTimeout) and waiting until they expire Keeping track of the React Native bridge which carries asynchronous messages Keeping track of asynchronous React Native layout and the shadow queue Keeping track of the JavaScript event loop which may contain pending asynchronous actions

很明显，有一条线说要跟踪挂起的动画，所以如果按钮像这样保持动画。那么它会一直等待吗？那么，通常如何妥善处理这个问题呢？

谢谢

Answer 1

来自排毒文档:

Endless looping animations

By default, Detox will wait until animations complete. If you have an endless looping animation, this may cause Detox to hang. In this case, consider turning off the animation synchronization or remove the endless loop in your E2E build with react-native-repackager.

https://github.com/wix/detox/blob/master/docs/Troubleshooting.Synchronization.md#endless-looping-animations

General remarks

Infinite animations (looped animations) can make detox wait forever. Please consider turning looped animations off for testing. It's also a good practice to speed up all animations for testing.

https://github.com/wix/detox/blob/master/docs/More.AndroidSupportStatus.md#general-remarks

排毒提供 disableSynchronization() - 因此您可以暂时禁用同步以解决动画问题
然后在动画消失后重新打开它。然而，这不适用于所有情况。例如，如果您使用 react-navigation并且按下按钮将新屏幕推送到导航堆栈，该按钮仍将在后台继续动画，阻止您计划在新屏幕上运行的任何进一步测试。

因此，理想情况下，您希望采用其他建议并为您的 E2E 测试禁用这些类型的动画。这里有 3 个可能的选项来实现这一点。

答:

排毒作者建议使用 react-native-repackager为了这。目前它只支持 RN 0.51，所以这可能并不适合所有人。使用前请检查支持的版本。

Currently supports only RN 0.51

乙:

设置 React Native 构建环境。根据环境配置变量，您可以在为 E2E 测试构建时禁用连续动画。

https://blog.carbonfive.com/2016/09/29/setting-up-react-native-build-environments-using-nativemodules/

电话:

我发现的最简单的方法是使用 react-native-config .这里还有一篇关于 Managing Configuration in React Native的好文章使用 react-native-config，以及另一个相关问题 how-to-tell-detox-is-running-tests .

安装软件包:

$ yarn add react-native-config

链接库:

$ react-native link react-native-config

为了测试这个解决方案，我创建了 2 个文件， .env.production和 .env.testing在根 React Native 应用程序目录中。然后我正在使用 IS_动画 根据构建环境切换动画的配置变量。您需要添加 ENVFILE=.env.testing和 ENVFILE=.env.production到您的排毒构建配置。

.env.production

ENV_TYPE=Production
IS_ANIMATE=1

.env.testing

ENV_TYPE=Testing
IS_ANIMATE=0

app.js

import Config from 'react-native-config'

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Alert,
  Animated,
  View,
  TouchableOpacity,
  Text
} from 'react-native'

class example extends Component {
  constructor(props) {
    super(props)

    this.state = {
      radius: new Animated.Value(1)
    }
  }

  componentDidMount() {
    // only enable animation for production
    if (Config.IS_ANIMATE == true) {
      this.cycleAnimation()
    }
  }

  cycleAnimation() {
    Animated.loop(
      Animated.sequence([
        Animated.timing(this.state.radius, {
          toValue: 2,
          duration: 500,
          delay: 1000
        }),
        Animated.timing(this.state.radius, {
          toValue: 1,
          duration: 500
        })
      ])
    ).start()
  }

  render() {
    return (
      <View testID='container' style={styles.container}>
        <Text>{Config.ENV_TYPE}</Text>
        <TouchableOpacity
          testID='button'
          onPress={() => Alert.alert("I was pressed")}
        >
          <Animated.View
            style={[
              styles.button,
              {transform: [
                {scale: this.state.radius},
              ]}
            ]}
          >
            <Text>START DIARY</Text>
          </Animated.View>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 60,
    width: 120,
    height: 120,
    backgroundColor: 'green'
  },
  text: {
    padding: 5,
    fontSize: 14
  }
})

AppRegistry.registerComponent('example', () => example)

示例.spec.js

it('Animated Button', async () => {
  const buttonElement = element(by.id('button'));
  await expect(buttonElement).toBeVisible();
  await buttonElement.tap();
});

package.json

"detox": {
  "specs": "e2e",
  "configurations": {
    "ios.sim.release": {
      "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/example.app",
      "build": "ENVFILE=.env.production export RCT_NO_LAUNCH_PACKAGER=true && xcodebuild -project ios/example.xcodeproj -scheme example -configuration Release -sdk iphonesimulator -derivedDataPath ios/build",
      "type": "ios.simulator",
      "name": "iPhone 5s, iOS 10.3"
    },
    "ios.sim.test": {
      "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/example.app",
      "build": "ENVFILE=.env.testing xcodebuild -project ios/example.xcodeproj -scheme example -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build -arch x86_64",
      "type": "ios.simulator",
      "name": "iPhone 5s, iOS 10.3"
    }
  }
}

发布版本将挂起: detox build --configuration ios.sim.release && detox test --configuration ios.sim.release


测试版本将通过: detox build --configuration ios.sim.test && detox test --configuration ios.sim.test