Question

我需要模拟 useLogin 钩子，因为它包含引发错误的逻辑。稍后我将单独测试它。 UseLogin 返回连接新用户到 firebase 的加载标志和登录函数。

import useLogin from "../../../hooks/useLogin";

export default function Login({ register, handleSubmit }) {
  const [loading, login] = useLogin();

  return (
    <Form onSubmit={handleSubmit(login)}>
    {...other components}
    <Form>
  );
}

使用登录钩子

import { useState } from "react";
import { useHistory } from "react-router";
import { useModalContext } from "../../context";

import { firebase } from "../../libs/firebase";

export default function useLogin() {
  const [loading, setLoading] = useState(false);
  const [, { showErrorModal }] = useModalContext();
  const history = useHistory();

  function login({ email, password }) {
    setLoading(true);
    firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then(() => {
        setLoading(false);
        history.push("/");
      })
      .catch(() => {
        setLoading(false);
        showErrorModal("User not found");
      });
  }

  return [loading, login];
}

Answer 1

您应该尽可能避免模拟自己的组件，因为如果更改组件代码，您将需要同时维护组件和模拟。您仍然可以对此进行测试并测试隔离的 useLogin 钩子，以测试所有不同的代码分支等。

建议在访问外部世界并发出 API 请求时使用一个库，该库允许您模拟它们而不会受到干扰。 nock 或 Mock Service Worker 之类的库可以让您做到这一点，这样您就可以avoid mocking fetch。

也就是说，如果你需要模拟这个，你可以模拟 firebase 库来返回任何需要的东西。您可以使用常规 Jest 模拟来实现，或者尝试使用此 firebase-mock 库，以防您需要模拟更多 Firebase 功能和 here you can see how it integrates with Jest。

创建您自己的自定义模拟可能是更快的选择，如果您不需要模拟其他任何东西，它也可能是最佳选择。您可以在此处看到自定义 Firebase 模拟的示例：Mock implementation of firebase auth methods after mocking the firebase module

模拟反应自定义钩子

1 个答案: