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兼容大多数断言库和测试框架，如chai、mocha、jasmine等。

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('', () => {
  it('renders three  components', () => {
    const wrapper = shallow();
    expect(wrapper.find(Foo)).to.have.length(3);
  });

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

  it('renders children when passed in', () => {
    const wrapper = shallow((
      
        

      
    ));
    expect(wrapper.contains(
)).to.equal(true);
  });

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

Jest

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

对比

优缺点

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

社区影响

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

测试原理

javascript的单元测试有：Karma + Jasmine、Mocha + should、Jest、Enzyme。

Karma 主要用于angular测试

• TDD和BDD
• React Native项目源码
• 单元测试准则

javaScript

• Jest
• 用于React Native应用的不同的自动化测试框架
• Mocha中文文档
• 对 React 组件进行单元测试
• 进入Jasmine的世界——超强Javascript测试框架
• jasmine官方api参考
• Mocha中文文档
• 使用jest+enzyme进行react项目测试 - 测试手法篇
• 前端测试框架Jest系列教程
  • 前端测试框架Jest系列教程 -- Matchers（匹配器）
  • 前端测试框架Jest系列教程 -- Asynchronous(测试异步代码)
  • 前端测试框架Jest系列教程 -- Mock Functions（模拟器）
  • 前端测试框架Jest系列教程 -- Global Functions（全局函数）
• enzyme简介——Airbnb的React测试框架
• 基于 Jest + Enzyme 的 React 单元测试

iOS

• XCTest 苹果官方的单元测试库
• Quick
• Nimble
• iOS 单元测试
• iOS自动化测试的那些干货

Android

• JUnit4
• AndroidJUnitRunner Android官方单元测试库
• EspressoUI测试