使用 Chai 和 Sinon.js 优化 UI 组件测试案例实现-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，测试是非常重要的环节。特别是在开发 UI 组件的过程中，我们需要通过测试保证代码的可靠性和稳定性。本文将介绍如何使用 Chai 和 Sinon.js 优化 UI 组件的测试案例实现。

Chai 是什么？

Chai 是一个能够让我们更加方便地对 JavaScript 进行断言的库。它可以与 Mocha、Jasmine 等测试框架一起使用，方便我们写出表意更加明确、维护更加方便的测试代码。

Chai 提供了三个不同的断言风格：expect、assert 和 should。不同的风格有不同的使用方法，下面我们将展开介绍。

expect 风格

expect 风格的写法比较简单，我们可以把期望的值和断言结合在一起，然后使用各种方法进行判断。例如：

const expect = chai.expect;

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

我们首先引入 chai 库后，将 chai 的 expect 方法绑定到本地变量中，然后在测试用例中使用它。在上述例子中，我们使用 expect 断言 [1,2,3].indexOf(4) 返回的结果应该为 -1，如果不是的话，测试用例就会给出错误提示。

assert 风格

assert 风格的写法则更加简短。

const assert = chai.assert;

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);
    });
  });
});

我们可以看到，使用 assert 风格只需要在 assert 对象上调用相应的方法即可。assert.equal 方法则是用来测试两个值是否相等。

should 风格

should 风格在写法上比较有趣。与前两种风格不同，should 风格使用了 Object.defineProperty 方法使得断言的值变成一个“语言模型”，可以使测试用例的写法更加符合口语逻辑。例如：

const should = chai.should();

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

可以看到，should 方法将 Object.defineProperty 应用到全局对象中，使得所有的对象都拥有 should 属性。在测试用例中只需要写出一个语言模型即可，而无需调用某个方法。

Sinon.js 是什么？

与 Chai 不同，Sinon.js 是一个专门用于测试即使代码的库。它可以帮助我们模拟函数调用、创建虚拟服务器以及对本地存储进行模拟，从而使得我们的测试用例更加全面和可靠。

Sinon.stub

Sinon.stub() 方法返回一个构造函数的方法。在测试用例中，它可以用来模拟一个函数的返回值，从而方便地测试程序的各个部分。例如：

const sinon = require('sinon');

describe('clickHandler', () => {
  let clickHandler, sandbox;

  beforeEach(() => {
    sandbox = sinon.createSandbox();
    clickHandler = {
      saveData: sinon.stub().returns('success'),
      updateData: sinon.stub().returns('updated')
    };
  });

  afterEach(() => sandbox.restore());

  it('should call saveData', () => {
    clickHandler.saveData();
    sinon.assert.calledOnce(clickHandler.saveData);
  });

  it('should call updateData', () => {
    clickHandler.updateData();
    sinon.assert.calledOnce(clickHandler.updateData);
  });
});

在这个例子中，我们首先引入 Sinon 库，并使用 createSandbox() 方法创建一个 Sinon 沙盒上下文。然后我们创建了一个 clickHandler 对象，其中的 saveData() 和 updateData() 方法都被仿真了。最后，我们编写两个测试用例，分别测试 clickHandler 对象中的 saveData() 和 updateData() 方法。

Sinon.spy

Sinon.spy() 方法用于在测试期间监控程序运行，并在测试期间记录所监控到的程序状态。例如：

const sinon = require('sinon');

describe('clickHandler', () => {
  let clickHandler, sandbox;

  beforeEach(() => {
    sandbox = sinon.createSandbox();
    clickHandler = {
      saveData: sinon.spy(),
      updateData: sinon.spy()
    };
  });

  afterEach(() => sandbox.restore());

  it('should call saveData', () => {
    clickHandler.saveData();
    sinon.assert.calledOnce(clickHandler.saveData);
  });

  it('should call updateData', () => {
    clickHandler.updateData();
    sinon.assert.calledOnce(clickHandler.updateData);
  });
});

我们可以看到，与 Sinon.stub() 方法相比，Sinon.spy() 方法可以记录程序运行期间的状态，从而方便我们对程序行为的分析和研究。

代码示例

下面是一个示例代码，通过使用 chai 和 sinon.js 并结合 React 和 Enzyme，实现了对 UI 组件的测试：

/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { expect } from 'chai';
import { mount } from 'enzyme';
import sinon from 'sinon';
import MyComponent from '../src/MyComponent';

describe('<MyComponent />', () => {
  it('should click the button', () => {
    const onClick = sinon.spy();
    const wrapper = mount(<MyComponent onClick={onClick} />);
    wrapper.find('button').simulate('click');
    expect(onClick.calledOnce).to.equal(true);
  });
});

在这个例子中，我们使用了 chai 的 expect() 方法断言 onClick() 方法被调用了。我们还使用了 Sinon.spy() 模拟了 MyComponent 上的 onClick() 方法，并在测试用例中监视了它的调用情况。

总结

本文介绍了使用 Chai 和 Sinon.js 优化 UI 组件测试案例实现的方法。通过结合 React 和 Enzyme，我们可以对 UI 组件进行全面和可靠的测试，提高代码质量和稳定性，为项目的后续开发提供保障。

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