Mocha + Chai + Sinon 的测试生态-JavaScript中文网-JavaScript教程资源分享门户

前端测试是保证项目质量的关键步骤，但是写测试代码并不容易。在这篇文章中，我们将会介绍一种前端测试框架，它能够让你轻松写出高质量的测试代码，该框架就是 Mocha + Chai + Sinon。

Mocha

Mocha 是一个测试框架，它提供了一个高度灵活的测试运行器，而且可以很容易地测试异步代码。这些异步测试代码的处理方式与同步测试非常相似，这使得 Mocha 成为了在 Node.js 和浏览器中运行测试的流行框架之一。

Mocha 提供了一些有用的功能，例如测试定时器和比较错误输出，同时还有从命令行监视文件和自动化测试运行的功能。

下面是一个简单的 Mocha 测试示例：

describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal([1,2,3].indexOf(4), -1);
    });
  });
});

在这个示例中，我们测试了 Array 原型的 indexOf 方法，使用了 describe 和 it 两个函数。

describe 用于组织测试用例，它可以包含一个或多个 it 函数。it 函数声明要测试的单个测试用例，并使用 assert 变量执行实际测试。assert 变量是 Mocha 提供的一个 Chai 插件，用于验证测试结果的正确性。

Chai

Chai 是一个断言库，它是 Mocha 框架的一个扩展。它提供了多种不同的风格来编写表达式，这使得测试用例非常易于阅读和编写，同时使测试代码风格统一。

Chai 库支持两种基本的测试风格：BDD 和 TDD 风格。BDD 风格能够让你通过描述目标对象的行为来编写测试用例，而 TDD 风格则关注于事件的发生和响应。

下面是一个使用 BDD 风格的 Chai 测试示例：

// javascriptcn.com 代码示例
var assert = chai.assert;

it('When we add 1 and 2, the result should be 3', function() {
  var result = add(1, 2);
  assert.equal(result, 3);
});

it('When we subtract 1 from 2, the result should be 1', function() {
  var result = subtract(2, 1);
  assert.equal(result, 1);
});

在这个示例中，我们使用了 equal 断言来验证两个数字是否相等。assert 对象是一个全局变量，在这个示例中我们把它赋值给了 chai.assert。

Sinon

Sinon 是一个独立的 JavaScript 库，它帮助你编写可测试的代码。它包装了 JavaScript 中的许多基础组件，例如定时器、XHR 等，从而使其更易于在测试中使用。

Sinon 库提供了三种基本的工具：

spies
stubs
mocks

这些工具能够分别监视函数调用、代替函数实现，以及验证代码是否按照预期进行了交互。这些工具使得你能够轻松地验证异步代码是否正确，而不需要自己编写自定义异步测试的代码。

下面是一个简单的 Sinon 测试示例：

it('should call the callback function', function() {
  var mySpy = sinon.spy();

  doSomethingAsync(mySpy);

  sinon.assert.calledOnce(mySpy);
});

在这个示例中，我们使用了一个 Sinon spy 对象来监视异步方法的调用，并使用了一个 assert 函数来验证该方法是否已被调用。在大多数情况下，sinon.spy() 对象可以轻易地代替回调函数和 Promise。

示例

下面是一个完整的示例，它展示了如何使用 Mocha、Chai 和 Sinon 来编写简单的异步测试用例：

// javascriptcn.com 代码示例
describe('Calculator', function() {
  var calculator = new Calculator();

  describe('#add()', function() {
    it('should return the sum of two numbers', function() {
      var spy = sinon.spy();
      var a = 1, b = 2;
    
      calculator.add(a, b, spy);
    
      sinon.assert.calledOnce(spy);
      sinon.assert.calledWith(spy, a + b);
    });
  });
});

在这个示例中，我们首先创建了一个 Calculator 实例，然后在其中定义了 add 方法。该方法是一个异步方法，它需要一个回调函数作为最后一个参数。

我们将此回调函数传递给 Sinon.spy() 函数进行监视，并使用 Chai expect() 断言函数来验证回调函数是否被调用，以及其参数是否正确。

总结

Mocha、Chai 和 Sinon 框架被广泛用于前端测试中，它们提供了非常好的功能和易于理解的 API，可以帮助你为你的应用程序编写高质量的测试代码。在测试过程中，你会发现一些 bug，从而可以修复这些 bug，从而让你的项目更加健壮和稳定。

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