单元测试与单元测试框架 Jest

什么是单元测试？

测试是一种验证我们的代码是否可以按预期工作的手段。

被测试的对象可以是我们程序的任何一个组成部分。大到一个分为多步骤的下单流程，小到代码中的一个函数。

单元测试特指被测试对象为程序中最小组成单元的测试。这里的最小组成单元可以是一个函数、一个类等等。

单元测试的优势

由于被测试对象的简单（通常只有一个或多个输入以及一个输出），这就决定了单元测试开发起来也很简单，通常每个测试只有几行到十几行不等。测试代码的简单表示它可以被更频繁的执行（事实上，很多单元测试框架都有 watch 模式。每次改动代码时都会自动执行单元测试）。更频繁的执行意味着更早的发现问题。

试想，随着代码的不断迭代，程序中总有某些位置会频繁出现某类问题。在没有单元测试时程序员之间往往都是“口口相传”，隔一段时间很可能由于疏忽还会犯同一个错误。有了单元测试我们就可以为这些问题点编写对应的测试代码，每次提交代码前都执行一遍，可以极大的降低相同 bug 重复出现的概率。

此外，要为一个被测试对象编写单元测试，那么它应该首先是容易被测试的（这似乎是一句废话）。反过来讲，如果你面对一个函数、类却很难编写测试代码的时候，很可能是你的代码设计上存在问题。比如和外部依赖耦合过于紧密。这种情况下，编写单元测试的过程会倒逼我们优化我们代码的结构。将复杂的代码拆解成为更简单、更容易测试的片段。这个过程本身也会潜移默化的提高我们代码的质量。

单元测试的限制/不足

I get paid for code that works, not for tests - Kent Beck

首先，测试代码再简单，也是需要工作量来开发的。必定占用开发人员的时间。因此需要开发人员在投入与收益之间找到一个最佳的平衡点。

其次，单元测试覆盖率往往会给开发人员一种错觉：这段代码的单元测试都通过了（测试覆盖率以及 100% 了），肯定没有 bug。其实不然，单元测试覆盖率与代码质量没有必然的联系。作为开发人员必须尽早认识到这一点。

何时编写单元测试？

  • 开发过程中，单元测试应该来测试那些可能会出错的地方，或是那些边界情况。
  • 维护过程中，单元测试应该围绕着 bug 进行，每个 bug 都应该编写响应的单元测试。从而保证同一个 bug 不会出现第二次。

单元测试中的基本概念？

单元测试一般包含以下几个部分：

  • 被测试的对象是什么
  • 要测试该对象的什么功能
  • 实际得到的结果
  • 期望的结果
  • mock / spy （下文会详述）

具体到某个单元测试，往往包含以下几个步骤：

  • 准备阶段：构造参数，创建 spy 等
  • 执行阶段：用构造好的参数执行被测试代码
  • 断言阶段：用实际得到的结果与期望的结果比较，以判断该测试是否正常
  • 清理阶段：清理准备阶段对外部环境的影响，移除在准备阶段创建的 spy 等

Jest 简介

Jest是 Facebook 开发的一款 JavaScript 测试框架。在 Facebook 内部广泛用来测试各种 JavaScript 代码。其官网上主要列出了以下几个特点：

  • 轻松上手
    • 使用 create-react-app或是 react-native init创建的项目已经默认集成了 Jest
    • 现有项目，只需创建一个名为 __test__ 的目录，然后在该目录中创建以 .spec.js 或 .test.js 结尾的文件即可
  • 内置强大的断言与 mock 功能
  • 内置测试覆盖率统计功能
  • 内置 Snapshot 机制

虽然 Jest 官网介绍中多次 React，但实际上 Jest 并不是和 React 绑定的。你可以使用它测试任何 JavaScript 项目。

Jest 基础功能介绍

安装:

npm install --save-dev jest

然后配置 package.json ：

"scripts": {
  "test": "jest --color"
}

接着创建一个名为 __tests__ 的目录。jest 会自动去该目录下寻找要执行的测试代码。

接下来让我们编写一个最简单测试。

describe('Addition', () => {
  it('knows that 2 and 2 make 4', () => {
    const val1 = 2;
    const val2 = 2;
    const result = val1 + val2;
    const expectedResult = 4;
    expect(result).toBe(expectedResult);
  });
});

接下来让我们看看这个单元测试是否满足了我们前文提到的元素与步骤。

元素：

  • 被测试的对象是什么: + 运算符
  • 要测试该对象的什么功能： 2 + 2 = 4
  • 实际得到的结果：result
  • 期望的结果: expectedResult

步骤：

  • 准备阶段：line3, line4
  • 执行阶段：line5
  • 断言阶段：line7
  • 清理阶段：无

