在 Mocha 中使用 Sinon 模拟 API 调用-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要调用后端 API 接口来获取数据，但是在单元测试中，我们不想依赖于真实的后端接口。这时，我们可以使用 Sinon.js 来模拟 API 调用。

Sinon.js 简介

Sinon.js 是一个用于 JavaScript 测试的库，它提供了很多有用的工具函数，包括：

Sinon.spy：用于监视函数的调用情况
Sinon.stub：用于替换函数的实现
Sinon.mock：用于测试对象的行为

除了这些函数，Sinon.js 还提供了一些其他的工具函数，如 Sinon.fake、Sinon.useFakeTimers 等，这些函数可以帮助我们更方便地进行单元测试。

在 Mocha 中使用 Sinon.js

Mocha 是一个流行的 JavaScript 测试框架，它支持 BDD 和 TDD 测试风格，并且可以与 Sinon.js 配合使用。下面我们将演示如何在 Mocha 中使用 Sinon.js 进行 API 调用的模拟。

首先，我们需要安装 Mocha 和 Sinon.js：

npm install mocha sinon --save-dev

接着，我们可以编写一个简单的 API 调用的示例代码：

function fetchData(url) {
  return fetch(url).then(response => response.json());
}

这个函数会从指定的 URL 获取数据，并将数据解析为 JSON 格式。现在我们要对这个函数进行单元测试，但是我们不想依赖于真实的后端接口，而是希望使用 Sinon.js 来模拟 API 调用。

为了实现这个目标，我们可以使用 Sinon.stub 函数来替换 fetch 函数的实现，从而模拟 API 调用。下面是代码示例：

// javascriptcn.com 代码示例
const sinon = require('sinon');
const assert = require('assert');

describe('fetchData', function() {
  it('should fetch data from API', function() {
    const url = 'http://example.com/data';
    const data = { foo: 'bar' };

    const fetchStub = sinon.stub(window, 'fetch');
    fetchStub.returns(
      Promise.resolve({
        json: () => Promise.resolve(data),
      })
    );

    return fetchData(url).then(response => {
      assert.equal(response, data);
      fetchStub.restore();
    });
  });
});

在这个示例中，我们使用了 Sinon.stub 函数来替换 window.fetch 函数的实现。我们通过 fetchStub.returns 方法来定义 fetch 函数的行为，这里我们返回了一个 Promise 对象，这个对象的 json 方法返回了我们预先定义好的数据。

在测试代码的最后，我们需要调用 fetchStub.restore 方法来恢复原始的 fetch 函数实现，以避免对其他测试用例产生影响。

总结

使用 Sinon.js 可以很方便地模拟 API 调用，从而避免对真实的后端接口产生依赖。在 Mocha 中使用 Sinon.js 也很简单，只需要使用 Sinon.stub 函数来替换 API 函数的实现即可。在编写单元测试时，我们应该尽量避免依赖外部资源，这样可以使测试更加稳定和可靠。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655f1d1ad2f5e1655d949127