使用store.dispatch(action)进行测试不适用于redux-toolkit

qjp7pelc  于 2023-03-02  发布在  其他
关注(0)|答案(1)|浏览(127)

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

我是不是漏掉了什么或者误解了什么?

nwsw7zdq

nwsw7zdq1#

好吧,看起来它甚至不打算根据https://github.com/reduxjs/redux-mock-store/issues/71和自述文件https://github.com/reduxjs/redux-mock-store更新状态
请注意,此库旨在测试与操作相关的逻辑,而不是与reducer相关的逻辑

相关问题