Detox: 高效进行 React Native E2E 测试

近年来，在跨平台移动应用程序开发的竞争中，React Native已经成为一种非常流行的技术，但是为React Native应用程序选择一个UI测试工具可能非常棘手。有两个很棒的UI测试框架用于React本地应用Appium和Detox。Appium被广泛用于UI测试，但是Detox是一个灰色的、快速的、易于学习的工具，用于React原生应用的UI测试。在本教程中，我们将为一个简单的、新的React原生应用程序设置一些Detox测试。

Detox: E2E 移动 UI 测试

如您所知，移动UI测试中的主要问题是速度慢和脆弱。像Appium这样的工具完全是黑盒，并使用客户端-服务器体系结构，这会在UI测试中造成不稳定。 Detox旨在解决移动UI测试的缓慢和脆弱的问题。 Detox的一些出色功能如下：

Detox 监视应用程序中的异步操作，以减少在应用程序UI中查找异步元素的麻烦。
Detox 是一个灰盒测试工具，因此它可以从您的移动应用程序访问代码和数据。它是一种进程内工具，并且不使用客户端-服务器体系结构来执行测试，因此它比Appium或其他第三方移动测试自动化框架要快得多。
Detox 易于连接到任何CI系统和流行的云测试服务。
Detox 很棒，可以快速反馈您的E2E测试，而无需连接到真实设备。
React Native 开发人员喜欢 Detox，因为它更快，可调试，并且可以与 Jest 或 Mocha 等任何测试运行程序一起使用。
Detox 当前对 iOS 真实设备测试的支持有限，但是如果您的应用程序没有硬件接口，那么您可以轻松地跳过该部分以补偿更快，更不稳定的UI测试。

Detox E2E 测试环境准备

为您现有的React Native应用程序设置Detox的过程将非常简单。如果您已经在运行React Native应用程序，则必须满足在模拟器中运行iOS和Android应用程序的基本要求。在本教程中，我们将专注于iOS，但是一旦您开始使用iOS，特定于Android的设置将相当容易。作为前提条件，您需要安装了Xcode的macOS。您还需要安装Node和Homebrew来下载运行React Native应用程序所需的软件包。回顾一下，您将需要以下内容：

macOS with Xcode
Homebrew
Node
React Native CLI and React Native App

作为本教程的一部分，我们将创建一个简单的新React Native应用程序HelloDetox，并使用Detox启用UI测试支持。

Create React Native App

React Native拥有丰富的文档，可用于基本应用程序的入门。通过安装来自macOS的一些依赖项，我们可以轻松创建示例应用程序。我们需要一个node和watchman包，才能开始使用React Native。您可以使用Homebrew轻松安装这些软件包。

$ brew install node
$ brew install watchman

安装节点后，您应该可以从终端上访问“ npm”命令。现在，您可以全局安装React Native并创建我们的第一个HelloDetox应用程序。

$ npm install -g react-native-cli
$ react-native init HelloDetox

此时，React Native将生成用于构建Android和iOS应用程序的样板代码。如果您打开了任何模拟器，则可以在Android模拟器或iOS模拟器中运行该应用程序。

让我们使用以下命令在iOS模拟器中运行该应用

$ cd HelloDetox
$ react-native run-ios

或者，您可以在后台启动Metro Bundler并从Xcode运行该应用程序。现在我们可以编辑app.js文件以在屏幕上显示内容。 React Native教程提供了很多示例。就本教程而言，我们通过添加以下代码来构建一些按钮。使用CMD + R热加载应用程序时，您将在模拟器中看到该应用程序。该应用程序有一个欢迎文本，带有几个链接到另一个屏幕的按钮。现在我们有一个基本的React Native应用程序可以进行UI测试了。

配置 Detox

由于Detox是一个灰盒UI测试框架，因此我们必须在主应用程序存储库中添加Detox代码。 Appium等工具可让测试开发人员为测试代码创建单独的存储库，这些存储库并不总是适合CI / CD管道。为了启用对Detox的支持，我们必须使用以下命令安装applesimutils库和Detox命令行工具。

$ brew tap wix/brew
$ brew install applesimutils
$ npm install -g detox-cli

Detox带有出色的CLI工具，可用于从命令行或CI服务器设置和执行UI测试。

React Natives项目有一个package.json文件，因此我们可以使用以下命令将Detox库添加到我们的项目中。

npm install detox --save-dev

此命令将需要一段时间才能将Detox添加到HelloDetox应用程序。将Detox添加到package.json文件后，我们需要配置HelloDetox应用程序以使用Detox UI测试框架。

