动画按钮阻止排毒

这就是我所说的动画按钮。我让它有一个 ID，但 Detox 却无法以某种方式找到它。

Detox 通过自动将您的测试与应用程序同步来消除不稳定的情况。如果应用程序繁忙，测试无法继续到下一行。仅当应用程序空闲时测试才会恢复。 Detox 非常密切地监控您的应用程序，以便了解它何时处于空闲状态。它跟踪多个异步操作并等待它们完成。这包括：

跟踪当前正在进行的所有网络请求并等待它们完成跟踪待处理的动画并等待它们完成跟踪计时器（如 setTimeout）并等待它们到期 跟踪携带异步消息的 React Native 桥 跟踪异步 React Native 布局和影子队列 跟踪可能包含待处理异步操作的 JavaScript 事件循环

显然有一行说要跟踪待处理的动画，所以如果按钮保持这样的动画。那么它会一直等待吗？那么，通常如何正确处理这个问题呢？

Thanks

来自排毒文档：

无限循环动画

默认情况下，Detox 将等待动画完成。如果你有一个 无限循环动画，这可能会导致 Detox 挂起。在这种情况下， 考虑关闭动画同步或删除 使用react-native-repackager 在您的E2E 构建中进行无限循环。

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

一般说明

无限动画（循环动画）会让排毒永远等待。 请考虑关闭循环动画进行测试。这也是一个 加速所有动画测试的良好实践。

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

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

因此，理想情况下，您希望采纳其他建议并在 E2E 测试中禁用这些类型的动画。这里有 3 种可能的选择来实现这一目标。

A:

排毒作者建议使用反应本机重新包装器 https://github.com/wix/react-native-repackager为了这。目前它仅支持 RN 0.51，因此这可能并不适合所有人。使用前请检查支持的版本。

目前仅支持 RN 0.51

B:

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

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

C:

我发现最简单的方法是使用反应本机配置 https://github.com/luggit/react-native-config。这里还有一篇很好的文章在 React Native 中管理配置 https://medium.com/differential/managing-configuration-in-react-native-cd2dfb5e6f7b与react-native-config，以及另一个相关问题如何判断排毒正在运行测试 https://stackoverflow.com/questions/47686303/how-to-tell-detox-is-running-tests.

安装包：

$ 纱线添加反应本机配置

链接库：

$ 反应本机链接 反应本机配置

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

.env.生产

ENV_TYPE=Production
IS_ANIMATE=1

.env.测试

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

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