React Native单元测试--基础知识

什么是单元测试

单元测试(unit testing)是指对软件中的最小可测试单元进行检查和验证

简单来说,单元就是人为规定的最小的被测功能模块。单元测试是在软件开发过程中要进行的最低级别的测试活动,软件的独立单元将在与程序的其他部分相隔离的情况下进行测试。

测试框架

测试框架的作用是提供一些方便的语法来描述测试用例,以及对用例进行分组。

断言(assertions)

断言是单元测试框架中核心的部分,断言失败会导致测试不通过,或报告错误信息。

对于常见的断言,举一些例子如下:

  • 同等性断言 Equality Asserts
    • expect(sth).toEqual(value)
    • expect(sth).not.toEqual(value)
  • 比较性断言 Comparison Asserts
    • expect(sth).toBeGreaterThan(number)
    • expect(sth).toBeLessThanOrEqual(number)
  • 类型性断言 Type Asserts
    • expect(sth).toBeInstanceOf(Class)
  • 条件性测试 Condition Test
    • expect(sth).toBeTruthy()
    • expect(sth).toBeFalsy()
    • expect(sth).toBeDefined()

断言库

断言库主要提供上述断言的语义化方法,用于对参与测试的值做各种各样的判断。这些语义化方法会返回测试的结果,要么成功、要么失败。常见的断言库有 Should.js, Chai.js 等。

测试用例 test case

为某个特殊目标而编制的一组测试输入、执行条件以及预期结果,以便测试某个程序路径或核实是否满足某个特定需求。

一般的形式为:

it('should ...', function() {
        ...
        
    expect(sth).toEqual(sth);
});

测试套件 test suite

通常把一组相关的测试称为一个测试套件

一般的形式为:

describe('test ...', function() {
    
    it('should ...', function() { ... });
    
    it('should ...', function() { ... });
    
    ...
    
});

spy

正如 spy字面的意思一样,我们用这种“间谍”来“监视”函数的调用情况

通过对监视的函数进行包装,可以通过它清楚的知道该函数被调用过几次、传入什么参数、返回什么结果,甚至是抛出的异常情况。

var spy = sinon.spy(MyComp.prototype, 'componentDidMount');

...

expect(spy.callCount).toEqual(1);

stub

有时候会使用stub来嵌入或者直接替换掉一些代码,来达到隔离的目的

一个stub可以使用最少的依赖方法来模拟该单元测试。比如一个方法可能依赖另一个方法的执行,而后者对我们来说是透明的。好的做法是使用stub 对它进行隔离替换。这样就实现了更准确的单元测试。

var myObj = {
    prop: function() {
        return 'foo';
    }
};

sinon.stub(myObj, 'prop').callsFake(function() {
    return 'bar';
});

myObj.prop(); // 'bar'

mock

mock一般指在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法

广义的讲,以上的 spy 和 stub 等,以及一些对模块的模拟,对 ajax 返回值的模拟、对 timer 的模拟,都叫做 mock 。

测试覆盖率(code coverage)

用于统计测试用例对代码的测试情况,生成相应的报表,比如 istanbul是常见的测试覆盖率统计工具

TDD

全称:Test Driven Development(测试驱动开发)

测试驱动开发是敏捷开发中的一项核心实践和技术,也是一种设计方法论。TDD的原理是在开发功能代码之前,先编写单元测试用例代码,测试代码确定需要编写什么产品代码。TDD的基本思路就是通过测试来推动整个开发的进行,但测试驱动开发并不只是单纯的测试工作,而是把需求分析,设计,质量控制量化的过程。TDD首先考虑使用需求(对象、功能、过程、接口等),主要是编写测试用例框架对功能的过程和接口进行设计,而测试框架可以持续进行验证。

TDD风格的测试提供了suite(), test(), suiteSetup(),suiteTeardown(), setup(), 和teardown()这几个函数

BDD

全称:Behaviour Driven Development(行为驱动开发)

BDD中有两个大的概念:测试先行和系统设计。

行为驱动开发是一种敏捷软件开发的技术,它鼓励软件项目中的开发者、QA和非技术人员或商业参与者之间的协作。主要是从用户的需求出发,强调系统行为。BDD最初是由Dan North在2003年命名,它包括验收测试和客户测试驱动等的极限编程的实践,作为对测试驱动开发的回应。

总之:在项目之初,由客户、开发人员、测试人员一起通过充分的沟通对系统的行为进行设计,由测试人员以接近自然语言的方式编写可以描述系统行为的测试用例,然后由开发人员编写相关的实现代码,并确保该测试用例通过。循环这个过程实现整个系统的功能。

