Reduxのダムコンポーネント機能ユニットテスト

Question

は、私は今、私が反応し-ReduxのmapStateToPropsとmapDispatchToProps経由を使用して再来と接続

LoginContainerのようなものをやっているなど、スマート/ダムコンポーネントと非常によく知っています。

次に、私はLoginComponentを持っていますが、これにはUIやものがあります。

「LoginComponent」のログインボタンをクリックすると、そこで関数を呼び出す必要があります。ですから、私は、LoginContainerから関数を渡して、LoginComponentでボタンがクリックされたときにそれを呼び出す方法があると思いますか？

しかし、このように、単体テストを行うときには、このボタン関数呼び出しの機能をダンプコンポーネントLoginComponentで嘲笑しなければなりませんか？

Answer 1

あなたは絶対に正しいと思います。 LoginContainerコンポーネントは、ユーザーがログインボタンをクリックしたときに、実行したい機能を提供する必要があります。私の例を参照してください。

LoginContainer

import { connect } from 'react-redux' 

import Login from '../components/login' 
import { initiateLoginRequest } from '../actions/login' 

const LoginContainer = connect(null, { initiateLoginRequest })(Login) 

export default LoginContainer 

注：を私が代わりに機能のconnect()の2番目のパラメータとしてオブジェクトを提供しています。あなたはこれについてreduxのドキュメントで読むことができます。

だから今、私のログイン・コンポーネントは、アクションをディスパッチする機能に渡されたものを利用することができます：

<Button 
    raised 
    primary 
    label="Login" 
    onClick={this.props.initiateLoginRequest()} 
/> 

このボタンは、私のコンポーネントrender()方法のどこかに住んでいます。

このようなプレゼンテーションコンポーネントをテストする場合は、Enzymeをご覧ください。酵素は、あなたがこのようなテストを書くことができますリアクトのためのJavaScriptのテストユーティリティです：

import expect from 'expect' 
import React from 'react' 
import { shallow } from 'enzyme' 
import { Button } from 'react-toolbox/lib/button' 

import Login from '../../src/components/login' 

function setup() { 
    const props = { 
    initiateLoginRequest: expect.createSpy() 
    } 

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

    return { 
    props, 
    wrapper 
    } 
} 

describe('components',() => { 
    describe('Login',() => { 
    describe('Login Button',() => { 
     it('should dispatch the proper action ',() => { 
     const { wrapper, props } = setup() 
     expect(props.initiateLoginRequest.calls.length).toBe(0) 
     wrapper.find(Button).at(1).simulate('click') 
     expect(props.initiateLoginRequest.calls.length).toBe(1) 
     }) 
    }) 
    }) 
}) 

基本的にあなたは、スパイを作成し、その小道具を経由してコンポーネントにそれを渡し、その後、クリックイベントをシミュレートします。次に、メソッドが実際に呼び出されたことをテストでチェックインできます。