@shunnami (miffiy)posted at 2021-09-29

configオブジェクトを使ったaxiosをモックする方法(TypeScript)

Q&A

解決したいこと

configオブジェクトを使ってaxiosを利用しているのですが、mockするとundefindeが返ってきます。
axiosをモックする方法を教えてください。

該当するソースコード

// testFunction.ts
      const result= await axios({
        method: 'PUT',
        url: url,
        data: file,
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });

// resultに以下のテストコードのmockValueが入る想定

//testコード
// testFunctionの中のaxiosをモック
jest.mock('axios');
const mockAxios = axios as jest.Mocked<typeof axios>;

describe('実行結果のチェック', () => {
  test('HTTPステータスが200の場合', async () => {
    // axiosのレスポンスをmock
    const mockValue= {
      status: 200,
      data: {},
    };

    // axiosの戻り値をセット
    mockAxios.put.mockResolvedValue(mockValue);

    // 実行結果
    const result= await testFunction();


    expect(result).toStrictEqual({
      result: true,
      message: '',
    });
  });
});

自分で試したこと

以下を試しましたが、typeScriptでないので上手くいきませんでした。
https://stackoverflow.com/questions/60992357/how-to-test-axios-with-config-option

2Answer

@uasi posted at 2021-09-29

testFunction() の返り値をテストしているようですが、何か値は返していますか？

1Like

Comments

@shunnami
Questioner
ご質問ありがとうございます。

testFunctionは以下を返します。

type Result = {
result: boolean; // testFunctionが成功ならtrue
message: string: // resultがfalseならメッセージを入れる
}

const result:Result // testFunctionの戻り値

>testFunction() の返り値をテストしているようですが、何か値は返していますか？
jestを実行するとaxiosの戻り値をモックできていないため、以下が返ってきます。

{
result:false,
message: "通信の値がundefinedです。処理を中断します。"
}

※エラーメッセージはテスト用にif文を書いて出すようにしています。

@bigen1925 posted at 2021-10-03

testFunction.tsで呼び出しているのは axios.put()ではなく axios() ですので、

    // axiosの戻り値をセット
-    mockAxios.put.mockResolvedValue(mockValue);
+    mockAxios.mockResolvedValue(mockValue);

とする必要があります

1Like

Comments

@shunnami
Questioner
回答いただきありがとうございます。

ご提案頂いた内容で修正したのですが、プロパティがないと怒られました。
型定義は以下です。

jest.mock('axios');

const mockAxios = axios as jest.Mocked<typeof axios>;

// ここでエラー
mockAxios.mockResolvedValueOnce(mRes);

解決方法として以下の方法がありました。
しかし、何か無理やりな感じがしていまして。。。
もっとスマートなやり方がある気がしています。

// 一度unknownでアサーションしたあとにMokedFunctionにアサーションする
const mockAxios = axios as unknown as jest.MockedFunction<typeof axios>;
@bigen1925
>解決方法として以下の方法がありました。
>しかし、何か無理やりな感じがしていまして。。。
>もっとスマートなやり方がある気がしています。
>// 一度unknownでアサーションしたあとにMokedFunctionにアサーションする
>const mockAxios = axios as unknown as jest.MockedFunction<typeof axios>;

お気持ちはとても共感しますが、残念ながら私の知る限り書いていただいた記法が最もスマートなやりかたになってしまいます、、

別のアプローチとしては、プロダクションコードを変えることに抵抗が少ないようであれば`testFunction.ts`の内容を変更して

```
const result= await axios({
method: 'PUT',
url: url,
data: file,
headers: {
'Content-Type': 'multipart/form-data',
},
});
```
を
```
const result = await axios.put(url, file, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
```
と書き換えてしまうというのも一手かもしれません。
この場合、ご質問いただいた当初のテストの書き方でテストが可能になります。

Are you sure you want to delete the question?

configオブジェクトを使ったaxiosをモックする方法(TypeScript)

解決したいこと

該当するソースコード

自分で試したこと

2Answer

Comments

Comments

Your answer might help someone💌