"detox": {
  "configurations": {
    "ios.sim.debug": {
      "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/HelloDetox.app",
      "build": "xcodebuild -project ios/HelloDetox.xcodeproj -scheme HelloDetox -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
      "type": "ios.simulator",
      "name": "iPhone Xʀ"
    }
  }
}

前面提到的选项特定于通常在ios / build目录中生成的iOS构建工件。参数“ build”是从命令行执行“detox build”时运行的实际命令。这是来自Apple本地开发人员工具的xcodebuild命令，某些iOS项目使用工作区，因此您可能需要相应地调整命令。最后，您必须指定执行测试所需的模拟器。

初始配置就是这样，以在React Native应用程序中启用Detox UI测试。

在 React Native App 中新增 Detox 测试

Detox可以与JavaScript中的任何测试运行器一起使用。 Detox正式支持Jest和Mocha，但Detox并没有紧密地联系在一起。由于Jest是React Native的推荐测试运行程序，因此我们将使用Jest在我们的React Native应用程序中设置Detox测试。排毒具有一种命令行方式来生成脚手架代码。从项目的根目录运行以下命令。

$ detox init -r jest

此命令将使用示例测试代码创建一个“ e2e”目录。

此时，您可以根据我们应用程序的要求修改测试。请记住，为了启用React Native应用程序的可测试性，您需要为应用程序中的每个UI元素添加测试ID。您可以参考app.js文件，在该文件中我们获得了需要与之交互的UI元素的测试ID。

编写您的第一个 Detox Test 以进行 UI 测试

现在我们已经有了编写第一个Detox测试的脚手架代码，使用有意义的名称（例如helloDetox.spec.jest）重命名e2e / firstTest.spec.jest文件，并编写第一个测试以验证按钮单击是否有效并导航到正确的屏幕。您还可以验证屏幕上是否存在欢迎文本。

Detox官方文档在这里为您准备首次Detox测试提供了很好的指南。总而言之，我们必须记住以下几点。

根据所选的测试运行器为场景准备单独的JavaScript文件。
确保您已添加测试ID以启用React Native应用程序的可测试性。
在屏幕上标识唯一的UI元素，并断言该元素存在于屏幕上。
如果需要，请在场景之间重置应用程序。

您可以在此处阅读完整的准备指南。在我们的情况下，我们必须添加以下代码以验证我们的要求。

describe('HelloDetoxTest', () => {
  beforeEach(async () => {
     await device.reloadReactNative();
   });
  it('should have welcome screen', async () => {
    await expect(element(by.id('welcome'))).toBeVisible();
  });
  it('should show hello Rect after tap', async () => {
    await element(by.id('hello_react')).tap();
    await expect(element(by.text('React!!!'))).toBeVisible();
   });
  it('should show Detox screen after tap', async () => {
    await element(by.id('detox_button')).tap();
    await expect(element(by.text('Detox!!!'))).toBeVisible();
   });
});

此测试验证点击Hello React按钮将导航至“ React !!!”。屏幕并点击“ Hello Detox”将导航至“ Detox !!!” 屏幕。

在这个阶段，我们启动了第一个Detox程序并开始运行。为了执行排毒测试，我们必须首先使用以下命令构建一个应用程序

$ detox test

此命令将执行e2e目录中的所有测试，如果所有测试通过，您将看到格式正确的测试输出。

Detox 的优缺点

Detox 优点

与其他任何第三方UI测试自动化相比，Detox都是高度可调试的。
Detox可以轻松集成到任何React Native应用中。最初的成本和工作量远少于其他任何工具。
Detox与Appium或任何其他第三方工具同步时，其速度要比Appium或其他任何第三方工具快。
Detox易于学习，并且具有出色的API文档来编写和扩展我们的测试套件。
社区发展迅速。

Detox 缺点

对Android的支持不是很好，但是正在改善
没有针对iOS的真实测试
不支持Web视图和混合应用程序。
缺少一些有用的方法，例如使文本脱离元素或查找坐标。
测试报告和屏幕截图功能不是很好。

源码

本教程的完整源代码可以在Github的HelloDetox存储库中找到。您可以克隆存储库并使用以下命令尝试执行Detox测试。

$ git clone https://github.com/Shashikant86/HelloDetox
$ cd HelloDetox 
$ detox build
$ detox test

结语

本篇文章翻译自bitbar.com/blog/detox-…。谷歌是最好的老师，找了好了多有关于RN自动话测试，怎么着都觉得差点意思。这篇文章是我找到觉得比较不错的教程，分享给大家。