React Native 持续部署：Travis CI + Fastlane + Appium + Jest

内容简介：React Native 持续部署：Travis CI + Fastlane + Appium + Jest

最近我们正在使用 React Native 来重写 Growth 应用，GitHub 地址： growth-ng 。作为一个『咨询师』，我要再一次地切换技术栈，从混合应用开发转向 React Native。

重写 Growth 项目，由于业务内容繁多，也因此变成了一个庞大的工程。为了减少开发的时候，不断也开现一些错误，因此花了一段时间来探索：APP 端的持续部署。因此在这一篇文章里， 我们将介绍基于下面的几个框架来搭建持续集成：

• React Native 与持续集成服务器 Travis CI 的使用
• 单元测试 Jest 及 UI 测试框架 React Test Render
• 自动化功能测试 Appium
• 使用 fastlane 来实现持续部署

那么，先让我们从持续集成服务器 Travis CI 讲起。

持续集成：Travis CI

我在 GitHub 上创建开源项目的时候，都喜欢用 Travis CI 来作为持续集成服务器。毕竟它是免费的，而且配置简单的——我们只需要创建一个 .travis.yml 文件，随后再按照规则一个个的填入内容。

在新的 Growth 里，我们配置 Travis CI 来做下面的一些事情：

配置基础环境

在 Travis CI 上改用了 Node.js 的包管理工具 npm 为 yarn，并使用了缓存的机制来加速构建。实践上证明，快了十几秒：

cache: yarn
install:
- yarn install

在正常的持续集成作业中，只会进行 eslint 和单元测试。

script:
- npm run lint
- npm test

单元测试目前是由三个主要的框架构成的：

• jest。Facebook 推出的单元测试框架，带有 mock 功能
• react-test-render。用来保存上一次的 UI 的 snapshot
• enzyme。由 Airbnb 推出的单元测试工具，主要用来测试一些行为

运行完测试后，会向 Coveralls 提交测试覆盖率，还会获得一份 Code Climate 的『代码质量分析』分数（4.0 是满分~~）

并且我们还配置自动部署，当我们使用 git 命令来打 Tag 时。就会触发 before_deploy 及 deploy 命令。

• 在 before_deploy 的时候，将会安装 Android 的打包环境，并执行打包操作、
• 在 deploy 的时候，则会执行上传 apk 包到 GitHub Release 页面。

如下图所示：

详细的配置可以见： Growth NG travis CI 配置

在这个过程中，有几个坑值得说一下：

• 使用 openJDK 会出错，只能使用 oraclejdk8
• 配置 Android 环境的时候，会遇到 LICENSE 没有输入 Y 的问题，可以见 before_deploy 字段

单元测试：Jest + Enzyme

对于测试来说，尽管框架上发生了一些变化，但是它仍然离开不了 equal、mock、stub 这些基本的用法。

如下是一个 Jest 测试的示例：

it('should open market in browser', () => {
    const spy = jest.spyOn(Helper, 'openLink');
    SkillDetailView.openPage('https://www.phodal.com/');
    expect(spy).toBeCalledWith('https://www.phodal.com/');
  });

唯一比较麻烦的是，当我们要测试原生的组件，需要在 jest.setup.js 中 mock 这些方法，如下是用来 mock 包 react-native-device-info 中的 getVersion 方法：

jest.mock('react-native-device-info', () => ({
  getVersion: jest.fn(),
}));

而 React Test Render 的用法就稍微简单一些，主要用来测试一些组件的渲染结果：

it('renders correctly', () => {
    const tree = renderer.create(
      <growth></growth>,
    );

    const treeJson = tree.toJSON();
    expect(treeJson).toMatchSnapshot();
  });

而对于 Componet 中带有 onPress 等的方法，就需要配置 enzyme 来使用：

