如何使用 Sinon 和 Chai 进行 API 的 Mock 及 Stub 测试-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，测试是非常重要的一环。而 Mock 和 Stub 又是测试中比较常见的两种技术。在 API 测试中，我们通常使用 Sinon 和 Chai 两个库来实现 Mock 和 Stub 功能。

本文将详细介绍如何使用 Sinon 和 Chai 进行 API 的 Mock 及 Stub 测试，并提供示例代码供读者参考学习。

Sinon

Sinon 是一个 JavaScript 测试框架，它提供了 Mock、Stub 和 Spy 的功能。在 API 测试中，我们通常使用 Sinon 来实现 Mock 和 Stub。

安装

安装 Sinon 的方法有两种：

使用 npm 安装：
```
npm install --save-dev sinon
```

在浏览器中直接引用 Sinon 库：

<script src="https://unpkg.com/sinon/pkg/sinon.js"></script>

Mock

Mock 是指模拟一个对象来替代原始对象，以达到测试的目的。在 API 测试中，我们使用 Mock 来模拟 API 的返回值，以便测试使用该 API 的函数的正确性。

以下是一个使用 Sinon Mock 来测试某个函数的示例代码：

const sinon = require('sinon');
const assert = require('assert');

const api = {
  getUser: () => {
    return {
      name: 'Alice',
      age: 20
    };
  }
};

function getName() {
  const user = api.getUser();
  return user.name;
}

describe('getName', () => {
  it('should return Alice', () => {
    const mock = sinon.mock(api);
    mock.expects('getUser').returns({ name: 'Alice' });

    const result = getName();

    assert.equal(result, 'Alice');
    mock.verify();
  });
});

在上述代码中，我们通过调用 sinon.mock(api) 来创建了一个 api 对象的 Mock 对象，并通过 mock.expects('getUser').returns({ name: 'Alice' }) 设定了 getUser 方法的返回值为 { name: 'Alice' }。这样，在调用 getUser 方法时，就会返回我们设定的值，从而达到测试的目的。

需要注意的是，在使用 Mock 时，我们还需要调用 mock.verify() 来验证 Mock 对象是否被正确地使用。

Stub

Stub 是指在测试中，我们可以替换要测试的函数的一部分实现，以便测试该函数在特定条件下的行为。在 API 测试中，我们使用 Stub 来模拟 API 的行为，以便测试使用该 API 的函数在特定情况下的行为是否正确。

以下是一个使用 Sinon Stub 来测试某个函数的示例代码：

const sinon = require('sinon');
const assert = require('assert');

const api = {
  getUser: () => {
    return {
      name: 'Alice',
      age: 20
    };
  }
};

function getUsers() {
  const users = [];

  const user1 = api.getUser();
  users.push(user1);

  const user2 = api.getUser();
  users.push(user2);

  return users;
}

describe('getUsers', () => {
  it('should return an array with two users', () => {
    const stub = sinon.stub(api, 'getUser');
    stub.onFirstCall().returns({ name: 'Alice', age: 20 });
    stub.onSecondCall().returns({ name: 'Bob', age: 30 });

    const result = getUsers();

    assert.deepEqual(result, [{ name: 'Alice', age: 20 }, { name: 'Bob', age: 30 }]);
    stub.restore();
  });
});

在上述代码中，我们通过调用 sinon.stub(api, 'getUser') 来创建了一个 api 对象的 getUser 方法的 Stub 对象，并通过 stub.onFirstCall().returns({ name: 'Alice', age: 20 }) 和 stub.onSecondCall().returns({ name: 'Bob', age: 30 }) 来设定 getUser 方法在第一次调用时返回 { name: 'Alice', age: 20 }，在第二次调用时返回 { name: 'Bob', age: 30 }。这样，在调用 getUsers 函数时，就会返回我们设定的值，从而达到测试的目的。

需要注意的是，在使用 Stub 时，我们还需要调用 stub.restore() 来还原被 Stub 的方法，以免影响其他的测试。

Chai

Chai 是一个断言库，它提供了丰富的断言方法，可以用于优雅地测试代码。在 API 测试中，我们通常使用 Chai 来断言 API 的返回值是否符合预期。

安装

安装 Chai 的方法有两种：

使用 npm 安装：
```
npm install --save-dev chai
```

在浏览器中直接引用 Chai 库：

