☰

Jestでaxiosをテストするにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript reactjs react-redux axios jestjs
Jestでaxiosをテストするにはどうすればいいですか? 質問する

React には次のアクションがあります:

export function fetchPosts() {
    const request = axios.get(`${WORDPRESS_URL}`);
    return {
        type: FETCH_POSTS,
        payload: request
    }
}

どうやってテストするの？アクシオスこの場合？

Jest のサイトでは、モック関数を使用する非同期コードのユースケースが紹介されていますが、Axios でも同じことができますか?

参照：非同期の例

これまで、正しい型が返されているかどうかをテストするためにこれを実行しました。

it('should dispatch actions with the correct type', () => {
    store.dispatch(fetchPosts());
    let action = store.getActions();
    expect(action[0].type).toBe(FETCH_POSTS);
});

モックデータを渡してそれが返されることをテストするにはどうすればいいでしょうか?

ベストアンサー1

他のライブラリを使用せずに:

import * as axios from "axios";

// Mock out all top level functions, such as get, put, delete and post:
jest.mock("axios");

// ...

test("good response", () => {
  axios.get.mockImplementation(() => Promise.resolve({ data: {...} }));
  // ...
});

test("bad response", () => {
  axios.get.mockImplementation(() => Promise.reject({ ... }));
  // ...
});

応答コードを指定することができます:

axios.get.mockImplementation(() => Promise.resolve({ status: 200, data: {...} }));

パラメータに基づいてモックを変更することが可能です:

axios.get.mockImplementation((url) => {
    if (url === 'www.example.com') {
        return Promise.resolve({ data: {...} });
    } else {
        //...
    }
});

Jest v23 では、Promise をモックするための糖衣構文が導入されました。

axios.get.mockImplementation(() => Promise.resolve({ data: {...} }));

簡単に言うと

axios.get.mockResolvedValue({ data: {...} });

拒否された Promise に相当するものも存在します: mockRejectedValue。

参考文献：

おすすめ記事