Question

我有一个带有几个方法的React组件类 -

var testClass = React.createClass({
testMethod: function(){//do something
}
componentDidMount: function(){
    this.testMethod();
}
render: function() {
    ...
}
});

我正在尝试使用jasmine添加单元测试

import TestClass from './testClass';

describe('test functions', () => {
'use strict';

 spyOn(TestClass.prototype, 'testMethod');
 it('test calls testMethod', () => {
    component = TestUtils.renderIntoDocument(<TestClass />);
    expect(TestClass.prototype.testMethod).toHaveBeenCalled();
});

我可以在调试器中看到testMethod实际上已被调用，但jasmine报告＆＃34;预期的间谍testMethod被调用。＆＃34;

Answer 1

React v0.14.2，createClass维护__reactAutoBindMap中已定义方法的对象映射，并重用此映射将方法重新绑定到组件的私有构造函数中的组件。

可以通过将地图重置为空对象，强制构造函数跳过此地图并使用替换间谍，来在测试中解决此问题。

function mockComponentMethod(component, method) {
   const boundMethod = method.bind(component)
   component.prototype.__reactAutoBindMap = {};
   component.prototype[method.name] = boundMethod;

   return boundMethod;
}

检查间谍是否被调用的测试可以编写如下：

const testMethodSpy = spyOn(TestClass.prototype, 'testMethod');
mockComponentMethod(TestClass, testMethodSpy);
expect(testMethodSpy).toHaveBeenCalled();

Jasmine to spyon React组件的方法

1 个答案: