React中容器的单元测试案例

如何解决React中容器的单元测试案例

我试图在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酶进行测试。

非常感谢您的回复。花了很多时间。预先感谢。