HTTPリクエストをするメソッドの実装のベストプラクティス

Question

質問したいこと

React.js と Redux を使ってアプリケーションを作っているのですが、Action で store を更新するときに一緒に HTTP リクエストをするような実装になっています。

下のコードはこのような状態になっている例の１つです（変数の詳細などは質問に関係ないので省略させていただきます）。

// Redux での Action の定義
export const deletePaperEntry = (title) => {
  let papers = store.getState().papersInTable;
  let papersShown = store.getState().papersShown;
  let newTable = [];
  let newShownTable = [];

  // HTTP request の部分
  let url = AUTH_SERVER_URL + "/delete_paper";
  let body = JSON.stringify({
    username: SHA256(store.getState().userName),
    title: title,
  });
  let req = makeRequest(url, "POST", body);
  fetch(req).then((response) => {
    if (response.ok) {
      return response.json();
    }
  });

  // Redux で管理している state の更新
  for (let i = 0; i < papers.length; i++) {
    if (papers[i].title !== title) {
      newTable.push(papers[i]);
    }
  }
  
  return {
    type: "DELETE_PAPER",
    papersInTable: newTable,
    papersShown: newShownTable,
  };
};

このようなコードで現在なにか不具合が生じているということは無いのですが、Enzyme を使ってテストコードを書くときに、上の deletePaperEntry が実行されたときに store に保存されている state が正しく更新されたかをチェックするテストが書きにくいと感じています。

これを解決するために store の更新と HTTP request を分離する必要があると考えているのですが、どのようにするのがベストプラクティスなのかわからず困っています。そもそも分離することが正しいことなのかも自信が無いです。

個人の趣味で開発をしており一般的に用いられている方法というものがわからないので詳しい方に教えていただきたいです。よろしくお願いいたします。

Answer 1

http requestの部分だけ切り出して別の関数に分けるのはどうでしょうか？
テスト時はそのhttp requestの関数をmockすることができます

Comments

[Yhaya]

deletePaper の引数にrequest関数を入れて、テストのときにmockしたrequest関数を渡すということですか？

[komasan1]

jestを例にしますと、http requestの関数をimportする形にしてテスト時はjest.mockを使います。
```
import { requestFunc } from "./request"
deletePaper () {
requestFunc()
}
```
https://jestjs.io/docs/ja/mock-functions

[Yhaya]

ありがとうございます。なんとか解決することができました。