模块联邦Redux Toolkit的useStore在React测试中报错的解决方法

针对测试时出现的 TypeError: (0 , useStore) is not a function 错误，核心原因是测试环境无法正确加载模块联邦的远程依赖，以下是两种可行的解决方式：

方式一：直接Mock远程模块的useStore函数 #

这是最快捷的方案，适合只需要验证组件渲染逻辑、不依赖真实Redux状态变化的场景。

在组件的测试文件中添加Mock逻辑：

// 先Mock远程模块
jest.mock('store/store', () => ({
  useStore: () => ({
    selectDrawer: { isOpen: false }, // 按组件需要模拟对应状态
    selectTrack: {}
    // 补充useStore返回的其他字段
  })
}));

// 导入测试工具和组件
import { render, screen } from '@testing-library/react';
import SimpleComponent from './SimpleComponent';

// 编写测试用例
test('SimpleComponent渲染正常', () => {
  render(<SimpleComponent />);
  // 这里添加你的断言，比如检查某个元素是否存在
  expect(screen.getByText('目标文本')).toBeInTheDocument();
});

方式二：搭建测试用Redux环境（适合依赖真实状态逻辑的场景） #

如果需要测试组件与Redux状态交互的逻辑，需要在测试中配置Redux Provider，模拟对应的store结构：

import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import SimpleComponent from './SimpleComponent';

// 模拟远程store的reducer结构
const mockRootReducer = {
  selectD: (state = { isOpen: false }) => state,
  t: (state = {}) => state
  // 补充其他reducer
};

// 创建测试用store
const testStore = configureStore({
  reducer: mockRootReducer,
  preloadedState: {
    selectD: { isOpen: true }, // 初始化测试状态
    t: { trackId: 'test-id' }
  }
});

test('组件根据Redux状态正确渲染', () => {
  render(
    <Provider store={testStore}>
      <SimpleComponent />
    </Provider>
  );
  // 断言组件根据状态渲染了对应内容
  expect(screen.getByText('抽屉已打开')).toBeInTheDocument();
});

额外配置：Jest全局Mock（可选） #

如果多个测试文件都需要用到这个Mock，可以在项目根目录创建__mocks__/store/store.js文件，统一管理Mock内容：

// __mocks__/store/store.js
export const useStore = () => ({
  selectDrawer: { isOpen: false },
  selectTrack: {}
});

然后在jest.config.js中添加配置，让Jest自动使用这个Mock：

module.exports = {
  moduleNameMapper: {
    '^store/store$': '<rootDir>/__mocks__/store/store.js'
  }
};

内容的提问来源于stack exchange，提问作者Alfredo Barillas