在 Jest 中使用 Sinon.js 进行测试的示例-JavaScript中文网-JavaScript教程资源分享门户

简介

近年来，前端开发已经从一种简单传统的“文艺青年”工作变成了一项极具挑战的行业。为了保证代码的质量，开发人员需要编写完整、可靠的测试集以确保其代码的可靠性和正确性。在这个过程中，Sinon.js 和 Jest 是成为最常用的测试框架之一。在本文中，我们将学习如何在 Jest 中使用 Sinon.js 进行测试，并提供示例代码和指导意义。

学习 Sinon.js

Sinon.js 是一个构建和测试 JavaScript 应用程序的独立、独立的 JavaScript 库，它可以轻松地模拟函数、对象和行为。该库由永久免费的开发人员开发，并根据 BSD 许可证进行分发。

Sinon.js 提供了丰富的工具，包括:

Spies（间谍程序）: 可以用于记录函数的调用，并访问它们的参数和返回值。
Stubs（存根）：可以重新定义函数并返回所定义的值。
Mocks（模拟）：可以完全控制对象的行为。

在学习 jest 中使用 sinon.js 前，我们需要了解一些 sinon.js 的常用函数。

Spies

测试中的 Spy 模式可以用于记录函数的调用，并访问它们的参数和返回值。可以使用 sinon.spy() 方法创建一个 Spy，该方法将返回可修改和调用的特殊函数。

示例：

// javascriptcn.com 代码示例
const myFunction = (a, b) => {
  return a + b;
};

const spyFunction = sinon.spy(myFunction);

const result = spyFunction(1, 2);

console.log(spyFunction.calledOnce); // true
console.log(spyFunction.calledWith(1, 2)); // true
console.log(result); // 3

在这个例子中，我们创建了一个简单的函数 myFunction，并使用 sinon.spy() 创建了一个名为 spyFunction 的 Spy。我们将调用参数 myFunction 并记录它的调用，这是通过执行 spyFunction(1, 2) 实现的。

注意，Spy 模式记录了函数的每次调用。一旦 myFunction 有两个参数被传递，sinon 将记录“hasConfigCalledOnce”成功。 calledWith 方法则用于验证该方法是否调用并传递参数。最终，结果将是 result 返回函数 myFunction 的值。

Stubs

在测试过程中，有时需要使用 Stub 以便在测试某些代码时重新定义函数并返回所定义的值。可以使用 sinon.stub() 方法重写给定的对象和 / 或原型上的函数，并将其返回所定义的结果。

示例：

// javascriptcn.com 代码示例
function myFunction () {
  return 5;
}

const stub = sinon.stub(window, 'myFunction');
stub.returns(10);

console.log(myFunction()); // 10

stub.restore();

console.log(myFunction()); // 5

在这个例子中，我们将当前脚本中的 window.myFunction 备份为 stub。然后，我们使用 stub.returns(XX) 方法重写该函数并将其返回所定义的结果。 myFunction() 实际上是调用 stub 函数，它将返回 10，而不是原始函数 5。

Mocks

在 Sinon.js 中，Mock 可以用于完全控制对象的行为。可以使用 sinon.mock() 方法创建 Mock，样例如下：

// javascriptcn.com 代码示例
const calculator = {
  sum(a, b) {
    return a + b;
  },
};

const calculatorMock = sinon.mock(calculator);

calculatorMock.expects('sum').once().withArgs(1, 2).returns(3);

console.log(calculator.sum(1, 2)); // 3

calculatorMock.verify();

Mock 模式可以完全控制对象的行为。在这个例子中，我们创建了一个包含一个方法 sum 的对象 calculator。然后，我们使用 sinon.mock（） 创建了一个名为 calculatorMock 的模拟，并期望调用 sum 方法一次，并使用 withArgs 方法传递参数（1, 2）完成调用。 returns(3) 方法将指定函数返回 3 的值。

计算器实现常常是仅用于说明(mock)如何运作的微小应用，收到更先进应用的封装，我们应当尽可能在mock的应用程序中避免使用函数。

在 Jest 中使用 Sinon.js 进行测试

在熟悉了 Sinon.js 的常用函数和 Spy、Stub、Mock 之后，我们可以开始在 Jest 中使用 Sinon.js 进行测试了。

安装和引入

在开始编写测试代码之前，需要安装 Jest 和 Sinon.js。可以使用以下命令安装 Jest 和 Sinon.js：

# 安装 Jest
npm install --save-dev jest

# 安装 Sinon.js
npm install sinon

在将 Sinon.js 引入到测试文件中时，可以使用以下代码:

const sinon = require('sinon');

编写测试用例

在 Jest 中使用 Sinon.js 进行测试非常容易，您只需使用以下示例代码即可：

// javascriptcn.com 代码示例
const myFunction = (a, b) => {
  return a + b;
};

describe('使用 Sinon.js 进行 Jest 测试', () => {
  describe('testing function with sinon.spy', () => {
    it('should return value', () => {
      const spyFunction = sinon.spy(myFunction);
      const result = spyFunction(1, 2);
      expect(spyFunction.calledOnce).to.equal(true);
      expect(spyFunction.calledWith(1, 2)).to.equal(true);
      expect(result).to.equal(3);
    });
  });

  describe('testing function with sinon.stub', () => {
    it('should return a stubbed value', () => {
      const stub = sinon.stub(myModule, 'myFunction').returns(10);
      const result = myFunction();
      expect(result).to.equal(10);
      stub.restore();
    });
  });

  describe('testing function with sinon.mock', () => {
    it('should correctly mock functions', () => {
      const calculator = {
        sum(a, b) {
          return a + b;
        },
      };
      const calculatorMock = sinon.mock(calculator);
      calculatorMock.expects('sum').once().withArgs(1, 2).returns(3);
      const result = calculator.sum(1, 2);
      expect(result).to.equal(3);
      calculatorMock.verify();
    });
  });
});

在这个例子中，我们禁用了 Jest 的自动模拟功能和自动模拟文件mock。使用函数的地方, 我们通过引入 Sinon.js 来进行模拟和测试。这里我们展示了如何使用 Sinon.js 的 Spy、Stub、Mock 构造器在 Jest 中编写谷歌测试代码。

通过 sinon.spy 方法创建 Spy，sinon.stub 方法可以重写给定的对象和 / 或 ES6类的的函数并返回所定义的值。通过 sinon.mock 方法创建 Mock，用于完全控制 ES6-es5对象的行为。

使用 sync-await 和 Sinon.js 等模拟功能可以模拟异步操作。例如，我们可以使用 Sinon.js 的 sinon.useFakeTimers、 sinon.useFakeXMLHttpRequest 或 sinon.useFakeServer API 模拟异步操作。

总结

在本文中，我们使用了 Sinon.js 的 Spy、Stub、Mock 等常见 API 的示例，同时展示了如何在 Jest 中进行测试。使用 Sinon.js 框架增加了单元测试的灵活性和有效性。通过在 Jest 中的应用，可以轻松地进行测试以确保代码质量和正确性。

希望这篇文章对大家有帮助。如果您还有其他方面的疑问，请通过评论提交您的问题。我们将尽快回答。

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