接続されているReduxコンポーネントをテストする際のヒント

Question

下のコンポーネントを非常に基本的なものに貼り付けました。コンポーネントがマウントされると、基本的にはfetchMessageアクションが呼び出され、APIからメッセージが返されます。そのメッセージはmapStateToProps機能でstate.feature.messageと設定されます。

私はこのコンポーネントのテストを開始する場所を完全に失っています。使用してレンダリングする場合それは正しいmessageプロパティを表示したり、持っている）propsでfetchMessage機能が

3と呼ばれている）特徴成分が

2レンダリングされます）

1：私は、私はそれをテストしたいことを知っていますその

私が試したファイルは、以下のように設定してみましたが、試したすべてのエラーが発生したあと、繰り返しエラーが発生します。

私が間違っていることを誰かが正しい方向に向けることができますか？

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from './actions'; 

class Feature extends Component { 
    static propTypes = { 
    fetchMessage: PropTypes.func.isRequired, 
    message: PropTypes.string 
    } 

    componentWillMount() { 
    this.props.fetchMessage(); 
    } 

    render() { 
    return (
     <div>{this.props.message}</div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { message: state.feature.message }; 
} 

export default connect(mapStateToProps, actions)(Feature); 

テストファイル：

import configureStore from 'redux-mock-store'; 
import thunk from 'redux-thunk'; 
import { Provider } from 'react-redux'; 
import expect from 'expect'; 
import { shallow, render, mount } from 'enzyme'; 
import React from 'react'; 
import sinon from 'sinon'; 

import Feature from '../index'; 

const mockStore = configureStore([thunk]); 

describe('<Feature />',() => { 
    let store; 

    beforeEach(() => { 
    store = mockStore({ 
     feature: { 
     message: 'This is the message' 
     } 
    }); 
    }); 

    it('renders a <Feature /> component and calls fetchMessage',() => { 
    const props = { 
     fetchMessage: sinon.spy() 
    }; 

    const wrapper = mount(
     <Provider store={store}> 
     <Feature {...props} /> 
     </Provider> 
    ); 

    expect(wrapper.find('Feature').length).toEqual(1); 
    expect(props.fetchMessage.calledOnce).toEqual(true); 
    }); 
}); 

Answer 1

テスト接続は、コンポーネントの接続および未接続のバージョンのコンポーネント

使用別個の輸出を反応させます。

未接続コンポーネントを名前付きエクスポートとしてエクスポートし、既定のエクスポートとして接続します。

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from './actions'; 

// export the unwrapped component as a named export 
export class Feature extends Component { 
    static propTypes = { 
    fetchMessage: PropTypes.func.isRequired, 
    message: PropTypes.string 
    } 

    componentWillMount() { 
    this.props.fetchMessage(); 
    } 

    render() { 
    return (
     <div>{this.props.message}</div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { message: state.feature.message }; 
} 

// export the wrapped component as a default export 
export default connect(mapStateToProps, actions)(Feature); 

以下に示すように連結成分は、プロバイダコンポーネントに包まれなければならない覚えています。

ただし、接続されていないコンポーネントは、Reduxストアについて知る必要がないため、独立してテストできます。

テストファイル：

import configureStore from 'redux-mock-store'; 
import thunk from 'redux-thunk'; 
import { Provider } from 'react-redux'; 
import expect from 'expect'; 
import { shallow, render, mount } from 'enzyme'; 
import React from 'react'; 
import sinon from 'sinon'; 

// import both the wrapped and unwrapped versions of the component 
import ConnectedFeature, { feature as UnconnectedFeature } from '../index'; 

const mockStore = configureStore([thunk]); 

describe('<Feature />',() => { 
    let store; 

    beforeEach(() => { 
    store = mockStore({ 
     feature: { 
     message: 'This is the message' 
     } 
    }); 
    }); 

    it('renders a <Feature /> component and calls fetchMessage',() => { 
    const props = { 
     fetchMessage: sinon.spy() 
    }; 

    const wrapper = mount(
     <Provider store={store}> 
     <connectedFeature {...props} /> 
     </Provider> 
    ); 

    expect(wrapper.find('Feature').length).toEqual(1); 
    expect(props.fetchMessage.calledOnce).toEqual(true); 
    }); 
}); 

Answer 2

あなたのコンポーネントをテストするためにshallow()の代わりmount()を使用することができます。 shallow()メソッドはcomponentWillMount()ライフサイクルメソッドを呼び出すため、mount()を使用する理由はありません。 （免責事項：私はまだmount()で非常によくないです）

接続されているコンポーネントの場合、あなたはこのように、ストアオブジェクトを渡すことができます。

<connectedFeature {...props} store={store} /> 

そして、あなたはそれを動作させるために二回shallow()メソッドを呼び出す必要があります

const wrapper = shallow(<connectedFeature {...props} store={store} />).shallow()