は私が冗談/ジャスミン/酵素を使用してリアクトにイベントハンドラをテストする他の方法

Question

をスパイすることができていてもイベントハンドラをスパイすることはできません。

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：私は、私は全く同じ2つのコンポーネントのメソッドをスパイだと考えているという事実にもかかわらず

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のために）機能しません。私は明らかにです。clickHandlerをotherMethodと呼ぶことはありませんでしたが、私はそうでない場合は呼び出されませんでしたが、clickHandlerのためにtoHaveBeenCalledが選択されていません。どうして？

私は本当にotherMethodに.bind(this)または.and.callThrough()のいずれかを使用する必要はありませんが、私はちょうど同じように2つのメソッドを治療し、otherMethodにそれらを使用すると、実際にどんな違いを作るべきではないの両方を使用することを理解しています。私はリスナーとしてそれを取り付ける前に、機能をスパイする必要が

This other SO answer状態。これは私の問題であれば、私はそれを解決する方法がわからない：spyOn構文は、メソッドが（この場合はcomponent）の財産であることをオブジェクトが必要ですが、componentを使用してリスナーを付けるために私を強制的にMyComponentの前に取り付けが必要です最初。

私のコードではReactを使用しているので、質問タグとしてreactjsを含めることは関係ありますが、どういうわけか私はそれを疑っています。

Answer 1

この種のテストでは、イベントをシミュレートする代わりに、コンポーネントインスタンスのハンドラメソッドを呼び出すことが一般的な方法です。

onClick小道具がリアクションチームによってテストされていることを確かめることができます。何を確認できるかは、「彼ら」があなたのハンドラを呼び出すときに起こります。

これにより、少なくとも私にとってははるかに高速な浅いレンダリングを使用することもできます。あなたのラッパーでinstance()方法で簡単にインスタンスへの参照を取得することができ、あなたは、あなたが好きで、あなたのハンドラとスパイを呼び出すことができます。実際に

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

、おそらく（すでにバインドされている）instance`s方法にあなたのスパイを取り付けることにもトリックを行います。 :)

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

はそれが役に立てば幸い！