<script src="https://unpkg.com/chai/chai.js"></script>

Expect

在使用 Chai 进行测试时，我们通常使用 Expect 这个方法来断言代码是否符合预期。以下是一个使用 Chai Expect 来测试某个函数的示例代码：

const chai = require('chai');
const expect = chai.expect;

const api = {
  getUser: () => {
    return {
      name: 'Alice',
      age: 20
    };
  }
};

function getName() {
  const user = api.getUser();
  return user.name;
}

describe('getName', () => {
  it('should return Alice', () => {
    const result = getName();
    expect(result).to.equal('Alice');
  });
});

在上述代码中，我们通过调用 chai.expect 方法来使用 Chai Expect，并通过 expect(result).to.equal('Alice') 来断言 result 的值等于 'Alice'。

Assert

除了 Expect，Chai 还提供了 Assert 和 Should 两种方法来进行断言。以下是一个使用 Chai Assert 来测试某个函数的示例代码：

const chai = require('chai');
const assert = chai.assert;

const api = {
  getUser: () => {
    return {
      name: 'Alice',
      age: 20
    };
  }
};

function getName() {
  const user = api.getUser();
  return user.name;
}

describe('getName', () => {
  it('should return Alice', () => {
    const result = getName();
    assert.equal(result, 'Alice');
  });
});

在上述代码中，我们通过调用 chai.assert 方法来使用 Chai Assert，并通过 assert.equal(result, 'Alice') 来断言 result 的值等于 'Alice'。

示例代码

在本节中，我们提供了一个完整的使用 Sinon 和 Chai 进行 API 的 Mock 及 Stub 测试的示例代码。

const sinon = require('sinon');
const chai = require('chai');
const expect = chai.expect;
const assert = chai.assert;

const api = {
  getUser: () => {
    return {
      name: 'Alice',
      age: 20
    };
  },
  getUsers: () => {
    return [
      {
        name: 'Alice',
        age: 20
      },
      {
        name: 'Bob',
        age: 30
      }
    ];
  }
};

function getName() {
  const user = api.getUser();
  return user.name;
}

function getUsers() {
  const users = [];

  const user1 = api.getUser();
  users.push(user1);

  const user2 = api.getUser();
  users.push(user2);

  return users;
}

describe('API Mock and Stub testing', () => {
  describe('#getName', () => {
    it('should return Alice', () => {
      const mock = sinon.mock(api);
      mock.expects('getUser').returns({ name: 'Alice' });

      const result = getName();

      expect(result).to.equal('Alice');
      mock.verify();
    });
  });

  describe('#getUsers', () => {
    it('should return an array with two users', () => {
      const stub = sinon.stub(api, 'getUser');
      stub.onFirstCall().returns({ name: 'Alice', age: 20 });
      stub.onSecondCall().returns({ name: 'Bob', age: 30 });

      const result = getUsers();

      assert.deepEqual(result, [{ name: 'Alice', age: 20 }, { name: 'Bob', age: 30 }]);
      stub.restore();
    });
  });
});

在上述代码中，我们先定义了一个 api 对象，它包含了两个 API：getUser 和 getUsers。

接着，我们分别实现了 getName 和 getUsers 函数，用于使用 api 对象中的 API。

最后，我们使用 Sinon 和 Chai 提供的 Mock 和 Stub 功能来对 api 对象中的 API 进行测试，并断言函数的返回值是否符合预期。

本节提供的示例代码可以用于实际的项目中，读者可以结合实际情况做出修改和扩展。

总结

本文详细介绍了如何使用 Sinon 和 Chai 进行 API 的 Mock 及 Stub 测试，并提供了示例代码供读者参考学习。

Mock 和 Stub 是测试中常见的两种技术，通过使用它们可以模拟 API 的行为和返回值，以便测试使用该 API 的函数的正确性和行为。

Sinon 是一个 JavaScript 测试框架，它提供了 Mock、Stub 和 Spy 的功能；Chai 是一个断言库，它提供了方便的断言方法，可用于优雅地测试代码。

通过本文的介绍和示例代码的学习，读者可以熟悉 Mock 和 Stub 的使用方法，掌握 Sinon 和 Chai 的基本功能，以及开展前端 API 测试的能力。

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

如何使用 Sinon 和 Chai 进行 API 的 Mock 及 Stub 测试