Chai 和 Sinon 的结合使用-JavaScript中文网-JavaScript教程资源分享门户

前端开发越来越重视测试，而 Chai 和 Sinon 是测试工具中不可或缺的两大工具。Chai 提供了一套丰富的 BDD/TDD 断言库，可以轻松编写测试用例，而 Sinon 则提供了众多的 spy, mock 和 stub 工具，可以轻松模拟函数行为和网络请求。在本文中，我们将介绍如何结合使用 Chai 和 Sinon 进行前端测试，并给出代码示例。

安装

在使用 Chai 和 Sinon 之前，我们需要先安装它们。我们可以通过 npm 进行安装，命令如下：

npm install --save-dev chai sinon

测试用例

考虑一个简单的测试用例，假设我们有一个函数 getUser，它需要从后端服务器中获取用户信息，返回一个用户对象。我们想要测试这个函数是否正常工作，包括以下几个方面：

函数是否能够正确地发送请求到服务器，并正确处理服务器响应
函数是否能够正确地解析返回的 JSON 数据，并返回一个用户对象
函数是否能够处理错误情况，并返回错误信息

让我们来编写这个测试用例。

describe('getUser', function () {
  afterEach(function () {
    sinon.restore();
  });

  it('should send request to server and parse response', async function () {
    const user = { id: 1, name: 'Alice' };
    sinon.stub(window, 'fetch').returns(Promise.resolve({ json: () => user }));

    const result = await getUser();

    expect(fetch).to.have.been.calledOnceWith('/user');
    expect(result).to.deep.equal(user);
  });

  it('should handle error', async function () {
    sinon.stub(window, 'fetch').returns(Promise.reject(new Error('Network error')));

    await expect(getUser()).to.be.rejectedWith('Network error');
  });
});

在这个测试用例中，我们定义了一个 describe 块来描述 getUser 函数的各个方面。在每个测试用例之前，我们都会调用 sinon.restore 来确保测试用例之间的状态隔离。在第一个测试用例中，我们使用 sinon.stub 来模拟 fetch 函数，并返回一个预定义的用户对象。然后我们调用 getUser 函数，并期望它能正确地发送请求并解析返回的 JSON 数据。在这里，我们使用了 Chai 中的 expect 断言 API。最后，我们在第二个测试用例中测试了错误情况，使用了 Chai 中的 expect 和 rejectedWith 断言方法。

Sinon 的 spy

除了 stub，Sinon 还提供了 spy 工具，可以轻松地监控函数的调用情况。我们可以使用 sinon.spy 来创建一个 spy，并将它传递给我们要测试的函数。在 sinon.spy 返回的对象中，有一个 called 属性，它可以告诉我们函数是否被调用过，以及调用的次数等信息。

describe('getUser', function () {
  it('should call getUserInfo', async function () {
    const getUserInfoSpy = sinon.spy();
    await getUser(getUserInfoSpy);

    expect(getUserInfoSpy).to.have.been.calledOnce;
  });
});

在这个测试用例中，我们增加了一个新的参数 getUserInfo，它是一个函数。我们通过 sinon.spy 创建了一个 spy，并将它传递给 getUser。在这个测试用例中，我们期望 getUserInfo 被调用了一次。

Sinon 的 mock

另一个 Sinon 工具是 mock，它可以模拟函数的行为，并进行更多的断言。我们可以使用 sinon.mock 来创建一个 mock，并使用 expect 断言方法来检查 mock 是否按照我们的预期来使用。

describe('validateUser', function () {
  it('should call callback with true if user is valid', function () {
    const callback = sinon.fake();
    const mock = sinon.mock(callback);

    mock.expects('calledWithExactly', true);

    validateUser({ username: 'foo', password: 'bar' }, callback);

    mock.verify();
  });
});

在这个测试用例中，我们创建了一个 mock，并开始断言我们要测试的函数的行为。然后我们调用 validateUser 函数，并期望我们的 mock 被调用，并且传递的参数是 true。

总结

Chai 和 Sinon 是两个强大的前端测试工具，它们可以相互结合，并为我们提供一套丰富的 API，使得测试变得更加容易和清晰。在开发过程中，我们应该始终关注测试，保证我们的代码的质量和正确性。

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