今天,我们要讲的是 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. wcf 上传文件报413,404和发布错误

    上传文件错误: 其实要修改所有的服务,不管是服务端还是客户端,Binding那边增加一个没有设置名字的默认配置就OK了:  <binding   closeTimeout="00:10 ...

  2. tomcat设置文件编码

    tomcat修改bin文件夹下面的catalina.bat文件可以解决乱码在文件中加上JAVA_OPTS="-server -Xms128M -Xmx4096M -XX:PermSize=5 ...

  3. MongoDB学习之——安装

    MongoDB安装 说明: 本次安装教程: 版本:mongoDB-3.2.4 安装环境:windows 10 ,64位操作系统 准备:安装包.Robomongo(客户端用于查看mongoDB里面的数据 ...

  4. 使用nginx实现纯前端跨越

    你是否厌倦了老是依赖后台去处理跨域,把握不了主动权 你是否想模仿某个app倒腾一个demo,却困于接口无法跨域 那么很幸运,接下来我将现实不依赖任何后台,随心所欲的想访问哪个域名就访问哪个! 下载ng ...

  5. js并行加载,顺序执行

    js并行加载,顺序执行 <script>运行脚本或加载外部文件时,会阻塞页面渲染,阻塞其他资源的加载.如果页面中需要加载多个js文件,在古老浏览器中性能会比较糟糕. 因此有了最原始的优化原 ...

  6. 垃圾收集器Serial 、Parallel、CMS、G1

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt378 这里介绍4个垃圾收集器,如果进行了错误的选择将会大大的影响程序的性能. ...

  7. Calico 的网络结构是什么?- 每天5分钟玩转 Docker 容器技术(68)

    上一节我们部署了 Calico 网络,今天将运行容器并分析 Calico 的网络结构. 在 host1 中运行容器 bbox1 并连接到 cal_net1: docker container run ...

  8. Swing-BoxLayout用法-入门

    注:本文内容源于http://www.java3z.com/cwbwebhome/article/article20/200016.html?id=4797:细节内容根据笔者理解有修改. BoxLay ...

  9. 201521123003《Java程序设计》第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind 2. 书面作业 Q1.ArrayList代码分析 1.1 解释ArrayList的contains源 ...

  10. 201521123036 《Java程序设计》第3周学习总结

    本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来. 书面作业 Q1:代码阅读 public class Test1 { private ...