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 }) {

但是React中的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
  })

窥探onClick for Button - React-redux

1 个答案: