未使用懒加载却触发Suspense要求，React组件测试报错求解

你的组件里虽然没直接用懒加载，但报错说明组件渲染时触发了需要Suspense的异步操作——大概率是useInitTerm钩子或者reportSlice.useSlice内部包含了异步数据获取逻辑（比如RTK Query的查询、异步状态初始化），测试时这些依赖没被正确处理，导致组件挂起。

以下是无需强制添加Suspense的解决思路：

1. 模拟异步依赖的钩子 #

直接模拟useInitTerm，让它同步返回测试用的静态数据，避免触发内部异步逻辑：

// 在测试文件顶部添加模拟代码
jest.mock('../path/to/useInitTerm', () => ({
  useInitTerm: () => ({
    accountingPeriod: [
      { id: 1, text: '测试期间1' },
      { id: 2, text: '测试期间2' }
    ]
  })
}))

2. 模拟Redux Slice的useSlice方法 #

如果reportSlice.useSlice内部依赖异步状态（比如从异步存储加载初始值），用jest.mock模拟它的返回值：

jest.mock('../path/to/reportSlice', () => ({
  useSlice: jest.fn(() => ({
    filters: { currentTermId: 1, reportType: 1 }
  })),
  setFilters: jest.fn()
}))

3. 完整测试示例 #

修改后的测试文件：

import { render, screen } from '@testing-library/react';
import { Filter } from './Filter';

// 模拟依赖钩子和slice
jest.mock('../hooks/useInitTerm', () => ({
  useInitTerm: () => ({
    accountingPeriod: [{ id: 1, text: '2024第一季度' }]
  })
}));

jest.mock('../store/reportSlice', () => ({
  useSlice: jest.fn(() => ({
    filters: { currentTermId: 1, reportType: 1 }
  })),
  setFilters: jest.fn()
}));

describe('<Filter />', () => {
  it('should render correctly', () => {
    render(<Filter />);
    expect(screen.getByText('output_target_accounting_period')).toBeInTheDocument();
    expect(screen.getByText('output_method')).toBeInTheDocument();
  });
});

问题根源说明 #

Suspense的触发场景不止懒加载，任何在组件渲染阶段发起的异步数据请求（比如用了useSuspenseQuery、异步Context、或自定义钩子内部的Promise逻辑）都会让组件进入挂起状态，测试时如果没提前准备好同步的模拟数据，就会抛出该错误。

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