web-dev-qa-db-ja.com

テストaxios-mock-adapterをaxios.create（）で記述します

Httpサービスをテストしたいのですが、エラーが発生します。だから、私のテストファイル

api.js

import axios from 'axios';

export const api = axios.create();

fetchUsers.js

import api from './api';
export const fetchUsers = (params) api.get('/api/users', { params })
  .then(({data}) => data)

fetchUsers.spec.js

import MockAdapter from 'axios-mock-adapter'
import api from './api';
const mock = new MockAdapter(api);

describe('fetchUsers', () => {
  it('should send request', (done) => {
    const data = { data: ['user'] };
    mock.onGet('/api/users').reply(200, data);

    fetchUsers().then((response) => {
      expect(response).toEqual(data.data);
      done();
    });
  });
});

しかし、ここでエラーが発生します

エラー：ECONNREFUSED 127.0.0.1:80をTCPConnectWrap.afterConnectに接続します[oncompleteとして]（net.js：1158：14）

Api.jsでaxios.create（）をaxiosに置き換えると、機能します。しかし、作成されたaxiosインスタンスでテストする方法は？それを作成するときは、パラメーターをそこに割り当てる必要があります。

誰でも手伝ってくれる？

axiosjestjsaxios-mock-adapter
9
user990993

こんにちは私は同じ問題があり、ここで自分自身に答える必要がありました https://stackoverflow.com/a/51414152/7332

ここに要点があります：

まず、axios-mock-adapterライブラリは必要ありません。

src/__mocks__にaxiosのモックを作成します。

// src/__mocks__/axios.ts

const mockAxios = jest.genMockFromModule('axios')

// this is the key to fix the axios.create() undefined error!
mockAxios.create = jest.fn(() => mockAxios)

export default mockAxios

次に、テストファイルでは、要旨は次のようになります。

import mockAxios from 'axios'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'

// for some reason i need this to fix reducer keys undefined errors..
jest.mock('../../store/rootStore.ts')

// you need the 'async'!
test('Retrieve transaction data based on a date range', async () => {
  const middlewares = [thunk]
  const mockStore = configureMockStore(middlewares)
  const store = mockStore()

  const mockData = {
    'data': 123
  }

  /** 
   *  SETUP
   *  This is where you override the 'post' method of your mocked axios and return
   *  mocked data in an appropriate data structure-- {data: YOUR_DATA} -- which
   *  mirrors the actual API call, in this case, the 'reportGet'
   */
  mockAxios.post.mockImplementationOnce(() =>
    Promise.resolve({ data: mockData }),
  )

  const expectedActions = [
    { type: REQUEST_TRANSACTION_DATA },
    { type: RECEIVE_TRANSACTION_DATA, data: mockData },
  ]

  // work
  await store.dispatch(reportGet())

  // assertions / expects
  expect(store.getActions()).toEqual(expectedActions)
  expect(mockAxios.post).toHaveBeenCalledTimes(1)
})
10
kyw