在 Chai 测试中使用 sinon：如何测试异步操作-JavaScript中文网-JavaScript教程资源分享门户

在前端应用程序的开发中，异步操作是非常普遍的。但是如何测试异步操作却是开发者们的一个难点。sinon 是一个流行的 JavaScript 测试工具，它的出现使得测试异步操作变得更加容易。本篇文章将会介绍如何在 Chai 测试框架中使用 sinon 测试异步操作。

什么是 sinon？

Sinon 是一个 JavaScript 库，主要用于进行单元测试。它可以轻松地创建测试桩和测试替身。sinon 中最强大的特性就是支持测试异步代码。换句话说，sinon 可以帮助我们捕捉异步代码和回调函数，并且能够确保它们正确地工作。

安装 sinon

首先你需要安装 sinon。你可以通过 npm 安装：

npm install sinon --save-dev

安装完成之后，在测试文件中引入 sinon。

import sinon from 'sinon';

如何测试异步代码

废话不多说，让我们看一下如何在 Chai 中使用 sinon 测试异步代码。

假设我们有一个异步函数 foo，它在 100ms 后返回结果。我们使用 setTimeout() 模拟这个异步函数。

function foo(callback) {
  setTimeout(() => {
    callback('result');
  }, 100);
}

现在我们需要写一个测试用例来测试它是否能够正确返回结果。我们可以使用 sinon 的 stub() 方法来创建一个模拟函数。然后我们可以使用 callsFake() 方法指定模拟函数的实现。

// javascriptcn.com 代码示例
describe('异步函数 foo', () => {
  it('应该正确返回结果', (done) => {
    const callback = sinon.stub();
    callback.callsFake((result) => {
      expect(result).to.equal('result');
      done(); // 测试结束
    });
    foo(callback);
  });
});

在上述代码中，我们使用了 Chai 断言库中的 expect() 方法来确认函数的返回结果，确保它是我们所期望的。然后，在模拟函数的实现中，我们使用了 done() 方法来告诉测试框架测试已经结束。注意，我们需要将它作为一个参数传递给测试函数，以确保测试结束之前等待异步操作的完成。

如何测试 AJAX 调用

以上述例子为基础，我们可以扩展测试异步操作的范围。在前端开发中，AJAX 调用是非常常见的异步操作。我们可以使用 sinon 捕捉这些代码，并且确保它们工作正常。

假设我们有一个函数 fetchData()，它使用 jQuery 来发送 AJAX 请求，并且带有回调函数来处理结果。我们可以使用 sinon.stub() 去捕捉这个回调函数，然后在测试用例中检查结果。

// javascriptcn.com 代码示例
function fetchData(url, callback) {
  $.ajax({
    url: url,
    success: function (data) {
      callback(data);
    },
  });
}

describe('fetchData 函数', () => {
  it('能够正确返回 AJAX 结果', (done) => {
    sinon.stub($, 'ajax').yieldsTo('success', {
      name: 'sinon',
      age: 10,
    });

    fetchData('https://example-api.com/data', (data) => {
      expect(data).to.deep.equal({
        name: 'sinon',
        age: 10,
      });
      $.ajax.restore();
      done();
    });
  });
});

在上述代码中，我们使用 yieldsTo() 方法来指定模拟函数对回调函数的调用。然后我们可以像以前一样使用 expect() 方法来检查结果。最后，我们在测试完成之后使用 $.ajax.restore() 方法还原原始的 AJAX 函数。

如何测试 Promise

在 Node.js 8.0.0 中，支持了 async/await 协议以及 Promise 类，在前端开发中逐渐被广泛使用。在测试中也非常普遍。对于测试异步 Api/Vue/React/微服务等不同框架体系，都是有备无患，Sinon提供了丰富的特性测试异步函数和异步代码。

// javascriptcn.com 代码示例
function fetchPromise(url) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        name: 'sinon',
        age: 10,
      });
    }, 100);
  });
}

describe('Promise 函数测试', () => {
  it('能够正确返回 Promise 结果', () => {
    const fakeData = {
      name: 'sinon',
      age: 10,
    };
    sinon.stub(global, 'fetch').returns(Promise.resolve({
      json: () => Promise.resolve(fakeData),
    }));

    return fetchPromise('https://example-api.com/data').then((res) => {
      expect(res).to.deep.equal(fakeData);
    }).finally(() => {
      global.fetch.restore();
    });
  });
});

我们使用 sinon.stub() 捕捉了 global.fetch，并使用 Promise 解析返回值返回假数据。然后，我们通过一个具有 Promise.then 和 Promise.finally 的回调链验证了返回值，finally 用于还原捕捉的 fetch 的原有状态。

总结

本文介绍了如何在 Chai 中使用 sinon 测试异步操作。sinon 的强大特性可以捕捉异步代码，并且确保它们正确工作。在测试 AJAX 调用和 Promise 时，使用 sinon.stub() 可以捕捉回调函数，并根据测试用例打桩。如果您还没有开始测试异步代码，那么现在就开始吧，使用 sinon 帮助您更轻松地完成测试任务。

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