React-Native-APP-With-Testing

这两天,我尝试了一下在开发react-native app的过程中如何去组建一套比较容易理解和使用的测试框架进行UT和component UT,这里做一下整理。
PS:最终代码在reading项目中, 欢迎关注

为何要尝试UT

其实我接触UT部分,也就是这两天。如今很多人都知道TDD的开发模式,由测试来驱动开发,优秀的代码是离不开优秀的测试的。在产品快速迭代的过程中,我们很容易忽略测试这一重要的环节,目前公司里我负责的app正好就处在这个状态。很多问题是测试很难测出来的,尤其在资源紧张的情况下,我认为,需要研发工程师使用UT来尽可能保证质量,并且在已有的功能重构和回归方面,通过各种工具手段来减少测试资源的占用。

注:本文只谈react-native app的测试。在对蜂鸟众包app中react-native部分添加UT之前,我使用了reading项目先进行一些了解和踩坑。

Jest

我对js方面的测试框架不太了解,对react-native相关的就更不了解了。Jest这个框架是我看到react-native源码中有使用,所以按照react-native源码中的配置,我进行了尝试。具体细节在reading的try jest这次提交中,整个配置我也是各种尝试,因为引用react-native作为框架开发的项目毕竟和依赖react-native源码中测试的配置部分有不少不同的地方,经过各种尝试,我按照fb的方式跑起来了一个测试用例,感觉对我来说有点晦涩……Jest我看了下是个挺全面的框架,包括断言、mock等部分,而且在做component UT的时候,我感觉有些麻烦,用到了好多react-dom的东西。也许是博大精深我不太会用,之前也没有怎么了解过这个,就想寻求一种相对更简单交互更好的方式。

Mocha & Enzyme & Chai

Mocha是我之前有稍微看过一下下的(其实就是看过官方主页),感觉很简洁,很方便的样子。Chai是一个很简洁的断言库,可以和Mocha结合做非UI代码的UT。关于react-native component UI部分的UT,我发现用Enzyme的很多,这是airbnb开源出来的一个react的js测试库,可以结合Mocha,同时可以结合react-native一起用,看起来也挺简洁的,所以我就想把这三个结合到一起用。下面就详细讲一下这种方式吧,以reading项目为例。

这里我在写测试代码的时候,为了和项目代码保持一致,统一采用ES6.

首先需要安装以下依赖

1
npm i babel-core babel-preset-es2015 babel-preset-react-native chai enzyme mocha react-addons-test-utils react-dom react-native-mock --save-dev

添加.babelrc文件

1
2
3
{
"presets": ["es2015", "react-native"]
}

配置测试脚本

1
2
3
4
"scripts": {
...
"test": "mocha --require react-native-mock/mock.js --compilers js:babel-core/register --recursive your_app/**/*/*.spec.js"
},

这种配置路径your_app/**/*/*.spec.js"是表示在app目录下的两层目录下后缀为.spec.js的均为测试代码,这是根据我reading的路径来走的,你可以根据你自己项目的具体路径来配置。

编写第一个测试代码

这里我第一个写的非常简单的测试用例是给reading中Button组件写的,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
'use strict';
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {shallow} from 'enzyme';
import {expect} from 'chai';
import Button from '../Button';
describe('<Button />', () => {
it('it should render 1 Text component', () => {
const wrapper = shallow(<Button />);
expect(wrapper.find(Text)).to.have.length(1);
});
});

这里例子非常简单了,其实就是检测一下Button这个组件中是否渲染了一个Text组件。然后执行脚本:

1
npm test

你就会看到非常人性化的输出了:

1
2
3
4
5
6
7
8
9
10
11
12
13
~/workspace/reading master ✔ 23h37m
▶ npm test
> reading@0.1.5-rc test /Users/richardcao/workspace/reading
> mocha --require react-native-mock/mock.js --compilers js:babel-core/register --recursive app/**/*/*.spec.js
<Button />
✓ it should render 1 Text component
1 passing (393ms)

到这里,本文就结束了。关于TDD和自动化测试这部分,我基本了解的也不多,所以本文也只是针对入门级想尝试对react-native做UI的同学参考。

后续

首先,我是一个连测试用例都不会写的菜鸡,但是我一直觉得开发写UT是挺有必要的,也是结合我目前遇到的情况总结出来的,慢慢的我会学一些自动化测试相关的内容,从reading开始,尽量慢慢向TDD模式转化,也会在公司内部用起来。抛砖引玉,有什么好想法的同学,欢迎交流。

本文相关详细代码请看reading项目

RichardCao wechat
欢迎关注我的个人微信公众号,不定期推送精彩内容~
坚持原创技术分享,您的支持将鼓励我继续创作!