Jestでaxiosを使おうとするとNetwork Errorになってうまくいかないときの対処方法

どうも！大阪オフィスの西村祐二です。

Lambdaのテストを書くときにJestというテストフレームワークを試しに使っています。

そのテストでaxiosをつかってAPIをコールし、そのレスポンスが想定通りかどうかを確認するテストを実装するときに、「Network Error」となってうまく実行できない現象に遭遇しました。

今回はその対処方法をご紹介したいと思います。

Jestとは？

Facebookが開発したオールインワンなテストフレームワークで、フロントエンドでよく使われるテストフレームワークです。

https://jestjs.io/ja/

axiosとは？

HTTPリクエストを行うためのライブラリで、戻り値がPromiseベースになるという特徴があります。

こちらもフロントエンドでよく使われるようです。

https://github.com/axios/axios

どんなテストをするのか？

LambdaのE2Eテストのようなもので、API Gateway通して実際にAPIを実行して、想定通りのレスポンスが返ってくるか確認を行うテストをJest+axiosで実装していました。

コードとしては下記のような簡単なかんじです。

test("APIが正常に実行できること", async () => {
  const res = await axios.post(
    "https://xxxxxxx.execute-api.ap-northeast-1.amazonaws.com/v1/xxx/xxx",
    {
      text: "test exec"
    },
    {
      headers: { "x-api-key": "xxxx" }
    }
  );
  console.log(res.data);
  console.log(res.status);
  expect(res.status).toBe(200);
}, 40000);

ターミナルからjestのコマンドでテストを実行していきます。

しかし、下記のようなエラーが出力されうまくいきません。

    Network Error

      at createError (node_modules/axios/lib/core/createError.js:16:15)
      at XMLHttpRequest.handleError (node_modules/axios/lib/adapters/xhr.js:87:14)
      at XMLHttpRequest.el.addEventListener.event (node_modules/jsdom/lib/jsdom/living/helpers/create-event-accessor.js:33:32)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
      at XMLHttpRequestEventTargetImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
      at XMLHttpRequestEventTargetImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
      at XMLHttpRequest.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
      at requestErrorSteps (node_modules/jsdom/lib/jsdom/living/xhr-utils.js:132:7)
      at Object.dispatchError (node_modules/jsdom/lib/jsdom/living/xhr-utils.js:62:3)
      at EventEmitter.client.on.err (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:676:20)
      at Request.preflightClient.on.resp (node_modules/jsdom/lib/jsdom/living/xhr-utils.js:376:16)
      at Request.onRequestResponse (node_modules/request/request.js:1066:10)

対処方法

結論をかくとjestの設定に下記を追加すると解消されます。

"jest": { "testEnvironment": "node" }

package.jsonに設定を書いているときは下記のようなかんじになります。

package.json

  .
  .
  .
  "jest": {
    "testEnvironment": "node",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    .
    .
    .

testEnvironmentは何かというと、テスト時に実行される環境です。

デフォルトだとjsdomが設定されており、ブラウザ風の環境が設定されており、今回その環境をnodeに変更しています。

https://jestjs.io/docs/en/configuration#testenvironment-string

さいごに

Jestでaxiosを使ったときに遭遇したエラー「Network Error」の対処方法を紹介しました。

フロントエンドのツールの知見はまだまだ少ないので、どんどん使ってアウトプットしていきたいと思います。

誰かの参考になれば幸いです。