React函数组件单元测试render()无返回内容问题排查

你遇到的渲染无内容问题，是流程断点叠加错误测试逻辑导致的，就算简化组件为纯p标签也无法解决问题的核心原因是，组件的提前返回分支没有被正确满足前置条件。

具体问题拆解 #

• 自定义hook的mock逻辑无效：你当前的jest.mock只是把原useTeamPreferences方法包装成jest.fn，没有强制指定返回值。测试环境下原hook拿不到真实的团队偏好配置，返回的对象中show_advanced_search_button字段为假值，组件走到if (!teamPreferences.show_advanced_search_button) return null;分支直接返回空，根本执行不到后续的UI渲染代码。这也是你之前把组件简化为返回p标签时，问题依旧存在的原因——你没有提前移除/绕开这个提前返回null的分支。
• 测试断言完全失效：你当前写的expect(container).toBeTruthy()永远会通过，因为container是你手动创建的div DOM节点，不管组件有没有往节点里插入实际内容，这个节点本身肯定存在，完全起不到校验组件真实渲染结果的作用。
• 第三方依赖未隔离：组件挂载后会在useEffect中调用advancedSearchService.listDocumentTypes()发起异步请求，测试环境下这个真实服务的调用会因为网络/环境权限问题抛错，打断组件的正常渲染流程。

可直接落地的修复方案 #

1. 修正useTeamPreferences的mock逻辑，不要复用原hook的实现，强制返回带有效配置的对象：

   jest.mock('common/useTeamPreferences', () => ({
       __esModule: true,
       default: jest.fn(() => ({
           show_advanced_search_button: true,
       }))
   }));
   

2. 隔离真实服务依赖，避免异步请求报错干扰渲染：

   jest.mock('services/advanced-search.service', () => ({
       advancedSearchService: {
           listDocumentTypes: jest.fn(() => Promise.resolve([]))
       }
   }));
   

3. 修正测试断言逻辑，直接校验组件渲染出的实际DOM内容：

   it('should render 新建筛选按钮', () => {
       const renderBtn = container.querySelector('a.btn_patient-filter--new');
       expect(renderBtn).toBeTruthy();
       expect(renderBtn?.textContent).toBe('New Filter');
   });
   

4. 适配React18+场景：如果组件内存在异步状态更新，需要把异步逻辑的执行过程放到await act()中包裹，避免出现状态更新警告导致的渲染异常。

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