この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
どうも!大阪オフィスの西村祐二です。
Lambdaのテストを書くときにJestというテストフレームワークを試しに使っています。
そのテストでaxiosをつかってAPIをコールし、そのレスポンスが想定通りかどうかを確認するテストを実装するときに、「Network Error」となってうまく実行できない現象に遭遇しました。
今回はその対処方法をご紹介したいと思います。
Jestとは?
Facebookが開発したオールインワンなテストフレームワークで、フロントエンドでよく使われるテストフレームワークです。
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」の対処方法を紹介しました。
フロントエンドのツールの知見はまだまだ少ないので、どんどん使ってアウトプットしていきたいと思います。
誰かの参考になれば幸いです。