我正在尝试在 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 进行测试。
您的回复将不胜感激。这花了很多时间。提前致谢。