内容简介: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 是满分~~)
![React Native 持续部署:Travis CI + Fastlane + Appium + Jest](https://img2.tuicool.com/fYbem2N.jpg!web)
并且我们还配置自动部署,当我们使用 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 中的渐进式交付:蓝绿部署和金丝雀部署
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。