基本上,我尝试使用酶测试使用电子邮件和密码提交 firebase 登录。问题是我在提交表单后没有得到反馈。提交表单有效,但在那之后,我没有看到任何形式的状态错误消息或 setCurrentUser 值
登录.js
import React, { Component } from "react";
import {Form, Button } from 'react-bootstrap'
import {setCurrentUser} from "../redux/user.action";
import {connect} from 'react-redux/'
import {Alert} from 'react-bootstrap'
import {auth, database} from "../services/api";
const ref = database.ref('users')
export class Login extends Component {
state ={
email:"",
password: "",
show: false,
errorMessage: ""
}
setValue = (e) =>{
const {name, value} = e.target
this.setState({
[name] : value
})
}
onSubmit = async (e) =>{
e.preventDefault()
const {email, password} = this.state
try{
const response = await auth.signInWithEmailAndPassword(email, password)
const user = await ref.child(response.user.uid).once('value')
this.props.setCurrentUser(user.val())
}catch(error){
this.setState({
error: error.data,
show: true
})
}
}
render() {
const {email, password, show, errorMessage} = this.state
return (
<React.Fragment>
{show &&
<Alert variant="info" onClose={() => this.setState({ show: false})} dismissible>
<p>
{errorMessage}
</p>
</Alert>
}
<form onSubmit={this.onSubmit}>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control value={email} name='email'
onChange={this.setValue} type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control value={password} name='password'
onChange={this.setValue} type="password" placeholder="Password" />
</Form.Group>
<button className='login' variant="primary" type="submit">
Submit
</button>
</form>
</React.Fragment>
);
}
}
const mapDispatchToProps = {
setCurrentUser
}
export default connect(null, mapDispatchToProps) (Login)
Auth.test.js
import {shallow, mount} from 'enzyme'
import {Login} from "./login.component";
describe('handleSign', () => {
test('should return true', () =>{
const currentUserMock = jest.fn()
const loginFormWrapper = shallow(<Login setCurrentUser={currentUserMock}/>)
loginFormWrapper.setState({
email: 'admin@yahoo.com',
password: '11111111'
})
const button = loginFormWrapper.find('form')
button.simulate('submit', {
preventDefault(){}
})
})
});