是指在使用Redux Toolkit中的createAsyncThunk函数时,通过返回一个Promise对象来模拟异步操作,并测试其错误处理能力。
在Redux Toolkit中,createAsyncThunk函数用于创建一个异步的thunk action,它可以处理异步操作并自动派发相应的pending、fulfilled和rejected action。在测试中,我们可以使用promise错误来模拟异步操作的失败情况,以确保createAsyncThunk正确处理错误。
以下是一个示例代码:
import { createAsyncThunk } from '@reduxjs/toolkit';
// 创建一个异步的thunk action
export const fetchData = createAsyncThunk(
'data/fetch',
async (params, thunkAPI) => {
// 模拟异步操作
return new Promise((resolve, reject) => {
// 模拟异步操作失败
reject(new Error('Async operation failed'));
});
}
);
// 在reducer中处理fulfilled和rejected action
const dataSlice = createSlice({
name: 'data',
initialState: { loading: false, error: null },
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchData.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(fetchData.fulfilled, (state, action) => {
state.loading = false;
// 处理成功的情况
})
.addCase(fetchData.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message; // 处理错误的情况
});
},
});
// 测试异步操作失败的情况
describe('fetchData', () => {
it('should handle rejected action', async () => {
const store = configureStore({ reducer: { data: dataSlice.reducer } });
// 模拟异步操作失败
jest.spyOn(global, 'fetchData').mockRejectedValue(new Error('Async operation failed'));
await store.dispatch(fetchData());
const state = store.getState().data;
expect(state.loading).toBe(false);
expect(state.error).toBe('Async operation failed');
});
});
在上述示例中,我们创建了一个名为fetchData的异步thunk action,并在其内部返回一个Promise对象,该Promise对象被拒绝以模拟异步操作失败的情况。在reducer中,我们使用extraReducers来处理fulfilled和rejected action,并在rejected action中将错误信息存储在state中。
在测试中,我们使用jest.spyOn来模拟异步操作失败,并使用store.dispatch来触发异步操作。然后,我们可以通过获取state来断言loading状态和错误信息是否正确。
这是一个使用promise错误测试createAsyncThunk的示例,通过这种方式可以确保createAsyncThunk正确处理异步操作的错误情况。
领取专属 10元无门槛券
手把手带您无忧上云