可以看出，单元测试的编写是有“套路”可循的。实际中，我们一般不会创建这么多临时变量，可以简写成：

describe('Addition', () => {
  it('knows that 2 and 2 make 4', () => {
      expect(2 + 2).toBe(4);
  });
});

toBe 只是 Jest 强大断言功能中的一个方法。

现在让我们来执行一下刚刚编写的测试代码吧：

Jest 中的 mock 与 spy

让我们来通过例子了解 mock 与 spy。

假设有下面这个函数：

function forEach(items, callback) {
  for (let index = 0; index < items.length; index++) {
    callback(items[index]);
  }
}

功能很简单，循环第一个参数 items，并把数组中的每一项作为参数调用第二个参数 callback。该如何测试呢？

我们要创建一个特殊的 callback 函数，它可以记录每次调用时传入的参数供我们进行断言。

下面是一段示例代码：

describe('forEach', () => {
  it('should call callback with each item', () => {
    const callHistory = [];
    const specialCallback = (...args) => callHistory.push(args);
    forEach([1, 2], specialCallback);

    expect(callHistory.length).toBe(2);
    expect(callHistory[0][0]).toBe(1);
    expect(callHistory[1][0]).toBe(2);
  })
});

这里的 specialCallback 就是一个 mock。它存在的意义就是统计函数被调用的信息供我们使用。这种模式在单元测试中经常被使用，所以 Jest 已经内置了对 mock 的支持。让我们来看看如何使用：

describe('forEach', () => {
  it('should call callback with each item', () => {
    const mockFn = jest.fn();
    forEach([1, 2], mockFn);

    expect(mockFn.mock.calls.length).toBe(2);
    expect(mockFn.mock.calls[0][0]).toBe(1);
    expect(mockFn.mock.calls[1][0]).toBe(2);
  })
});

很方便吧，只需要 jest.fn() 一下就可以得到一个功能抢到的 mock 函数。

最后再来说一下 spy。其实 spy 和 mock 是非常类似的，唯一的区别点在于，spy 用于监听一个现有对象上的方法。

还是通过一个例子来看，假设我们有对象：

const bot = {
  sayHello: (name) => {
    console.log(`Hello ${name}!`);
  }
}

我们可以像下面这样创建并使用 spy：

describe('bot', () => {
  it('should say hello', () => {
    const spy = jest.spyOn(bot, 'sayHello');

    bot.sayHello('Michael');

    expect(spy).toHaveBeenCalledWith('Michael');

    spy.mockRestore();
  })
});

我们通过 jest.spyOn 创建了一个监听 bot 对象的 sayHello 方法的 spy。它就像间谍一样监听了所有对 bot#sayHello 方法的调用。由于创建 spy 时，Jest 实际上修改了 bot 对象的 sayHello 属性，所以在断言完成后，我们还要通过 mockRestore 来恢复 bot 对象原本的 sayHello 方法。

实战：使用 Jest 编写一个完整的单元测试

到这里，单元测试的套路和 Jest 的基本用法已经介绍的差不多了。让我们最后通过一个完整的示例来结束今天的讨论。

被测试的函数名为 getImageDomain。主要功能就是为某个 skuId 选取一个图片服务器域名，如果未传入 skuId，则随机返回一个域名：

const domains = [
  'img10.360buyimg.com',
  'img11.360buyimg.com',
  'img12.360buyimg.com',
  'img13.360buyimg.com',
  'img14.360buyimg.com',
];

const getImageDomain = (skuId) => {
  if (skuId) {
    return domains[skuId % 5];
  } else {
    return domains[Math.floor(Math.random() * 5)];
  }
}

对应的测试代码如下，由于逻辑比较简单，故不再详细分析：

describe('getImageDomain', () => {
  it('should select domain based on skuId if provided', () => {
    expect(getImageDomain(1)).toBe('img11.360buyimg.com');
  });

  it('should select a random domain based on Math.random if skuId not available', () => {
    const spy = jest.spyOn(Math, 'random').mockImplementation(() => 0.9);

    expect(getImageDomain()).toBe('img14.360buyimg.com');
    expect(spy).toHaveBeenCalled();

    spy.mockRestore();
  });
});

写在最后

测试只是一种手段，而不是目的。

软件的质量不是测试出来的，而是设计和维护出来的。

以上内容就是本篇的全部内容以上内容希望对你有帮助，有被帮助到的朋友欢迎点赞，评论。
如果对软件测试、接口测试、自动化测试、面试经验交流。感兴趣可以关注小编，会有同行一起技术交流哦。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,732评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,496评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,264评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,807评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,806评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,675评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,029评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,683评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,704评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,413评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,016评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2赞 343