web-dev-qa-db-ja.com

jestでaxiosをテストする方法

私は反応でこのアクションを持っています

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

この場合、どのようにaxiosをテストしますか？ Jestには、モック関数を使用する非同期コードのサイトでこのユースケースがありますが、axiosでこれを行うことができるかどうかわかりませんか？参照： https://facebook.github.io/jest/docs/tutorial-async.html

私はこれが正しい型を返していることをテストするためにこれまでやってきました

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

模擬データを渡し、それが返されることをテストする方法がわかりませんが、アイデアはありますか？

前もって感謝します

reactjsreact-reduxjestjs
46
Adear

Axios-mock-adapterを使用しました。この場合、サービスは./chatbotに記述されています。モックアダプターでは、APIエンドポイントが消費されたときに返すものを指定します。

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import chatbot from './chatbot';

describe('Chatbot', () => {
    it('returns data when sendMessage is called', done => {
        var mock = new MockAdapter(axios);
        const data = { response: true };
        mock.onGet('https://us-central1-hutoma-backend.cloudfunctions.net/chat').reply(200, data);

        chatbot.sendMessage(0, 'any').then(response => {
            expect(response).toEqual(data);
            done();
        });
    });
});

ここで全体の例を見ることができます：

サービス： https://github.com/lnolazco/hutoma-test/blob/master/src/services/chatbot.js

テスト： https://github.com/lnolazco/hutoma-test/blob/master/src/services/chatbot.test.js

43
Luis Nolazco

他のライブラリを使用しない場合：

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: {...} });

拒否されたプロミスに相当するものもあります：mockRejectedValue。

詳細については、 Jest mocking docs を参照してください。この GitHubの説明jest.mock("axios")行のスコープについて説明しています。

39
A Jar of Clay

私は手順に従ってそれを行うことができます：

  1. フォルダーを作成します__ mocks __ /（@Januarthaコメントが指すように）
  2. axios.jsモックファイルを実装する
  3. testで実装モジュールを使用します

モックは自動的に発生します

モックモジュールの例：

module.exports = {
    get: jest.fn((url) => {
        if (url === '/something') {
            return Promise.resolve({
                data: 'data'
            });
        }
    }),
    post: jest.fn((url) => {
        if (url === '/something') {
            return Promise.resolve({
                data: 'data'
            });
        }
        if (url === '/something2') {
            return Promise.resolve({
                data: 'data2'
            });
        }
    }),
    create: jest.fn(function () {
        return this;
    })
};
20
Amadeu Cavalcante Filho

nock を使用してこれを行いました。

import nock from 'nock'
import axios from 'axios'
import httpAdapter from 'axios/lib/adapters/http'

axios.defaults.adapter = httpAdapter

describe('foo', () => {
    it('bar', () => {
        nock('https://example.com:443')
            .get('/example')
            .reply(200, 'some payload')

        // test...
    })
})
2
Jon B

Reduxドキュメントのmockfetchの例の代わりにaxios-mock-adapterを使用したい方のために 非同期テスト用 、私は以下をうまく利用しました

actions.test.js：

describe('SignInUser', () => {
  var history = {
    Push: function(str) {
        expect(str).toEqual('/feed');
    }
  }

  it('Dispatches authorization', () => {
    let mock = new MockAdapter(axios);
    mock.onPost(`${ROOT_URL}/auth/signin`, { 
        email: '[email protected]', 
        password: 'test'
    }).reply(200, {token: 'testToken' });

    const expectedActions = [ { type: types.AUTH_USER } ];
    const store = mockStore({ auth: [] });

    return store.dispatch(actions.signInUser({ 
      email: '[email protected]', 
      password: 'test',
    }, history)).then(() => {
        expect(store.getActions()).toEqual(expectedActions);
  });

});

actions/index.jsのsignInUserの成功事例をテストするには：

export const signInUser = ({ email, password }, history) => async dispatch => {
  const res = await axios.post(`${ROOT_URL}/auth/signin`, { email, password })
    .catch(({ response: { data } }) => {
        ...
  });

  if (res) {
    dispatch({ type: AUTH_USER });                 // test verified this
    localStorage.setItem('token', res.data.token); // test mocked this
    history.Push('/feed');                         // test mocked this
  }
}

これがjestで行われていることを考えると、localstorage呼び出しはthe笑されなければなりませんでした。これはsrc/setupTests.jsにありました：

const localStorageMock = {
  removeItem: jest.fn(),
  getItem: jest.fn(),
  setItem: jest.fn(),
  clear: jest.fn()
};
global.localStorage = localStorageMock;
0
vapurrmaid