包含axios GET调用的React-Redux应用程序测试操作创建者 [英] React-Redux app testing action creator containing axios GET call
本文介绍了包含axios GET调用的React-Redux应用程序测试操作创建者的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在编写一个react-redux
应用,在一个动作创建者中,我通过axios
I am writing a react-redux
app and in one of my action creators I am making an api request via axios
大致来说,是这样的:
import axios from 'axios'
export function getStoredData(userInput) {
.
.
.
var url = generateURL(userInput);
var response = axios.get(url);
return {
type: GET_STORED_DATA
payload: repsonse;
};
}
我想使用 axios-mock-adapter mock axios ,但我不太了解该怎么做,尤其是因为我不想修改我的action creator
进行测试.
I wanted to mock axios using axios-mock-adapter but I don't quite understand how to do that, especially since I wouldn't want to modify my action creator
for the test.
请建议执行此操作的任何资源/指南...
Please suggest any resources/guide to doing this...
推荐答案
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import moxios from 'moxios';
import {
submitRegistrationStepOneForm, // <-- this is an action that returns returns a promise
} from '../RegistrationActions';
const USER_ID = 999;
const USER_EMAIL = 'lucky_star@milkyway.test';
const userDataForStepOne = { email: USER_EMAIL };
const responseForUserRequest = { content: { id: USER_ID } };
const middlewares = [thunk];
const mockStore = configureStore(middlewares);
describe('Registration action tests for form', () => {
beforeEach(() => moxios.install());
afterEach(() => moxios.uninstall());
it('submitRegistrationStepOneForm success should trigger correct dispatches', () => {
const initialState = {};
const store = mockStore(initialState);
// simplest way is to use a regex to match url
moxios.stubRequest(/users.*/, {
status: 201, // <-- you can replace this with a 5xx to test failure cases
response: responseForUserRequest,
});
return store.dispatch(submitRegistrationStepOneForm({
userData: userDataForStepOne,
}))
.then(() => {
// in my case I used to run 2 dispatches on success call:
const actions = store.getActions();
expect(actions.length).toEqual(2);
expect(actions[0]).toEqual({ type: 'SUBMIT_REGISTRATION_FORM_DATA' });
expect(actions[1]).toEqual({
type: 'SUBMIT_REGISTRATION_STEP_ONE_SUCCESS',
payload: { userId: USER_ID },
});
// ... more tests here if needed
});
});
// ....
submitRegistrationStepOneForm操作:
the submitRegistrationStepOneForm action:
export const submitRegistrationStepOneForm = ({ userData, sourceArticle }) => {
return (dispatch) => {
dispatch(submitRegistrationDataAction());
// signUpStepOne can be replaced directly with the axios promise
return signUpStepOne({ userData })
.then((body) => {
const { content: { id } } = body;
// ... some function calls and 2 dispatches here like:
// dispatch(registrationSuccess({ userId: id }));
})
.catch((error) => {
console.log('step one error', error); // eslint-disable-line
dispatch(registrationFailureAction());
});
};
};
这篇关于包含axios GET调用的React-Redux应用程序测试操作创建者的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文