componenWillMount内で実行されるコンポーネントメソッドをテストすることができません

Question

私はAppというコンポーネントを持っていますが、このコンポーネントの内部にはfetchContentというメソッドがあります。このメソッドはcomponentWillMountメソッド内で呼び出され、コンポーネントをマウントするときに実際に呼び出されるかどうかを確認しようとしています。あなたが見ることができるように

export default class App extends Component { 
    fetchContent = (current) => { 
    ...do some stuff in here 
    } 

    componentWillMount() { 
    this.fetchContent('techcrunch'); 
    } 

、私は私のコンストラクタでコンポーネントにバインドするのではなく、矢印の機能を使用しています。以下は、私の方法です。クリックイベントのために呼び出されるメソッドでもあるため、バインドする必要があります。しかし

、私はこのコンポーネントで私のユニットテストを実行しようとすると、それは言ってエラーをスローするので、私は、仕事に私のスパイ/スタブを取得することはできません。以下は

TypeError: Attempted to wrap undefined property fetchContent as function

は私のユニットでありますテスト：

it('should fetch the content when component mounts',() => { 
    sinon.spy(App.prototype, 'fetchContent'); 
    wrapper = mount(<App />); 
    expect(wrapper.instance().fetchContent).to.have.been.calledOnce; 
}); 

ただし、私のメソッドがバインドされていないか、矢印機能を使用していない場合、正常に動作します。

どのようにそれを達成するためのアイデアですか？

Answer 1

まあ私はスタブを取得していない理由のあなたの実際の質問に答えることはありませんので、コメントするstackoverflowの50の担当者が必要です。

とにかく、もし私があなただったら、実際の実装であるthis.fetchContentをスタブしないで、そのプロパティが何をしているかをテストします。

だから、例がfetchContent場合には、このような何かをしていた。

fetchContent = (current) => { 
    this.setState({foo: current}); 
} 

私はそのstate.fooをテストするだろうが、あなたがfetchContent場合のコンポーネントのマウントに渡されたものを持っています。

Answer 2

目標は、適切な関数の呼び出しは、別の関数の副作用として起こることを確認している場合、私はこのようにそれに近づい好き：

const wrapper = shallow(<App />) 
const component = wrapper.instance() 

// either 
sinon.spy(component, 'fetchContent'); 
expect(wrapper.instance().fetchContent).to.have.been.calledOnce; 

// or 
const restore   = component.fetchContent 
component.fetchContent = jest.fn() 
const mock    = component.fetchContent 

component.componentWillMount() 

expect(mock).toHaveBeenCalled() 
container.fetchContent = restore 

代わりenzyme.mountを使用しての、あなただけの副作用をテストすることができますcomponentWillMountと信頼ライフサイクル・メソッドを適切に発動させるために反応します。