[レスポンス]Redux-Thunkユニットのテスト

以下のブログを参考にしました!
https://decembersoft.com/posts/how-to-unit-test-redux-thunks/

背景

TOYプロジェクトをやることになった時に一緒にUnit Testingを練習する
公文書では、Redux ToolKitライブラリを使用してテストを説明する.まだRTKを使う準備ができていないので、勉強のためにあちこち見ています...テストのせいで、私はもう精神的に崩壊して、見えなくなったので、まず私が以前やった方法と似たような方法でテスト方法を探すことにしました.

n/a.環境

ES6+

React

Jest

に道を教える

STEP 1

依存性を探る。

const apiUrl = "http:/localhost:3001/word";
export const getWords = () => async (dispatch) => {
  dispatch(getWordsAction());
  try {
    const res = await axios.get(apiUrl);
    dispatch(getWordsSuccessAction(res.data));
  } catch (error) {
    dispatch(getWordsErrorAction(error));
  }
};

上は簡単な形式のヤンク関数です.
まず、テストは、データベース接続、API呼び出し、非同期関数などの外部モジュールに依存することはできません.だから最初に.
依存性を探る.対応するsink関数では、axiosが非同期API呼び出しとして使用される.axiosは外部に依存するモジュールと言える.

STEP 2

予想される結果を定義します。

axiosは主にREST API呼び出しに用いられ、promiseを返す関数である.axiosの結果によれば,ヤング関数の内部状態は成功(Resolve),失敗(Rejected)に分けられる.だからテストも.
呼び出し(通常はAPI呼び出しステータス.Pending)、成功または失敗です.

describe("getWords Thunk함수 테스트", () => {
  it("getWords Thunks함수를 호출합니다.", () => {});

  describe("getWords Thunk함수가 성공 했을떄 ", () => {});
  describe("getWords Thunk함수가 실패 했을때 했을떄 ", () => {});
});

STEP 3

依存モジュールをテストライブラリでカプセル化します。

私は最も速く、最も簡単で、最もよく知っている方法でやっています.関連ブログとは少し違います.Googlingにより,axiosをシミュレートする方法を見つけ,jest.mockはaxiosを簡単にシミュレートできるようにした.

jest.mock("axios");

axiosモジュールをシミュレートした.次に、axiosモジュールが返す成功値と失敗値をシミュレートします.

describe("getWords Thunk함수 테스트", () => {
  it("getWords Thunks함수를 호출합니다.", () => {});

  describe("getWords Thunk함수가 성공 했을떄 ", () => {
    const res = {
      data: [
        {
          word: "Korea",
          meaning: "Seoul",
        },
        {
          word: "Korea",
          meaning: "Seoul",
        },
        {
          word: "Korea",
          meaning: "Seoul",
        },
      ],
    };
    beforeEach(() => {
      axios.get.mockResolvedValue(res);
    });
  });
  describe("getWords Thunk함수가 실패 했을때 했을떄 ", () => {
    const error = new Error("My Error");
    beforeEach(() => {
      axios.get.mockRejectedValue(error);
    });
  });
});

axios関数がシミュレートされているため、axiosは、各テストを返す前に、戻るべき値を予め決定する.

が成功した場合axiosデータを取得します.このシェイプはjson値を予想します.axios.get.mockResolvedValueが成功したときに返される値をシミュレートします.

失敗時axios.get.mockRejectedValueに失敗したときに返される値をシミュレートします.

STEP 4

テストの作成

describe("getWords thunk test", () => {
  describe("dispatch getWords", () => {
    beforeEach(() => {
      const data = [
        {
          word: "Korea",
          meaning: "Seoul",
        },
        {
          word: "Korea",
          meaning: "Seoul",
        },
        {
          word: "Korea",
          meaning: "Seoul",
        },
      ];
      axios.get.mockResolvedValue(data);
    });
    it("dispatch getWords actions", async () => {
      const dispatch = jest.fn();
      await getWords()(dispatch);
      expect(dispatch).toHaveBeenCalledWith(getWordsAction());
    });
  });

  describe("dispatch getWords success", () => {
    const res = {
      data: [
        {
          word: "Korea",
          meaning: "Seoul",
        },
        {
          word: "Korea",
          meaning: "Seoul",
        },
        {
          word: "Korea",
          meaning: "Seoul",
        },
      ],
    };
    beforeEach(() => {
      axios.get.mockResolvedValue(res);
    });
    it("dispatch getWords actions", async () => {
      const dispatch = jest.fn();
      await getWords()(dispatch);
      expect(dispatch).toHaveBeenLastCalledWith(
        getWordsSuccessAction(res.data)
      );
    });
  });

  describe("dispatch getWords fail", () => {
    const error = new Error("My Error");
    beforeEach(() => {
      axios.get.mockRejectedValue(error);
    });
    it("dispatch getWords actions", async () => {
      const dispatch = jest.fn();
      await getWords()(dispatch);
      expect(dispatch).toHaveBeenLastCalledWith(getWordsErrorAction(error));
    });
  });
});

Thunk関数では、dispatchで正しく呼び出されたアクションを決定できます.
どのパラメータと一緒に送信するかを知る必要があるからです.dispatch = jest.fn()によってdispatch関数をシミュレーション関数に変換する.jest.fn()の原理は、https://www.daleseo.com/jest-fn-spy-on/に関する多くのブログを参照しています.
dispatchは常に監視されているため、テストに成功したり失敗したりしたときに正しい動作が呼び出されたかどうかをテストします.

Thunk関数は正常に動作することが予想される.