Enzyme shallow渲染始终触发根index.js渲染的问题排查

看起来你的测试遇到了几个关联问题：组件测试的shallow调用方式有误，同时根入口的store初始化代码在测试时被意外触发，再加上configureStore里的reducer配置可能存在问题。咱们一步步来解决：

1. 修复组件测试的shallow调用错误 #

你的组件测试代码里犯了一个常见的小错误：

const wrapper = shallow(NavLink); // 错误：传入的是组件类，不是React元素

shallow需要接收React元素而非组件本身，正确写法应该是：

const wrapper = shallow(<NavLink />); // 正确：渲染组件实例

这个错误可能导致Enzyme触发意外的模块加载逻辑，间接引发后续的store初始化问题。

2. 排查configureStore中的reducer配置 #

报错信息“Expected the reducer to be a function”直接指向createStore时传入的reducer无效。你需要检查store/configureStore.js：

• 确保用combineReducers组合的所有reducer都是有效函数，比如eventsReducer是否在store/events/reducer.js中正确导出：

  // store/events/reducer.js 示例
  import { types } from './actions';
  
  const initialState = { entities: [], result: {} };
  
  export default function eventsReducer(state = initialState, action) {
    switch (action.type) {
      case types.EVENTS_REQUESTED:
        return state;
      // 其他case逻辑...
      default:
        return state;
    }
  }
  

• 检查configureStore中是否正确组合reducer：

  // store/configureStore.js 正确示例
  import { createStore, combineReducers, applyMiddleware } from 'redux';
  import createSagaMiddleware from 'redux-saga';
  import eventsReducer from './events/reducer';
  import rootSaga from './rootSaga';
  
  const sagaMiddleware = createSagaMiddleware();
  const rootReducer = combineReducers({
    events: eventsReducer, // 确保这里的reducer是函数，不是undefined或其他值
  });
  
  export default function configureStore(initialState) {
    const store = createStore(
      rootReducer,
      initialState,
      applyMiddleware(sagaMiddleware)
    );
    sagaMiddleware.run(rootSaga);
    return store;
  }
  

3. 阻止测试时触发根入口的store初始化 #

从调用栈可以看到，测试时意外执行了src/index.jsx中的configureStore代码——这是因为根入口文件的顶层代码（比如const store = configureStore(initialState);）会在模块被导入时立即执行。要解决这个问题：

• 检查导入路径：确保所有组件和测试文件没有意外导入index.jsx。
• Mock掉store相关模块：在测试文件开头提前mockconfigureStore，避免实际创建store：

  // 在NavLink.test.jsx开头添加
  jest.mock('../../store/configureStore', () => {
    return () => ({
      getState: jest.fn(() => ({ events: { entities: [], result: {} } })),
      dispatch: jest.fn(),
      subscribe: jest.fn(),
    });
  });
  

  这样测试时就不会执行真实的configureStore代码，也就不会触发reducer错误。

4. 独立测试Redux-Saga #

你的Saga测试本身逻辑是对的，但因为全局的store初始化报错导致测试无法运行。修复上面的问题后，Saga测试应该可以正常执行——因为它只测试生成器函数，不需要依赖真实的store环境。如果还是有问题，可以在Saga测试文件中也添加对store模块的mock，确保测试完全隔离。

按照以上步骤排查，应该能解决你的测试报错问题。

内容的提问来源于stack exchange，提问作者Mario Gil