今天,我们要讲的是 Jest 单元测试的入门知识。

为何要进行单元测试?

在学习 Jest 之前,我们需要回答一个问题:为何要进行单元测试?编写单元测试可以给你带来很多好处:

  • 将测试自动化,无需每次都人工测试。
  • 变更检查,当代码发生重构,可以及时发现,并做出相应的调整。
  • 列举测试用例,可以帮你了解所有的边界情况。
  • 当作文档,如果你的测试描述足够详细,生成的测试报告甚至可以当作文档。
  • ……

总之,单元测试会让你的生活更加美好。

使用 Jest 进行单元测试

编写测试通常都会基于某个测试框架,在众多测试框架中我选择了 Jest,不仅因为我是个 React 开发者(React 与 Jest 都是 Facebook 出的),而且因为它确实简单好用。让我们开始编写测试吧!

首先,安装 Jest:

npm install --save-dev jest

然后,编写一个待测试的文件,以Stack类为例:

Stack.js

function Stack() {
  // 私有变量 items,用于记录数组,对象不能直接操作
  var items = [];
  // 类方法 push,在数组末尾添加项,对象可以直接调用
  this.push = function (element) {
    items.push(element);
  };
  // 删除并返回数组末尾的项
  this.pop = function () {
    return items.pop();
  };
}

接下来,编写一个测试文件 Stack.test.js:

Stack.test.js

// 导入 Stack
var Stack = require('./Stack');

test('Stack', function () {
  // 实例化一个 stack 对象
  var stack = new Stack();

  stack.push(8);
  // 期望 stack 最后一项是8
  expect(stack.pop()).toBe(8);
});

然后,在 package.json 中添加:

"scripts": {
  "test": "jest"
}

最后,打开命令行运行:

npm test

结果会在命令行中生成测试报告:

PASS  Stack.test.js

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.386s
Ran all test suites.

断言简介

在上面的测试代码中有个 expect().toBe() 来判断结果是否是预期,这叫断言。什么是断言?在程序设计中,断言(assertion)是一种放在程序中的一阶逻辑(如一个结果为真或是假的逻辑判断式),目的是为了标示与验证程序开发者预期的结果。除了expect().toBe() 之外,其他常用的断言包括:

  • expect().toEqual():判断结果是否和预期等价。
  • expect().toBeFalsy():判断结果是否为假。
  • expect().toBeTruthy():判断结果是否为真。

至此,Jest 的入门用法已经演示完了,更多的用法可以参考它的官网文档:

https://facebook.github.io/jest/

