React Firebase Enzyme 使用电子邮件和密码登录

时间:2021-01-25 00:30:30

标签: javascript reactjs firebase firebase-authentication jsx

基本上,我尝试使用酶测试使用电子邮件和密码提交 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(){}
    })   
 })
   


});

0 个答案:

没有答案