前端单元测试03之Sion

最新推荐文章于 2025-07-20 20:42:09 发布

henryzyk

最新推荐文章于 2025-07-20 20:42:09 发布

阅读量198

点赞数

CC 4.0 BY-SA版权

分类专栏：单元测试文章标签：前端单元测试

本文链接：https://blog.youkuaiyun.com/henryzyk/article/details/110003243

本文介绍了前端单元测试中Sinon的使用，包括Spy、Stub和Mock的功能和应用场景。Sinon作为测试辅助工具，能模拟函数调用，解决前端测试中与后台交互和函数依赖的问题，实现测试解耦。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端单元测试03之Sion

前端测试存在的问题
在讲Sinon之前，我们得先讲一下在学习了Mocha、chai以及enzyme之后，我们的前端测试还存在的一些问题。
比如前台测试需要与后台交互，获取后台数据后再根据相应数据进行测试。
又比如一个函数测试依赖另一个函数，我们可以根据测试的目的去模拟另一个函数，讲两者的测试分开，从而达到测试中也能解耦的目的。
测试辅助工具 Sinon
Sinon是用来辅助我们进行前端测试的，在我们的代码需要与其他系统或者函数对接时，它可以模拟这些场景，从而使我们测试的时候不再依赖这些场景。
Sinon有主要有三个方法辅助我们进行测试：spy，stub，mock。
Sion 的安装

npm install --save-dev sinon

官方demo：

export default function once(fn) {
   
   
    var returnValue, called = false;
    return function () {
   
   
        if (!called) {
   
   
            called = true;
            returnValue = fn.apply(this, arguments);
        }
        return returnValue;
    };
}

Sinon之spy
spy生成一个间谍函数，它会记录下函数调用的参数，返回值，this的值，以及抛出的异常。
而spy一般有两种玩法，一种是生成一个新的匿名间谍函数，另外一种是对原有的函数进行封装并进行监听。
搭好上面的结构后，直接在once.test.js里面写入spy的使用例子：
```
import {
     
     assert} from 'chai'
import sinon from 'sinon'
import once from '../src/once'

describe('测试Once函数', function () {
     
     
  it('传入Once的函数会被调用', function 
```