React testing：接続した（redux）コンポーネントのインスタンスに到達するにはどうすればいいですか？

Question

接続コンポーネントとしてエクスポートされているコンポーネントのメソッドをテストできるようにするため、そのコンポーネントのインスタンスに到達する必要があります。

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent); 

このインスタンスには問題があります。

Answer 1

私が取るアプローチは、MyComponent,mapStateToProps、およびmapDispatchToPropsのユニットテストを作成することです。 MyComponentのユニットテストでは、あなたが探していることを達成することができます。

Reduxによる統合テストは、将来のアップグレードが機能しているかどうかを判断するのに役立ちますが、コンポーネントのメソッドが期待どおりに機能しているかどうかを判断するためにReduxでアプリケーションを完全に起動する必要はありません。

Answer 2

最も単純なオプションは、接続されていないコンポーネントをエクスポートし、ストアから取得する小道具を渡すテストです（基本的にはmapStateToPropsを迂回します）。

もう1つの方法は、接続されたコンポーネントのテストを作成することです。この場合、Providerにラップし、初期状態にして、ストア自体から情報を取得する必要があります。 jestであることを行うヘルパーの一例は次のようになります。

import React from 'react' 
import renderer from 'react-test-renderer' 
import { Provider } from 'react-redux' 

import configureMockStore from 'redux-mock-store' 

const fullRender = (jsx, state = {}) => { 
    const store = configureMockStore([](state) 
    const component = renderer.create(
    <Provider store={store}> 
     {jsx} 
    </Provider> 
) 

    return { store, component } 
} 
export default fullRender 

これは（サンクなどなど）の状態でミドルウェアを含むように、より現実的な設定を使用するように拡張またはも考慮にルーティングを取ることができます。

import React from 'react' 
import { fullRender } from '../../test' 
import Header from './Header' 

describe('components',() => { 
    let state = { a: { b: 3 } } 
    describe('Header',() => { 
    it('renders correctly',() => { 
     const { component } = fullRender(<Header />, state) 
     expect(component.toJSON()).toMatchSnapshot() 
    }) 
    }) 
}) 

あなたが備品としてあなたのテストの「スナップショット」を格納し、同様にあなたのテストにそれを養うことができます。そして、あなたは（再びjestを使用して）このようなテストを構築することができます。