BDD测试提供了describe()context()it()specify()before()after()beforeEach()afterEach()这几种函数。

context()describe()的别名,二者的用法是一样的。最大的作用就是让测试的可读性更好,组织的更好。相似地,specify()是it()的别名。

Mocha

Mocha是在node.js和浏览器上运行的功能丰富的JavaScript测试框架,使异步测试变得简单而有趣。摩卡测试串行运行,允许灵活准确的报告,同时将未捕获的异常映射到正确的测试用例。

mocha默认会执行test目录下的所有测试,不要去改变默认目录。

2012发布重大版本

Jasmine

Jasmine是JavaScript的行为驱动开发测试框架。它不依赖于浏览器,DOM或任何JavaScript框架。因此它适用于网站,Node.js项目或JavaScript可运行的任何地方。

配置方法

Enzyme

Enzyme是React的JavaScript测试工具,可以更容易地断言,操纵和遍历React Components的输出。

Enzyme的API和jQuery操作DOM一样灵活易用。(因为其使用的是cheerio库来解析虚拟DOM,而cheerio的目标则是做服务器端的jQuery)

Enzyme兼容大多数断言库和测试框架,如chaimochajasmine等。

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';

import MyComponent from './MyComponent';
import Foo from './Foo';

describe('<MyComponent />', () => {
  it('renders three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.length(3);
  });

  it('renders an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.length(1);
  });

  it('renders children when passed in', () => {
    const wrapper = shallow((
      <MyComponent>
        <div className="unique" />
      </MyComponent>
    ));
    expect(wrapper.contains(<div className="unique" />)).to.equal(true);
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = shallow(<Foo onButtonClick={onButtonClick} />);
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });
});

Jest

Jest 是 FaceBook 用来测试 JavaScript 应用的一套测试框架,这些应用当然也包括了 React 应用。它的优点之一是自带了对 React 的支持,同时也很容易支持其它框架。

对比

优缺点

优点 缺点
Mocha 开源<br />用于浏览器和服务器测试<br />可以自定义断言库<br />易于安装<br />允许任何能够抛出失败异常测试库的使用<br />部分CI服务器和其它插件的支持 <br />功能上更多是面向BDD或者行为面向TDD<br />高扩展性<br />轻而易举的进行异步测试 不能用于React Native测试
Jasmine 开源<br />简单<br />BDD测试框架<br />也可以用于tdd<br />易于安装 不能用于React Native测试
Enzyme 开源<br />Enzyme库可以更容易地断言,操纵和遍历React Components的输出 只能结合其他测试框架用
Jest 开源 <br />可以测试React Native应用程序<br />并行测试运行<br />快速<br />开箱即用的代码覆盖率<br />测试用例并行执行,更高效<br />强大的 Mock 功能<br />集成 JSDOM,可以直接进行 DOM 相关的测试<br />更易用简单,几乎不需要额外配置<br />有快照测试功能,可对 React 等框架进行 UI 测试 React组件测试不细腻<br />集成度高,不太灵活

社区影响

image

搜索热度

image

那些公司在用

image

更多对比可以移步:Mocha vs. Jasmine vs. Jest

React Native单元测试现有方案

目前能够测试React Native组件的只有Jest框架,所以市场上的现有方案都是Jest或者和其他测试框架组合框架,如下:

  1. Jest
  2. Jest + Mocha
  3. Jest + Jasmine
  4. Jest + Enzyme
  5. Jest+Enzyme+storybook
优点 缺点
Jest 测试用例并行执行,更高效<br />强大的 Mock 功能<br />内置的代码覆盖率检查,不需要在引入额外的工具<br />集成 JSDOM,可以直接进行 DOM 相关的测试<br />更易用简单,几乎不需要额外配置<br />可以直接对 ES Module Import 的代码测试<br />有快照测试功能,可对 React 等框架进行 UI 测试
Jest + Mocha 添加了Mocha的断言库可自定义。
Jest + Jasmine 添加了Jasmine的spy功能,还有就是更方便的操作dom
Jest + Enzyme 除了拥有Jest特点,同时具有Enzyme库可以更容易地断言,操纵和遍历React Components的输出

测试原理

javascript的单元测试有:Karma + JasmineMocha + shouldJestEnzyme

Karma 主要用于angular测试

javaScript

iOS

Android

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267

推荐阅读更多精彩内容