it('test click book', () => {
    const spy = jest.spyOn(SkillDetailView, 'openPage');
    const wrapper = shallow(<skilldetailview skillid="{2}"></skilldetailview>);
    wrapper.find({ title: 'CSS禅意花园' }).props().onPress();
    expect(spy).toHaveBeenCalled();
  });

使用 enzyme，模拟用户的操作，并做一些断言。

总的来说，React Native 有一些测试还是不容易写的。并且诸如 WebView 这样的组件，在测试的时候会报错~~。

把测试覆盖率提上去之后，便开始寻找合适的功能测试框架

React Native 功能测试：Appium

最初我考虑的是 Calabash，但是集成的时候，发现资料比较少。于是，便询问我司高级老司机 《移动App测试的22条军规》 的作者黄勇及另外一个资深 QA 梁真的意见，分别收到到了下面的一些框架：

跨平台：Appium

Android：selendroid iOS：FBSimulatorControl、XUITest

但是我看了看代码两个不同平台的代码：Swift、Java。嗯，我还是用 Appium 写 Python 、JavaScript 去吧~。Appium 的安装还是挺麻烦的：

brew install libimobiledevice --HEAD
brew install carthage
npm install -g appium ios-deploy wd
gem install xcpretty  # optional
appium

然后再创建一个 Python 的虚拟环境：

virtualenv venv
. venv/bin/activate
pip install -r requirements.txt

再写上一个简单的 Python 测试就可以了：

...

class AppiumTest(unittest.TestCase):
    def setUp(self):
        self.driver = webdriver.Remote(
            command_executor='http://127.0.0.1:4723/wd/hub',
            desired_capabilities={
              'app': os.path.abspath('./android/app/build/outputs/apk/app-release.apk'),
              'platformName': 'Android',
              'deviceName': 'Nexus 6P API 25',
        })

    def tearDown(self):
        self.driver.quit()


class TestRouter(AppiumTest):

    def test_goto_discover_page(self):
        link = self.driver.find_element_by_xpath('//*[@text="探索"]')
        link.click()
        time.sleep(3)
        self.driver.find_element_by_xpath('//*[@text="在线资源"]')

总的来说，测试上和 Selenium 还是蛮像的，我想： Appium = App + Selenium。

因为 Travis CI 的 Agent 的配置并不是那么理想，我便不在上面运行相应的测试了。

部署：Fastlane

最后，让我再介绍一下 Fastlane，用它来解决 APP 发版的最后一公里问题。

> Fastlane是一组 工具 套件，旨在实现iOS应用发布流程的自动化，并且提供一个运行良好的持续部署流程，只需要运行一个简单的命令就可以触发这个流程。

它提供了一系列的脚本，来实现对一些工作的自动化，如：

• 上传 APK 包到 Google Play，
• 上传 iOS 应用到 iTunes Connect
• 上传截图、版本更新说明
• 等等的内容

只需要执行一下 brew cask install fastlane ，再：

• 到 项目的目录 执行下 fastlane init ，就可以对 Android 应用的自动化发布进行设置
• 到 项目的 ios 目录 执行下 fastlane init ，就会生成相应的 iOS 配置

fastlane 会生成相应的 Appfile 和 Fastfile ，并且它还可以支持第三方插件，如我们采用的蒲公英服务： fastlane-plugin-pgyer 。

小结

完成了这些步骤后，我们就可以专注的写代码了~~，欢迎来加入我们，编写新的 Growth 应用。

以上所述就是小编给大家介绍的《React Native 持续部署：Travis CI + Fastlane + Appium + Jest》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• linux 部署golang 项目(直接部署和基于nginx部署)
• 部署策略对比：蓝绿部署、金丝雀发布及其他
• 使用Docker容器化部署实践之Django应用部署(一）
• 【前端打包部署】谈一谈我在SPA项目打包=>部署的处理
• 「实战篇」开源项目docker化运维部署-后端java部署（七）
• Kubernetes 中的渐进式交付：蓝绿部署和金丝雀部署

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。