模拟内部 axios.create() [英] Mock inner axios.create()
问题描述
我使用 jest
和 axios-mock-adapter
来测试 redux
异步中的 axios
API 调用动作创作者.
I'm using jest
and axios-mock-adapter
to test axios
API calls in redux
async action creators.
当我使用由 axios.create()
创建的 axios
实例时,我无法让它们工作:
I can't make them work when I'm using a axios
instance that was created with axios.create()
as such:
import axios from 'axios';
const { REACT_APP_BASE_URL } = process.env;
export const ajax = axios.create({
baseURL: REACT_APP_BASE_URL,
});
我会在我的 async action creator
中使用它,例如:
which I would consume it in my async action creator
like:
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
有错误.
And I only get one action Received: [{"type": "REQUEST_TRANSACTION_DATA"}]
because there was an error with the ajax.post
.
我尝试了很多方法来模拟 axios.create
都无济于事,但我并不真正知道我在做什么......感谢任何帮助.
I have tried many ways to mock the axios.create
to no avail without really knowing what I'm doing..Any Help is appreciated.
推荐答案
好的,我明白了.这是我修复它的方法!我最终为 axios
做了没有的任何模拟库!
OK I got it. Here is how I fixed it! I ended up doing without any mocking libraries for axios
!
在 src/__mocks__
中为 axios
创建一个模拟:
Create a mock for axios
in 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
然后在您的测试文件中,要点如下:
Then in your test file, the gist would look like:
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()的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!