Jest and EnzymeでReactコンポーネントのライフサイクルメソッドをモックする方法は？全DOMレンダリング<a href="http://airbnb.io/enzyme/docs/api/mount.html" rel="nofollow noreferrer">here</a>ため

Question

酵素のドキュメントはSinonとライフサイクルメソッドをスパイの次の例が含まれています：冗談から、この使用してモックの機能と同等です

describe('<Foo />',() => { 

    it('calls componentDidMount',() => { 
    sinon.spy(Foo.prototype, 'componentDidMount'); 
    const wrapper = mount(<Foo />); 
    expect(Foo.prototype.componentDidMount.calledOnce).to.equal(true); 
    }); 
}); 

何？

私はCreate-React-Appを使用していますが、Jestで同じことが達成できればSinonは含まれません。

は、ここで私はテストが見えるように期待するものです：それはSinonで行うように

この場合

describe('<App />',() => { 

    it('calls componentDidMount',() => { 
    jest.fn(App.prototype, 'componentDidMount'); 
    const wrapper = mount(<App />); 
    expect(App.prototype.componentDidMount.mock.calls.length).toBe(1); 
    }); 
}); 

、App.prototype.componentDidMountは、同じ機能のスパイを参照していません。

モック関数の実際の動作に関するJestドキュメントは少し制限されています。私は、jest.fn（）がやっていることについて、hereというディスカッションを続けましたが、実際にはsinon.spy（）と等価ではないようです。

このテストをJestでどのように複製できますか？

Answer 1

jest.fnは実装のためのパラメータしか持っていないので、これはこの方法ではうまくいきません。しかし、もっと重要なのは、テストしたいオブジェクトの内部を偵察するべきではないということです。 Fooは、いくつかのプロパティを入れていくつかのものを戻すことができるブラックボックスと考えるべきです。次に、componentDidMountのようなFooという内部機能が呼び出されるかどうかをテストする必要はないことが分かります。重要なのはブラックボックスの出力だけです。

しかし、あなたが本当にとにかくテストにそれを行いたい場合：

const spy = jest.fn() 
const componentDidMount = Foo.prototype.componentDidMount 
Foo.prototype.componentDidMount = function(){ 
    spy() 
    componentDidMount() 
} 

Answer 2

冗談19の時点で、あなたはこれを行うことができます。

describe('<App />',() => { 
    it('calls componentDidMount',() => { 
    const spy = jest.spyOn(App.prototype, 'componentDidMount'); 
    const wrapper = mount(<App />); 
    expect(spy).toHaveBeenCalled(); 
    spy.mockReset(); 
    spy.mockRestore(); 
    }); 
}); 

jest.spyOnのような全ての通常利用可能な方法でmock functionを返します。 mockClear,mockResetおよびmockRestoreである。

に酵素を、またはcreateにreact-test-rendererを設定する前にスパイを設定して、作成されたインスタンスに偽装された機能の参照が設定されていることを確認してください。