Reactjs axios模拟适配器onGet模拟数据无效

我正在尝试使用axios模拟适配器测试axios调用。我遇到了以下问题： 来自测试的API调用总是响应真实数据，而不是mock.onGet的模拟数据。 a、 k.receivedActions始终来自真实的API调用，但不是使用mock.onGet模拟的预期操作。 以下是操作代码searchAction.js：

import { SEARCH_PHOTOS, FEATURED_PHOTOS } from './types';
import axiosInstence from '../apis/axiosInstence';

export const searchPhotos = (term) => (dispatch) => {
  dispatch({ type: 'SEACH_REQUEST' });

  return axiosInstence.get('/search/photos', {
    params: {
      query: term,
      page: 1
    }
  }).then(response => {
    dispatch({
      type: 'SEARCH_PHOTOS',
      payload: response.data
    });
  }).catch(error => {
    dispatch({ type: 'SEACH_FAILURE' });
  });
}

我的测试类似于searchAction.test.js：

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import thunk from 'redux-thunk';
import configureMockStore from 'redux-mock-store';
import { searchPhotos } from '../searchAction';

const mock = new MockAdapter(axios);

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
const term = 'cars';
const store = mockStore({});

describe('actions', () => {
  beforeEach(() => {
    mock.reset();
    store.clearActions();
  });

  it('Should create an action to signIn with a fake user', async () => {
    const expectedActions = [{
      type: 'SEACH_REQUEST'
    }, {
      type: 'SEARCH_PHOTOS',
      payload: []
    }];

    mock.onGet('/search/photos', {
      params: { term: 'cars' }
    }).reply(200, expectedActions);

    await store.dispatch(searchPhotos(term))
      .then(data => {
        const receivedActions = store.getActions();
        expect(receivedActions).toEqual(expectedActions);
      });
  });
});

任何人都经历过类似的问题或可以给我一些建议。

---

感谢您的建议。

您的代码中有几个问题：

首先，在action creator中，您使用axios实例进行ajax调用，但在测试中，您没有将该实例提供给axios模拟适配器。创建MockAdapter实例时，应在测试中提供axios实例

其次，在onGet方法中提供给axios mock的params属性与在action creator的get操作中发送的参数不匹配。您应该将调用中的参数与其值相匹配。因此，您应该提供查询和页面参数

最后，您将在模拟请求中返回expectedActions，但这似乎不正确。查看代码，似乎希望返回一个空数组

考虑到所有这些因素，您的代码如下所示：

import MockAdapter from 'axios-mock-adapter';
import thunk from 'redux-thunk';
import configureMockStore from 'redux-mock-store';

import axiosInstence from '../../apis/axiosInstence';
import { searchPhotos } from '../searchAction';

const mock = new MockAdapter(axiosInstence);

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
const term = 'cars';
const store = mockStore({});

describe('actions', () => {
    beforeEach(() => {
        mock.reset();
        store.clearActions();
    });

    it('Should create an action to signIn with a fake user', async () => {
        const expectedActions = [{
            type: 'SEACH_REQUEST'
        }, {
            type: 'SEARCH_PHOTOS',
            payload: []
        }];

        mock.onGet('/search/photos', {
            params: {
                query: 'cars',
                page: 1
            }
        }).reply(200, []);

        const data = await store.dispatch(searchPhotos(term));
        const receivedActions = store.getActions();
        expect(receivedActions).toEqual(expectedActions);
    });
});

---

谢谢你的回答和漂亮的代码。它起作用了！但是，receivedActions中的有效负载是未定义的，如下所示：```[{type:'SEACH_REQUEST'}，{type:'SEARCH_PHOTOS'，有效负载：undefined}]``我假设它应该是[]空数组，有什么想法吗？谢谢未定义的问题似乎不是由您的代码引起的，它现在工作得很好！非常感谢。