Reduxのアクションでテストコンポーネントをスナップショット接続するにはどうすればよいですか？

Question

componentDidMount()ハンドラでreduxアクションをディスパッチする反応コンポーネントのスナップショットテストを行いたいとします。アクションは、Reduxのconnect()を介してコンポーネントに与えられます。

私はどのように行動を模擬すべきですか？

今、アクションはコンポーネントにインポートされます（下記のNewsfeed.jsを参照）。だから私はテストの模擬動作のためにそれを取り替えるのですか？

私は非同期アクションのためにredux-thunkを使用していますが、それはあまり重要ではありません。

APP /コンポーネント/ Newsfeed.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 

// An action that makes an async request to get data 
import { loadNewsfeedStories } from '../actions/Newsfeed'; 

class Newsfeed extends Component { 
    componentDidMount(){ 
    this.props.loadNewsfeedStories(); 
    } 

    ... 
} 

export default connect(state => ({ 
    stories: state.newsfeed.stories 
}), 
{ 
    loadNewsfeedStories 
})(Newsfeed) 

APP /試験/ Newsfeed.test.js

import React from 'react'; 
import { Provider } from 'react-redux'; 

// This creates a mockStore using my reducers and a saved JSON state. 
import { mockStore } from './MockState'; 

// The component to test 
import Newsfeed from '../components/Newsfeed'; 

test('Newsfeed matches snapshot',() => { 
    const wrapper = mount(
    <Provider store={mockStore}> 
     <Newsfeed /> 
    </Provider> 
); 

    expect(wrapper).toMatchSnapshot(); 
}); 

可能な解決策

1. 接続されていないコンポーネントをエクスポートし、すべての小道具&モックアクションを手動で渡します。 mockStore &プロバイダを使用するのと比べて、余分なコーディングが多くなります。また、接続されたコンポーネントをテストすることもありません。

2. Nockのようなものを使用しますか？ HTTPコールを傍受するように見えるので、ajaxリクエストは実際にはどこにも行きません。 https://github.com/mzabriskie/moxios

Answer 1

あなたは別の連結成分を輸出しようとすることができますが、嘲笑 "mapDispatchToProps" 機能付き - axiosについては

は、LIBと呼ばれるmoxiosあります。このようにして、何の行動も起こりません。

個人的には、コンポーネントをテストするとき。私は模擬減速機を書いていますが、これらは状態を変えるべきではなく、すべてのディスパッチされたアクションを記録するべきです（Jests模擬関数はこれに非常に便利です）。こうすることで、ボタンをクリックしたときに正しいアクションが送信されたかどうかをテストすることもできます。

Answer 2

ユニットテストを行う必要があるため、コンポーネントをテストし、小さい。

もう1つの選択肢は、ビジネスロジックの実行をcomponentDidMountで避けることです。
代わりの

componentDidMount(){ this.props.loadNewsfeedStories(); }

を書くあなたはReduxのモジュール（使用LIBSに依存します）に、このロジックを移動することができます。 sagaやredux-logicのようなライブラリなしでredux-thunkのみを使用する場合は、https://github.com/Rezonans/redux-async-connectを使用できます。

が、録音すべての派遣アクション

Reduxのサンクをテストするのは難しいです。あなたのモックディスパッチャーは、一連の関数だけを受け取ります。また、関数がloadNewsfeedStories()またはsomeAnotherThunk()によって作成されたかどうかを確認することはできません。