Question

我正在测试的函数内创建一个jQuery对象。我需要模拟prop方法调用。

我该怎么做？我正在使用Jest。我也曾尝试过与Sinon合作，但无法正常工作。

这是我的方法：

import $ from 'jquery';

export function myFunc(element) {
  var htmlControl = $(element);
  var tagName = htmlControl.prop('tagName');
}

Answer 1

这是使用sinonjs的单元测试解决方案：

index.ts：

import $ from 'jquery';

export function myFunc(element) {
  var htmlControl = $(element);
  var tagName = htmlControl.prop('tagName');
}

index.spec.ts：

import proxyquire from 'proxyquire';
import sinon from 'sinon';
import { expect } from 'chai';

describe('myFunc', () => {
  it('should mock prop() method', () => {
    const el = {};
    const propStub = sinon.stub().returnsThis();
    const jqueryStub = sinon.stub().callsFake(() => {
      return {
        prop: propStub
      };
    });
    const { myFunc } = proxyquire('./', {
      jquery: jqueryStub
    });
    myFunc(el);
    expect(jqueryStub.calledWith(el)).to.be.true;
    expect(propStub.calledWith('tagName')).to.be.true;
  });
});

覆盖率100％的单元测试结果：

 myFunc
    ✓ should mock prop() method (156ms)


  1 passing (161ms)

---------------|----------|----------|----------|----------|-------------------|
File           |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
---------------|----------|----------|----------|----------|-------------------|
All files      |      100 |      100 |      100 |      100 |                   |
 index.spec.ts |      100 |      100 |      100 |      100 |                   |
 index.ts      |      100 |      100 |      100 |      100 |                   |
---------------|----------|----------|----------|----------|-------------------|

源代码：https://github.com/mrdulin/mocha-chai-sinon-codelab/tree/master/src/stackoverflow/57461604

在要测试的函数内部创建的对象上模拟jQuery方法调用

1 个答案: