Redux：Jest 在从 Class 方法分派操作时检测到错误

Question

我有以下Class来处理错误。

import { store } from 'redux/store';
import { openErrorMessage } from 'redux/slices/errorMessage';

export default class TestClass {
  errorReceived(errorMessage: string): void {
    store.dispatch(openErrorMessage({ message: errorMessage }));
  }
}

我的目标是从非 React 组件 class 发送一个动作，例如 TestClass.

这是 errorMessageSlice 中的内容。

import { createSlice } from '@reduxjs/toolkit';

export type ErrorMessageState = {
  isOpen?: boolean;
  message: string;
};

const initialState: ErrorMessageState = {
  isOpen: false,
  message: '',
};

const errorMessageSlice = createSlice({
  name: 'errorMessage',
  initialState,
  reducers: {
    openErrorMessage(state: ErrorMessageState, { payload }: { payload: ErrorMessageState; type: string }) {
      state.isOpen = true;
      state.message = payload.message;
    },
    closeErrorMessage(state: ErrorMessageState) {
      state.isOpen = false;
      state.message = '';
    },
  },
});

export default errorMessageSlice;
export const { openErrorMessage, closeErrorMessage } = errorMessageSlice.actions;

还有 rootReducer。

import { AnyAction, combineReducers } from 'redux';
import { openErrorMessage } from './slices/errorMessage';

const appReducer = combineReducers({
  // More Reducers
  errorMessage: errorMessageSlice.reducer,
});

const rootReducer = (state: ReturnType<typeof appReducer> | undefined, action: AnyAction) => {
  return appReducer(state, action);
};

export default rootReducer;

当我从客户端执行 errorReceived 方法时，它没有抛出错误。

但是当我运行使用 Jest 进行测试时，出现以下错误。

TypeError: Cannot read properties of undefined (reading 'reducer')

otherReducerName: otherReducerNameSlice.reducer,

at Object. (src/redux/rootReducer.ts:28:47)

at Object. (src/redux/store.ts:2:1)

我发现问题是 errorReceived 哪个目录访问存储对象并调度操作。

store.dispatch(openErrorMessage({ message: errorMessage }));

如何解决 Jest 给予 Cannot read properties of undefined (reading 'reducer') 的问题？

Answer 1

这很可能意味着您有一个循环导入错误，并且在初始化存储时切片文件尚未加载。

这可能是由于将商店直接导入 TestClass 文件造成的。这其实也是we specifically say you should not import the store directly into other files.

的原因之一

通常，您一开始就不应该在 Redux 应用程序中像这样使用类。没有真正的好处或需要使用它们。

如果您绝对必须引用该商店（这只能作为最后的手段），我们有 some suggestions on how to work around this.

Redux：Jest 在从 Class 方法分派操作时检测到错误

Redux: Jest detects errors when dispatching an action from a Class method

reactjs

jestjs

redux