即使我可以监视其他方法，也无法监视事件处理程序

我想使用 Jest/Jasmine/Enzyme 测试 React 中的事件处理程序。

MyComponent.js:

import React from 'react';
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.clickHandler = this.clickHandler.bind(this);
        this.otherMethod  = this.otherMethod .bind(this);
    }

    clickHandler() { this.otherMethod(); }
    otherMethod() {}

    render() { return <div onClick={this.clickHandler}/>; }
}
export default MyComponent;

MyComponent.test.js:

import React from 'react';
import {mount} from 'enzyme';
import MyComponent from './MyComponent';

it('should work', () => {
    const componentWrapper = mount(<MyComponent/>);
    const component = componentWrapper.get(0);

    spyOn(component, 'otherMethod' ).and.callThrough();
    spyOn(component, 'clickHandler').and.callThrough();

    componentWrapper.find('div').simulate('click');

    expect(component.otherMethod ).toHaveBeenCalled(); // works
    expect(component.clickHandler).toHaveBeenCalled(); // does not work
});

尽管我认为我正在同样地监视这两个组件方法，但其中之一（对于otherMethod）工作，而另一个（对于clickHandler） 才不是。我清楚地am呼叫clickHandler as otherMethod如果我没有的话就不会被叫到，但是toHaveBeenCalled没有被接走clickHandler不知何故。为什么？

我明白我真的不需要使用任何一个.bind(this) or .and.callThrough() on otherMethod但我同时使用这两种方法只是为了相同地对待这两种方法并将它们用于otherMethod实际上不应该有任何区别。

这另一个答案 https://stackoverflow.com/a/39392552/5218951指出我必须在将函数附加为侦听器之前监视该函数。如果这是我的问题，那么我不知道如何解决它：spyOn语法要求该方法是对象的属性 (component在这种情况下）但使用component需要事先安装MyComponent这迫使我首先附加监听器。

我的代码使用 React 可能是相关的（因此我包括reactjs作为一个问题标签）但不知何故我对此表示怀疑。

对于此类测试，常见的路径是在组件实例上调用处理程序方法，而不是模拟事件。

您可以确定onClickprop 是由 React 团队测试的，你可以检查的是当“他们”调用你的处理程序时会发生什么。

这还允许您使用浅层渲染，至少对我来说速度要快得多。您可以使用以下命令轻松获取实例的引用instance()包装器中的方法，然后您可以调用处理程序并监视您想要的任何内容。

const wrapper = mount(<MyComponent />)
const instance = wrapper.instance()
instance.clickHandler()
//assert whatever

事实上，可能将您的间谍附加到实例的方法（已经绑定）也可以达到目的。 :)

http://airbnb.io/enzyme/docs/api/ReactWrapper/instance.html http://airbnb.io/enzyme/docs/api/ReactWrapper/instance.html

希望能帮助到你！