javascript - Menguji tindakan redux
Saya sedang mencuba untuk melaksanakan jest dengan tindakan redux kami. Berdasarkan tindakan foo di bawah dan ujian yang mengikutinya, ujian berikut gagal kerana store.getActions() hanya mengembalikan [{"type": "ACTION_ONE"}] seperti yang sepatutnya [{"type": "ACTION_ONE"}, {"type": "ACTION_TWO"}]. Bagaimana saya boleh mendapat kedua-dua tindakan yang dihantar semasa ujian? Terima kasih!
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
export const foo = () => {
return (dispatch) => {
dispatch(actionOne());
return HttpService.get(`api/sampleUrl`)
.then(json => dispatch(actionTwo(json.data)))
.catch(error => handleError(error));
};
};
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
beforeEach(() => {
store = mockStore({});
});
describe('sample test', () => {
test('validates foo complex action', () => {
const expectedActions = [
{type: actionTypes.ACTION_ONE},
{type: actionTypes.ACTION_TWO},
];
return store.dispatch(actions.foo())
.then(() => {
expect(store.getActions())
.toEqual(expectedActions);
});
});
});
Jawapan #1
Anda belum memalsukan panggilan API dan kerana ia tidak akan berjaya tanpa pemalsuan, tindakan yang dihantar apabila janji selesai tidak dicetuskan. Anda boleh menggunakan fetchMock untuk memalsukan panggilan API. Setelah anda melakukannya dengan betul, ujian anda akan berfungsi
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import fetchMock from 'fetch-mock';
import fetch from 'node-fetch';
export const foo = () => {
return (dispatch) => {
dispatch(actionOne());
return fetch(`api/sampleUrl`)
.then(r => r.json())
.then(json => dispatch(actionTwo(json)))
.catch(error => handleError(error));
};
};
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
beforeEach(() => {
store = mockStore({});
fetchMock.restore()
});
describe('sample test', () => {
test('validates foo complex action', () => {
fetchMock.getOnce('api/sampleUrl', {
body: { sample: ['do something'] }
})
const expectedActions = [
{type: actionTypes.ACTION_ONE},
{type: actionTypes.ACTION_TWO},
];
return store.dispatch(actions.foo())
.then(() => {
expect(store.getActions())
.toEqual(expectedActions);
});
});
});