Jest 单元测试入门的更多相关文章

  1. Jest单元测试进阶

    Jest 命令行窗口中的指令 在学习Jest单元测试入门的时候,给Jest命令提供了一个参数 --watchAll, 让它监听测试文件或测试文件引入的文件的变化,从而时时进行测试.但这样做也带来一个问 ...

  2. Android Studio单元测试入门

    Android Studio单元测试入门 通常在开发Android app的时候经常会写一些小函数并验证它是否运行正确,通常做法我们是把这个函数放到某个界面(Activity上)执行一下,运行整个工程 ...

  3. 【vue】在VS Code中调试Jest单元测试

    在VS Code中调试Jest单元测试 添加调试任务 打开 vscode launch.json 文件,在 configurations 内加入下面代码 "configurations&qu ...

  4. 【前端单元测试入门05】react的单元测试之jest

    jest jest是facebook推出的一款测试框架,集成了前面所讲的Mocha和chai,jsdom,sinon等功能. 安装 npm install --save-dev jest npm in ...

  5. karma单元测试入门

    学习angularjs,都会遇到karma单元测试,可是初学者面对复杂的测试配置往往不知从何入手,下面我们将抛开angularjs,单独使用两个js文件,完成一次测试入门. 0,karma原理

  6. 爱上iOS单元测试系列之爱上她就要先了解她:单元测试入门

    前言 对于单元测试一开始我是拒绝的.单元测试是一个什么东东,因为我喜欢做iOS开发是因为喜欢写APP的啊,一切和这一目标不相干的东西我没兴趣啊,所以从事iOS开发几年都没去深入学习过单元测试(主要是之 ...

  7. VS单元测试入门实践教程

    摘要:本教程不会介绍单元测试的基本理论知识,也不会和大家讨论在实际项目中是否需要写单元测试代码的问题.但是如果你此时想使用VS中的单元测试的工具来测试某个方法是否正确,可你又从来没真正实践过,那么本教 ...

  8. VS2010单元测试入门实践教程

    单元测试的重要性这里我就不多说了,以前大家一直使用NUnit来进行单元测试,其实早在Visual Studio 2005里面,微软就已经集成了一个叫Test的专门测试插件,经过几年的发展,这个工具现在 ...

  9. php单元测试入门教程phpunit详解

    本文档提供了一些phpunit官方教程没有提到的信息,帮助初学者快速了解php单元测试,在phpunit官网提供了详细的中文教程,可选多种格式下载 phpunit官网地址:https://phpuni ...

随机推荐

  1. 使用Groovy处理SoapUI中Json response

    最近工作中,处理最多的就是xml和json类型response,在SoapUI中request里面直接添加assertion处理json response的话,可以采用以下方式: import gro ...

  2. android monkey测试学习

    前提是:有安卓环境,能用adb命令 一.Monkey 测试的目的? 该工具可用于测试稳定性. 开发人员结合monkey 打印的日志 和系统打印的日志,解决测试中出现的问题 二.Monkey 测试的特点 ...

  3. 获取ip地址及城市信息

    大家好,今天给大家分享的是一个简单的知识获取登录用户的ip地址及城市信息,lz是一个小白,如果有哪些错误的地方  欢迎大家指出 东西很简单,直接上代码 [HttpPost] public string ...

  4. 消息摘要技术(MD5)

    1.使用消息摘要技术对密码加密 数据库存储的是经过消息摘要技术加密之后的信息, 避免保存密码明文,提升了系统安全性 必要性说明: 如果存储明文密码,数据库系统管理员和攻破系统的黑客是可以拿到你的所有信 ...

  5. 【grunt】两小时入门

    目录: 1. 用途和场景 2.Grunt插件 3.相关资源 4.环境安装 5.开始学习 5.1 一个新项目 5.2 生成package.json 5.3 在项目中安装grunt和相关插件 5.4 Gr ...

  6. ReentrantLock和synchronized的性能对比

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytpo8 ReentrantLock和内部锁的性能对比     Reentran ...

  7. 【转】为什么选择Spring Boot作为微服务的入门级微框架

    本文为普元云计算高级工程师许二虎在普元云计算架构设计群的微课堂分享.如需加入普元新一代数字化企业云平台研发设计群参与微课堂.架构设计与讨论直播,请直接回复此公众号:"加群 姓名 公司 职位 ...

  8. 分而治之(Work Breakdown Structure, WBS)

    不知道大家有没有和我一样的情况,就是想写一篇博客,不知道从何写起,如何组织语言,如何安排这篇博客的要交待的事情的前因后果:如果在写作过程中被打断,又不知道如何重新拾起键盘,从哪里写起."就如 ...

  9. 团队作业4----第一次项目冲刺(Alpha版本)4.28

    a.提供当天站立式会议照片 会议内容 今天我们主要针对统计结果的表现形式进行了一些讨论,我们考虑是直接显示统计数据或者是用一些直观的图形来体现,最后经过讨论我们大部分人认为选择数据与图形更加形象直观. ...

  10. Swing-布局管理器之BorderLayout(边界布局)-入门

    注:本文内容基本源于Java图形化界面设计——布局管理器之BorderLayout(边界布局),笔者学习过程中根据自身理解进行少量编辑. 边界布局管理器(BorderLayout)把容器的的布局分为五 ...