前端单元测试--Sinon

453 阅读3分钟

我正在参与掘金创作者训练营第4期,点击了解活动详情,一起学习吧!

为什么需要Sinon

在我们开发前端项目的时候,经常需要通过ajax请求获取服务端数据来渲染页面,这样前端开发会依赖于后端开发,甚至可能阻塞于后端开发,在这些时候我们可以使用sinon.js来解决这些问题,只需要几行代码,就可以构建一个“服务器”。

什么是Sinon

Sinon并不是独立的测试框架,它提供了spies, stub, mock三种功能。Sinon通过“test-double”(测试替代)来消除测试的复杂度。顾名思义,使用的是真实代码逻辑的“平替”。比如模拟ajax,我们不需要服务器,而是使用替换其逻辑,使请求返回我们预先设置的数据。因为JavaScript是动态的,我们可以在调用某个方法的时候使用任何函数来替代它。在Sinon中可以用一个测试逻辑取代任何JavaScript函数,然后让测试复杂的事情变的简单化。

spies的概念

spies,间谍。间谍函数是Sinon最简单的部分,其它的功能都是建立在spies之上的,spies的主要用途是收集有关函数调用的信息,例如是否调用了函数、调用了几次、函数传入的参数是什么等。但是被监听的函数对spies是无感知的,同样不会影响函数本身的正常调用(被监听函数的上下文关系不会被影响)。

stub的概念

它们拥有spies的所有功能,但不是监视某个函数的调用情况,而是完全取代了这个函数。换句话说,当使用spies时,原始函数仍然运行,但是当使用stub时,函数将不具有原始的功能,而是替换后的函数。

mock的概念

mock与stub的功能一样,都是用来替换指定的函数,如果你想替换掉一个对象中的多个方法,这时mock就可以发挥作用了,但是如果仅仅是替换对象中的一个函数,那么stub更加简单易用,当使用mock的时候应该十分小心,因为大量的替换原有代码逻辑,会导致测试变得脆弱。

Sinon的使用场景

spies

如上所述,spies被用来获取关于函数调用的信息。例如,一个spies可以告诉我们调用一个函数的次数、每次调用的参数、返回的值、抛出的错误等。因此,当测试的目的是验证发生的事情时,spies是一个很好的选择。结合Sinon的说法,我们可以通过一个简单的spies检查不同的结果。

间谍最常见的场景包括:

  • 检查函数被调用了多少次
  • 检查传递给函数的参数

stub

stub就像spies,除了替换目标功能,还可以包含自定义行为,例如返回值,或抛出异常,甚至可以自动调用作为参数提供的任何回调函数。

存根有几个常用的用途:

  • 代替有问题的代码段
  • 触发不会触发的代码路径,例如错误处理
  • 帮助测试异步代码
  • 可用于替代有问题的代码,甚至一些写入测试困难的代码,比如外部网络连接,数据库或其他非JavaScript引入的代码。

通过用stub替换与数据库相关的功能,我们不再需要实际的数据库进行测试。 几乎任何情况下,类似的方法都可以用于其他难以测试的代码。

stub也可用于触发不同的代码路径。 如果我们测试的代码调用另一个函数,我们有时需要测试它在异常条件下的行为, 我们可以使用stub从代码中触发错误。

mock

主要用于当你stub的时候想验证多个具体的行为时