2017-06-08 3 views
0

良い一日の人々!のは、私は、このコンポーネントのクラスを持っているとしましょう:Jest&Enzymeの接続成分の状態を取得

@connect(
 
    state =>({ 
 
    someState: state.oneLevel.response 
 
    }) 
 
) 
 
export default class SomeClass extends React.Component{ 
 
constructor(props){ 
 
    super(props) 
 
    this.state ={ 
 
    someState: [], 
 
    isLoading: false, 
 
    isLoaded: false 
 
    } 
 
} 
 
}

このコンポーネントは、今、私が割り当てられてきたSuperAgent

componentDidMount(){ 
 
var url = 'someapi.com/somedatatofetch' 
 
this.setState({isLoading: true}) 
 
request.get(url) 
 
.set('some headers 1', 'somevalue') 
 
.set('some headers 2', 'somevalue') 
 
.then((success) => { 
 
     this.setState({ 
 
     isLoading: false, 
 
     isLoaded: true 
 
     }) 
 
}) 
 
}

と非同期呼び出しを持っていますこのコンポーネントのユニットテストを作成して、正常に変更されたかどうかをチェックするその状態を編集したかどうかを判断する。 、私の質問がある TypeError: Cannot read property 'isLoaded' of null

です:私は、応答は次のようになるコードでなどDOMレンダラを処理するための私のテストフレームワークと酵素として

describe("Network Functionality",()=>{ 
 
    const wrapper = mount(<Provider store={store}><SomeComponent /><Provider>) 
 
    
 
    it("Should change the isLoaded state to true",()=>{ 
 
    const expectedState = true 
 
    //mocking with supertest 
 
    return mockApi().get('testapi.com/someroute') 
 
    .set('some-headers1', 'somevalue') 
 
    .set('some-headers2', 'somevalue') 
 
    .then((success) => { 
 
    expect(wrapper.state(isLoaded)).toEqual(expectedState) 
 
    }) 
 
    } 
 
})

を冗談を使用していますとにかく接続されたコンポーネントを使用して状態を取得するには? 私はConnectedComponentsと{Components} としてコンポーネントをエクスポートしようとしましたが、完璧に動作しますが、接続されたコンポーネントを使用したいと思います。

なぜ接続されたコンポーネントを使用したいのですか?私のアプリケーションのすべてのコンポーネントは、このスキームを使用して構築されているため、ConnectedComponentsや{コンポーネント}としてエクスポートするのは不可能です。アプリケーション内に非常に多くのコンポーネントがあり、それによって多くの問題が発生する可能性があります。

答えて

0

私はこの問題は、ノードコンポーネントがconsole.log()の場合は wrapper.find('SomeComponent')を使用して検出され、状態とともにコンポーネントノードが生成されることがわかります。あなたは、私がSomeComponent検索結果を格納するための別の変数を作ってるんだ見ることができるので、これは私の最終的なコード

describe("Network Functionality",()=>{ 
 
    const wrapper = mount(<Provider store={store}><SomeComponent /><Provider>) 
 
    
 
    it("Should change the isLoaded state to true",()=>{ 
 
    const expectedState = true 
 
    var somecomponent = wrapper.find("SomeComponent") 
 
    //mocking with supertest 
 
    return mockApi().get('testapi.com/someroute') 
 
    .set('some-headers1', 'somevalue') 
 
    .set('some-headers2', 'somevalue') 
 
    .then((success) => { 
 
    expect(somecomponent.getNode().state.isLoaded)toEqual(expectedState) 
 
    
 
    }) 
 
    } 
 
})
です。最後に、getNode()関数を呼び出して、その状態とともに SomeComponentを取得しました。 これがベストプラクティスかどうかは分かりませんでしたが、うまくいきます。これを行う良い方法があれば、私はいくつかのフィードバックthoを愛するだろう

関連する問題