React测试覆盖率检查报错：TypeError: connect不是函数

可能的原因及修复方案 #

1. 修正react-redux的Mock方式 #

测试中如果手动Mock了react-redux，错误的Mock逻辑会导致connect被识别为非函数。直接在测试文件顶部添加正确的Mock：

jest.mock('react-redux', () => ({
  connect: () => (Component) => Component,
  useSelector: jest.fn(),
  useDispatch: jest.fn()
}));

这段代码会把connect模拟成一个高阶函数，直接返回传入的原组件，绕开Redux连接逻辑，避免报错。

2. 用Provider包裹组件渲染 #

如果测试时未用Redux的Provider包裹组件，也可能触发连接逻辑异常。确保渲染组件时注入模拟Store：

import { Provider } from 'react-redux';
import { render } from '@testing-library/react';
import configureStore from 'redux-mock-store';
import Leaderboard from '../Leaderboard';

const mockStore = configureStore([]);

test('Leaderboard组件渲染正常', () => {
  const store = mockStore({});
  render(
    <Provider store={store}>
      <Leaderboard />
    </Provider>
  );
  // 后续断言逻辑
});

3. 直接测试未连接的原始组件 #

如果组件文件同时导出了未连接的原始组件（通常会用命名导出），可以直接导入该版本测试，完全绕开connect：

import { Leaderboard as UnconnectedLeaderboard } from '../Leaderboard';

test('未连接的Leaderboard组件渲染正常', () => {
  render(<UnconnectedLeaderboard /* 传入props替代mapStateToProps的返回值 */ />);
  // 后续断言逻辑
});

4. 检查测试文件的react-redux导入路径 #

确保测试文件中react-redux的导入方式和组件文件完全一致，比如组件用import { connect } from 'react-redux'，测试中不要使用相对路径导入该模块，避免模块解析错误。

内容的提问来源于stack exchange，提问作者Jack Sparrow