関数コンポーネントをmock化してunitテストを行いたい

Question

React+TypeScript+firebaseで作成しているアプリのユニットテストを行おうとしているのですが、テストしようとしているコンポーネントがFirebaseと何らかのやりとりをしている場合に、テストがうまくいかずFirebaseErrorとなります。

テストについていろいろと調べていたところ、APIなどの外部との通信を行うアプリをテストする場合、コンポーネントをモック化してテストコードの中にどの様なデータが帰ってくるかなどを予め記述しておいてテストを行うというのが良さそうだと気づきました。

しかしながらいろいろと調べても、自分の理解力が乏しいのか、うまくいく様なテストコードを記述することができなかったので、質問させていただきます。

実現したいこと

firebaseとの通信をするハンドラを含む関数コンポーネント内で様々なテストを行える様にしたい

質問

① API通信などを含むreactの関数コンポーネントをテストするときはどの様にmockすればいいのか

② そもそもmockするという考え方は間違っていて、別のやり方があるのかどうか

ソースコード

以下はLogin.tsxです。

export default function Login() {
  const classes = useStyles();
  const emailRef = useRef();
  const passwordRef = useRef();
  const { login }: any = useAuth();
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const history = useHistory();

  const inputEmail = useCallback(
    (event) => {
      setEmail(event.target.value);
    },
    [setEmail]
  );

  const inputPassword = useCallback(
    (event) => {
      setPassword(event.target.value);
    },
    [setPassword]
  );

  async function handleSubmit(e: any) {
    e.preventDefault();

    setError("");
    setLoading(true);
    return login(email, password)
      .then(() => {
        history.push("/");
      })
      .catch((error: any) => {
        setError("failed!!");
      })
      .finally(() => {
        setLoading(false);
      });
  }

  const onClickGuestButton = () => {
    setError("");
    setLoading(true);
    return login("[e-mail]", "password")
      .then(() => {
        history.push("/");
      })
      .catch((error: any) => {
        setError("failed!!");
      })
      .finally(() => {
        setLoading(false);
      });
  };

  return(
  {/*少し長いので省略しています。*/}
  )

以下はLogin.test.tsxです。

import * as React from "react";
import Login from "../Login";
import { configure, mount, shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
// import { Login as mockLogin } from "../Login";
import ReactDOM from "react-dom";

configure({ adapter: new Adapter() });

jest.mock("../Login", () => {
  return login("[e-mail]", "password"){
    return Promise.resolve(fakeUser)
  }
});

describe("Login", () => {

  it("should return currect user", () => {
    // const wrapper = shallow(<Login />);
    // expect(wrapper.find("button").length).toBe(2);
    const fakeUser = {
      username: "FakeMan",
      email: "[e-mail]",
      uid: "KN8qXkuYmPf2i9kvzC2mQylZQPo1",
    };
    jest.spyOn(global, "fetch").mockImplementation((): any =>
      Promise.resolve({
        json: () => Promise.resolve(fakeUser),
      })
    );
  });
});

jest.mock()でコンポーネントや関数などをモック化することができそうというのはわかったのですが、今回の場合どの様にすればいいのかわかりません。
また、Firebaseとの通信を行わないコンポーネントでテストを実行してみると、(当たり前ですが)FirebaseErrorは起こらず、普通にテストがpassしました。

このことから、Firebaseとの通信がテストに何らか影響しているのは確かだと思っています。
[Jest+TypeScript] クラスと関数のモック化
を参考にしてみましたが、結局よくわからず...

何かいい解決策はありますでしょうか？

Answer 1

コードを見やすくするため改めて。

まず jest.spyOn() というのは「特定」のオブジェクトに対してモックの差し替えを行います。オブジェクト A で使うあるモジュールから import してきた関数 f と オブジェクト B で使う同じモジュールから import してきた関数 f がある場合、jest.spyOn() にオブジェクト A とモック用の関数 g を渡すとオブジェクト A の関数は g になりますが、オブジェクト B の関数は f のままです。

それに対し jest.mock() は指定したモジュールをすべてモックで上書きします（なので今気づいたんですが jest.mock("../Login") としてしまうと Login コンポーネント自体がモックされてしまいますね）。いまモックにしたいのは react-use-auth だと思うので、

jest.mock('react-use-auth')

とすればよいでしょう。もしモックに値や関数を返してもらいたければ「jest hooks mock」などで検索するとよさそうな記事が出てくるので参考にすると良いと思います。

Answer 2

jest.spyOn(global, "fetch") というのは global （ブラウザーで言うと window）オブジェクトにある fetch という名前の関数が呼び出された時にその処理を横取りして処理を返しますよ、というのを意味しています。つまり fetch でデータを取得していないとモックの処理には差し替わりません。

話は変わってウェブ上からデータを取得する関数というかオブジェクトは fetch の他に XMLHttpRequest があります。以前は後者しかなかったのですが、使いづらいという経緯があったため前者が生まれました。

さて、実際にデータを取得してる部分はどこかといいますと useAuth() あたりかなと検討をつけてソースコードを読みに行ってきました。そうしたら案の定データの取得に fetch ではなく XMLHttpRequest を使っているライブラリが使われていました。

ではこのコードにどうやってどこにモックを差し込んでテスト可能にするかなんですが、それはずばり useAuth() そのものです。そこに何も処理をしないモックを差し込んで、useAuth() が正しく呼ばれたか確認すればテストは完了です。そもそもモックは正しいデータを返すとかはしなくてよく、ただ正しく呼ばれることを意識すればそれで OK なのです（値を返してくれるのはスタブというらしい）。

ただそうは言っても useAuth() が呼ばれて正しいデータを受け取ったと仮定してその結果が正しいかテストしたい欲求もあるかもしれません。やりたければ useAuth() のソースコードを読みに行って完璧なスタブを作って差し替えるのも面白いかもしれません。ですが実際問題としてそこまでテストをやる意味があるかと言われると間違いなくないです。

useAuth は幸いにしてテストがなされているようですのでそこは信頼してしまって、他の自分で書いたコードのぶんのテストを書くと良いんじゃあないんでしょうか。

Comments

[kobaryo04ysh]

回答ありがとうございます！説明不足でしたが、回答いただいた通り、contextを使ってuseAuthで、context内にあるfirebaseとやりとりする関数をimportして使っています。もしよかったら、具体的なコードを提示していただけないでしょうか？お願いします！