間諜onClick按鈕 - React-redux

Question

我試圖讓這種形式第一次工作，只是想知道我的onclick至少工作。我想注入一個間諜來替換我的dispatchToProps引用的處理程序。

因此，換句話說，我想替換此：

AsyncActions.login 

與loginSpy

我不能只是做button.props().login = loginSpy因爲道具都是在這一點不變。我得到TypeError: Can't add property login, object is not extensible

那麼有沒有一種方法可以通過ES6類，特別是ES6反應組件通過構造函數或類似的東西來重構？

我知道你可以做{prop1, prop2}作爲參數，以無狀態的功能，例如：

function FieldGroup({ id, label, help, ...props }) { 

但什麼ES6類的反應是？

測試

it.only('can log in successfully', async() => { 
     const container = shallow(<LoginContainer store={store} />), 
     loginContainer = shallow(<LoginContainer store={store} />), 
     login = loginContainer.dive().find(Login), 
     loginForm = login.dive().find(LoginForm), 
     loginFormLogin = await loginForm.props().login(), 
     button = loginForm.dive().find('.ft-login-button'), 
     loginSpy = spy() 

     button.props().login = loginSpy 
     button.simulate('click') 

     expect(loginSpy.calledOnce).to.be.true 
    }) 

集裝箱

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

import * as AsyncActions from '../actions/User/UserAsyncActions' 
import Login from '../components/Login/Login' 

class LoginContainer extends Component { 
    componentWillMount(){ 
    // const requested = this.user.requested 
    } 
    render(){ 
    return(<Login login={this.props.login} />) 
    } 
} 

const mapStateToProps = state => { 
    return { 
    requesting: state.user.requesting, 
    token: state.user.token, 
    session: state.user.session 
    } 
} 

export const mapDispatchToProps = { 
    login: AsyncActions.login 
} 

export { Login } 
export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer) 

LoginForm的

import React, { Component } from 'react' 
import { Button, FormControl, FormGroup, ControlLabel, PageHeader } from 'react-bootstrap' 

class LoginForm extends Component { 
    render(){ 
    return (
     <div className='ft-login-form'> 
     <PageHeader className='ft-header'>Login</PageHeader> 
     <form> 
      <FormGroup controlId="formBasicText" > 
      <ControlLabel>Email</ControlLabel> 
      <FormControl 
       bsSize="small" 
       className="ft-username" 
       componentClass="input" 
       placeholder="Enter mail" 
       style={{ width: 300}} 
       type="text" 
      /> 
      <ControlLabel>Password</ControlLabel> 
      <FormControl 
       bsSize="small" 
       className="ft-password" 
       componentClass="input" 
       placeholder="Enter Password" 
       style={{ width: 300}} 
       type="text" 
      /> 
      </FormGroup> 
      <Button 
      className='ft-login-button' 
      onClick={this.props.login} 
      type='submit'>Login</Button> 
     </form> 
     </div>) 
    } 

} 

export default LoginForm 

Answer 1

你應該呈現淺LoginForm代替LoginContainer和簡單地傳遞loginSpy爲道具，以LoginForm測試按鈕...

it.only('can log in successfully', async() => { 
     const loginSpy = spy(), 
     loginForm = shallow(<LoginForm login={loginSpy} />), 
     button = loginForm.dive().find('.ft-login-button') 

     button.simulate('click') 

     expect(loginSpy.calledOnce).to.be.true 
    })