javascript - 如何为在类中定义为方法的 fetch 函数编写模拟 fetch 函数？

Question

如何为下面的代码编写一个模拟提取函数，在输入用户名/密码并单击具有“onClick()”的登录按钮时调用一个类方法 login() - 运行并进行提取调用到 API 端点？

我想使用 Jest 编写一个模拟获取函数，以便在单击登录按钮时获取 JWT 令牌。我该怎么做？我已经尝试了很多相同的搜索，但没有找到任何具体的东西！

下面是代码

import React, { Component } from 'react';
import './Form.css';
import { Redirect } from 'react-router-dom';
import { store } from '../../store';
import { LOGIN } from '../../constants/actionTypes';
import { connect } from 'react-redux';
import Spiiner from '../Spiiner';
import { showLoader } from '../../actions';
import { hideLoader } from '../../actions';

interface IProps {
  login: any;
  dispatch: any;
}

interface IState {
  username: string;
  password: string;
}

export class Login extends Component<IProps, IState> {
  constructor(props: any) {
    super(props);

    this.state = {
      username: '',
      password: '',
    };
  }

  componentDidMount() {
    this.storeCollector();
  }

  storeCollector() {
    let localStore = localStorage.getItem('login');
    if (localStore) {
      store.dispatch({ type: LOGIN, payload: { isLoggedIn: true } });
    }
  }

  handleUsernameChange = (event: any) => {
    this.setState({
      username: event.target.value,
    });
  };

  handlePassword = (event: any) => {
    this.setState({
      password: event.target.value,
    });
  };

  login() {
    this.props.dispatch(showLoader());
    var myHeaders = new Headers();
    myHeaders.append('Content-Type', 'application/json');

    var raw = JSON.stringify({
      email: this.state.username,
      password: this.state.password,
    });

     fetch('https://reqres.in/api/login', {
      method: 'POST',
      headers: myHeaders,
      body: raw,
      redirect: 'follow',
    })
      .then((response) => response.text())
      .then((result) => {
        this.props.dispatch(hideLoader());
        if (
          result !== '{"error":"user not found"}' &&
          result !== '{"error":"Missing email or username"}'
        ) {
          localStorage.setItem(
            'login',
            JSON.stringify({
              token: result,
            })
          );
          store.dispatch({ type: LOGIN, payload: { isLoggedIn: true } }); 
        } else {
          store.dispatch({ type: LOGIN, payload: { isLoggedIn: false } });
        }
      })
      .catch((error) => {});
  }

  render() {
    let loginPage = (
      <div className="form">
        <form className="form-signin">
          <div className="text-center mb-4">
            <img
              className="mb-4"
              src="/docs/4.5/assets/brand/bootstrap-solid.svg"
              alt=""
              width="72"
              height="72"
            ></img>
          </div>

          <div className="form-label-group">
            <input
              type="email"
              id="inputEmail"
              className="form-control"
              placeholder="Email address"
              value={this.state.username}
              onChange={this.handleUsernameChange}
            />{' '}
            <br></br>
          </div>

          <div className="form-label-group">
            <input
              type="password"
              id="inputPassword"
              className="form-control"
              placeholder="Password"
              value={this.state.password}
              onChange={this.handlePassword}
            />
          </div>

          <button
            className="btn btn-lg btn-dark"
            type="button"
            onClick={() => {
              this.login();
            }}
          >
            Sign in
          </button>
        </form>
        <a href="">
          <img
            id="img"
            src=""
            alt=""
          />
        </a>
        <Spiiner />
      </div>
    );

    return (
      <div>
        {!this.props.login ? <div>{loginPage}</div> : <Redirect to="/search" />}
      </div>
    );
  }
}

interface RootState {
  login: any;
}

const mapStateToProps = (state: RootState) => {
  return {
    login: state.login.isLoggedIn,
  };
};

export default connect(mapStateToProps)(Login);
export const loginFunc = Login.prototype.login;

标签： javascriptreactjstypescriptreact-reduxjestjs