模拟内部axios.create（）

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在使用jest并axios-mock-adapter测试异步操作创建者中的axiosAPI调用redux。

当我使用axios这样创建的实例时，我无法使其工作axios.create()：

import axios from 'axios';
const { REACT_APP_BASE_URL } = process.env;
export const ajax = axios.create({
  baseURL: REACT_APP_BASE_URL,
});

我会async action creator像这样消耗它：

import { ajax } from '../../api/Ajax'
export function reportGet(data) {
  return async (dispatch, getState) => {
    dispatch({ type: REQUEST_TRANSACTION_DATA })
    try {
      const result = await ajax.post(
         END_POINT_MERCHANT_TRANSACTIONS_GET,
         data,
      )
      dispatch({ type: RECEIVE_TRANSACTION_DATA, data: result.data })
      return result.data
    } catch (e) {
      throw new Error(e);
    }
  }
}

这是我的测试文件：

import {
  reportGet,
  REQUEST_TRANSACTION_DATA,
  RECEIVE_TRANSACTION_DATA,
} from '../redux/TransactionRedux'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
import { END_POINT_MERCHANT_TRANSACTIONS_GET } from 'src/utils/apiHandler'
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
const middlewares = [thunk]
const mockStore = configureMockStore(middlewares)
const store = mockStore({ transactions: {} })
test('get report data', async () => {
  let mock = new MockAdapter(axios)
  const mockData = {
    totalSalesAmount: 0
  }
  mock.onPost(END_POINT_MERCHANT_TRANSACTIONS_GET).reply(200, mockData)
  const expectedActions = [
    { type: REQUEST_TRANSACTION_DATA },
    { type: RECEIVE_TRANSACTION_DATA, data: mockData },
  ]
  await store.dispatch(reportGet())
  expect(store.getActions()).toEqual(expectedActions)
})

而且我只能执行一个操作，Received: [{"type": "REQUEST_TRANSACTION_DATA"}]因为ajax.post。

我尝试了多种方法来嘲笑该方法，axios.create但没有真正知道自己在做什么。

回答：

好，我知道了。这是我的解决方法！我最终 做任何模拟库axios！

创建一个模拟axios在src/__mocks__：

// 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)
})

以上是 模拟内部axios.create（） 的全部内容， 来源链接： utcz.com/qa/425479.html

回到顶部