React酵素小道具がマウントにセットされていません

Question

私はチャートをレンダリングして何らかの操作を行うHOCの単体テストを書いています。チャートは、データベースから取得し、レデックスストアに格納されたデータを使用して生成されます。テストの目的のために、私は偽のデータストアを作成しましたが、グラフの読み込みデータはcomponentDidMountで発生し、小道具の値をチェックすることによって実行されます。だから、次のように私のコードは次のとおりです。

... 
ComponentDidMount() 
{ 
    console.log(this.props.getData); 

    if (this.props.getData === "YES") 
     this.props.loadData(); 
} 
... 

を、次のように私のユニットテストのコードは次のとおりです。

... 
const mockStore = configureStore([thunk]); 
let fakeStore = mockStore({...}); 

it("loads data"), function() { 
    let store = fakeStore; 
    const options = { 
     context: {store}, 
     childContextTypes: {store: PropTypes.object.isRequired}, 
    }; 
    const mounted = mount(<Component getData="YES"/>, options); 
    console.log(mounted.props()); 
    mounted.instance().componentDidMount(); 
} 
... 

問題は、私はときに、コンポーネント小道具が設定されていない見ることができるにconsole.logを使用していますいくつかの値を指定しても、componentDidMountが自動的に実行されますが、そのプロップは直後です。関数を呼び出そうとすると、実行されませんが、なぜ正しく表示されなかったのかを示すメッセージは表示されません。

誰かに助言してもらえますか？

Answer 1

sinon libraryを使用して外部対話をモックすることができます。次に、コンポーネントのレンダリング時に擬似相互作用が呼び出されているかどうかを確認します。あなたが書いているのは、終わりから終わりまでのテストではなく単体テストです。だからそれはこのようにすべきです。

import React from 'react' 
import YourComponent from 'components/YourComponent' 
import { shallow } from 'enzyme' 
describe('(Component) YourComponent',() => { 
    let _props, _spies, _wrapper 

    beforeEach(() => { 
    _spies = {} 
    _props = { 
     prop1: 'value1', 
     prop2: 'value2', 
     ... 
     getData : (_spies.getData = sinon.spy()), 
    } 
    _wrapper = shallow(<YourComponent {..._props} />) 
    }) 


    it('Should trigger the `getData` callback when mounted',() => { 
    _spies.getData.should.have.been.called 
    }) 

}) 

これが役に立ちます。ハッピーコーディング！