0

我正在尝试在 React 中编写容器的测试用例。但我被困在表单提交案例中。我无法在我的组件中传递操作。这是我的容器。

import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Button from '@material-ui/core/Button'
import TextField from '@material-ui/core/TextField'
import isEmpty from 'lodash/isEmpty'

import { getLoggedInUser } from '../../api/user.api'

const Authenticate = (props, { actions, history, user }) => {
  const [username, setUsername] = useState('shubhra.vyas')
  const [password, setPassword] = useState('1234')

  useEffect(() => {
    if (!isEmpty(user)) {
      history.push('/dashboard')
    }
  }, [user])

  let login = e => {
    e.preventDefault()
    actions.getLoggedInUser({ username, password })
  }

  return (
    <div>
      <form onSubmit={login}>
        <div>
          <TextField
            id='userName'
            label='User Name'
            type='text'
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div>
          <TextField
            id='password'
            label='Password'
            type='password'
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

        <Button variant='contained' type='submit' color='primary'>
          Login
        </Button>
      </form>
    </div>
  )
}

const mapStateToProps = (state) => {
  return {
    user: state.user
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators(
      {
        getLoggedInUser,
      },
      dispatch,
    ),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Authenticate)

我正在使用酶、redux-thunk、redux-mock-store 进行测试。

您的回复将不胜感激。这花了很多时间。提前致谢。

4

0 回答 0