Redux工具包、redux模拟存储、redux形实转换
我很难理解为什么我的store.dispatch(action)
不工作,而userSlice.reducer
似乎在单元测试的上下文中工作。
我确实读了这个Weird error testing a reducer (redux toolkit),但它没有帮助解决这个问题。
user.tsx
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { refreshAccessToken } from "../../api/auth";
import { getUserData, patchUserData } from "../../api/user";
import { UserDataResponse } from "../../types/user";
import { RootState } from "../store";
import { logoutUserReducer } from "./auth";
export interface User {
email?: string;
name?: string;
password?: string;
}
export interface InitialStateUser {
user: User | null;
userIsLoading: boolean;
userIsLoaded?: boolean;
}
const initialState: InitialStateUser = {
user: null,
userIsLoading: false,
};
export const getUserDataReducer = createAsyncThunk(
"getUserData",
async (_, { rejectWithValue }) => {
// some async code with FETCH API and getUserData()
}
}
);
export const userSlice = createSlice({
name: "user",
initialState,
reducers: {},
extraReducers: (builder) => {
builder
.addCase(getUserDataReducer.fulfilled, (state, action) => {
state.user = action.payload.user;
state.userIsLoading = false;
state.userIsLoaded = true;
})
.addCase(getUserDataReducer.pending, (state) => {
state.userIsLoading = true;
state.userIsLoaded = false;
})
.addCase(getUserDataReducer.rejected, (state, action) => {
state.userIsLoading = false;
state.userIsLoaded = false;
})
},
});
export default userSlice.reducer;
user.test.tsx
import { AppDispatch, RootState } from "../store";
import configureMockStore, { MockStoreEnhanced } from "redux-mock-store";
import thunk from "redux-thunk";
import { initialIngredientsState } from "./ingredients.test";
import { initialOrderState } from "./order.test";
import userReducer, {
getUserDataReducer,
InitialStateUser,
userSlice,
} from "../slices/user";
import fetchMock from "fetch-mock";
import { BASE_URL } from "../../api";
import { getCookie } from "../../utils/cookieHandler";
const initialUserState: InitialStateUser = {
user: null,
userIsLoading: false,
};
const mockStoreInitialState = {
user: { ...initialUserState }
};
describe("user reducer", () => {
let store: MockStoreEnhanced<RootState>;
beforeEach(() => {
store = mockStore(mockStoreInitialState);
});
afterEach(() => {
fetchMock.restore();
});
// WORKS
it("should getUserData fullfilled", () => {
const newState = userSlice.reducer(initialUserState, {
type: "getUserData/fulfilled",
payload: {
user: { email: "test@gmail.com", name: "testU2dfd" },
},
});
expect(newState.user).toEqual({
email: "test@gmail.com",
name: "testU2dfd",
});
expect(newState.userIsLoaded).toBe(true);
});
// DOESN't WORK
it("should getUserData pending", async () => {
await store.dispatch(getUserDataReducer.pending(""));
const { userIsLoaded, userIsLoading } = store.getState().user;
console.log(store.getState());
expect(userIsLoaded).toBe(false);
expect(userIsLoading).toBe(true);
});
});
await store.dispatch(getUserDataReducer.pending(""));
的redux状态只是没有更新。
● user reducer › should getUserData pending
expect(received).toBe(expected) // Object.is equality
Expected: false
Received: undefined
我是不是漏掉了什么或者误解了什么?
1条答案
按热度按时间nwsw7zdq1#
好吧,看起来它甚至不打算根据https://github.com/reduxjs/redux-mock-store/issues/71和自述文件https://github.com/reduxjs/redux-mock-store更新状态
请注意,此库旨在测试与操作相关的逻辑,而不是与reducer相关的逻辑