React.js和茉莉花间谍

时间:2017-04-28 19:03:54

标签: unit-testing reactjs jasmine reactjs-testutils

使用基本的test-utils和jasmine进行单元测试。

你如何监视反应组件内的函数?

test.js:

class Test extends React.Component {
  handleClick() {
    // Do something
  }

  render() {
    return (
      <div className="test-class" onClick={this.handleClick}>Test</div>
    );
  }
}

const React = require('react-with-addons');
const RequireJsTest = require('requirejs-test');
const Utils = React.addons.TestUtils;
const Test = require('./test');

describe('test', () => {
  it('should test', function() {
    const test = Utils.renderIntoDocument(<Test/>);
    const el = Utils.findRenderedDOMComponentWithClass(test, 'test-class');
    spyOn(test, 'handleClick');
    Utils.Simulate.click(el);

    expect(test.handleClick).toHaveBeenCalled();
  });
});

我收到以下错误:

Expected spy handleClick to have been called. (1)

有什么想法吗?谢谢!

1 个答案:

答案 0 :(得分:1)

说实话,我还没有测试过反应应用,但是试试method(描述块中的最后一个测试),我刚才在enzyme自述文件中找到了。

我认为你应该在渲染组件之前监视组件类原型方法:

spyOn(Test.prototype, 'handleClick');
// and then
expect(Test.prototype.handleClick).toHaveBeenCalled();