React Redux Toolkit测试中如何用模拟数据Mock appSelector？

以下是常见问题点及对应解决方法：

1. Mock方式错误，丢失react-redux其他依赖 #

很多开发者mock useAppSelector时直接替换整个react-redux模块，导致useDispatch等其他钩子失效，影响组件逻辑。

错误示例：

// 覆盖了react-redux所有导出，其他钩子无法正常工作
jest.mock('react-redux', () => ({ useAppSelector: jest.fn() }));

正确写法：
保留原模块其他导出，仅mock useAppSelector：

import { useAppSelector } from 'react-redux';

jest.mock('react-redux', () => ({
  ...jest.requireActual('react-redux'), // 保留原有导出
  useAppSelector: jest.fn()
}));

2. 返回值与组件Selector的期望不匹配 #

如果组件使用自定义Selector（比如const assets = useAppSelector(selectAssets)），需确保mock返回值是Selector处理后的数据，而非整个state对象。

比如真实Redux State结构：

{
  assetsState: {
    list: [{ id: 1, name: "测试资产" }]
  }
}

自定义Selector：

export const selectAssets = state => state.assetsState.list;

mock时需直接返回list数组：

const mockAssetsList = [{ id: 1, name: "测试资产" }];
(useAppSelector as jest.Mock).mockReturnValue(mockAssetsList);

若需精准匹配Selector，可使用mockImplementation：

import { selectAssets } from '../features/assets/assetsSlice';

(useAppSelector as jest.Mock).mockImplementation(selector => {
  if (selector === selectAssets) {
    return [{ id: 1, name: "测试资产" }];
  }
  return undefined;
});

3. 组件渲染时触发异步Action覆盖Mock数据 #

如果组件在useEffect中调用了fetchAssetsAsync，测试时未mock该异步Action，会导致组件发起真实请求（或mock的Action未正确处理），覆盖注入的Mock数据。

解决方法：mock useDispatch并拦截异步Action调用：

import { useDispatch } from 'react-redux';
import { fetchAssetsAsync } from '../features/assets/assetsSlice';

jest.mock('react-redux', () => ({
  ...jest.requireActual('react-redux'),
  useAppSelector: jest.fn(),
  useDispatch: jest.fn()
}));

describe('AssetsPage', () => {
  it('渲染正确的资产表格', () => {
    const mockDispatch = jest.fn();
    (useDispatch as jest.Mock).mockReturnValue(mockDispatch);
    
    (useAppSelector as jest.Mock).mockReturnValue([{ id: 1, name: "测试资产" }]);

    render(<AssetsPage />);

    expect(mockDispatch).toHaveBeenCalledWith(fetchAssetsAsync());
    expect(screen.getByText('测试资产')).toBeInTheDocument();
  });
});

4. Mock时机晚于组件渲染 #

如果useAppSelector.mockReturnValue(...)写在render(<AssetsPage />)之后，组件渲染时已调用useAppSelector，Mock尚未生效，自然获取不到数据。

正确顺序：

// 1. 设置Mock返回值
(useAppSelector as jest.Mock).mockReturnValue(mockAssetsList);
// 2. 渲染组件
render(<AssetsPage />);
// 3. 断言结果
expect(screen.getByText('测试资产')).toBeInTheDocument();

5. 未正确配置测试用Redux Store（若使用Provider包裹） #

如果测试中用Redux Provider包裹组件，需确保测试用Store的State结构与真实环境一致，且包含Mock资产数据：

import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import assetsReducer from '../features/assets/assetsSlice';

const mockStore = configureStore({
  reducer: {
    assetsState: assetsReducer
  },
  preloadedState: {
    assetsState: {
      list: [{ id: 1, name: "测试资产" }]
    }
  }
});

render(
  <Provider store={mockStore}>
    <AssetsPage />
  </Provider>
);

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