间谍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 
    })