react-testing-library测试TS公共函数继承HttpService报错排查

核心报错原因 #

你遇到的元素找不到问题和HttpService本身的拦截器逻辑无关，是几个错误叠加导致mock完全失效，组件拿不到测试数据：

• 方法名不匹配：服务类里定义的方法是getSomething，测试代码里mock的是不存在的getWarningList方法，mock逻辑根本不会触发
• mock实例不共享：你在测试文件顶层手动new SomeService()创建的mock实例，和组件内部fetchList里自己new出来的服务实例完全是两个对象，给测试文件里的实例配置返回值不会影响组件内的实例
• 服务方法漏写return：getSomething里发起了axios请求但没有把Promise返回，外部调用await的时候只能拿到undefined，就算请求成功也没法把数据传给组件
• 同步查找元素时机不对：screen.getByText是同步执行的，刚执行完render的时候异步请求还没返回、列表还没渲染，自然找不到对应文本

分步修复 #

1. 补全服务方法的return
   修复someService.ts里的getSomething方法，把请求Promise返回：

   public async getSomething(params: any) {
     // 补return，否则调用方拿不到请求结果
     return this.instance({
       method: 'GET',
       url: warningListUrl,
       params,
     }).then((res) => res.data);
   }
   

2. 修正Jest mock逻辑
   不要在测试文件顶层单独创建服务实例，要mock整个模块的构造函数，确保组件内部创建的实例也会被mock覆盖，同时注意mock的方法名和实际定义一致：

   // ReactComponent.test.tsx
   import SomeService from '../../services/SomeService';
   
   jest.mock('../../services/SomeService');
   // 统一配置mock实例的方法
   const mockGetSomething = jest.fn();
   (SomeService as jest.Mock).mockImplementation(() => ({
     getSomething: mockGetSomething
   }));
   
   describe('page tests', () => {
     test('page renders without crashing', async () => {
       // 配置测试桩返回
       mockGetSomething.mockResolvedValue(someMatchingData);
       await act(async () => {
         render(<ReactComponent />);
       });
       // 用findByText替代getByText，自动等待异步渲染完成
       const text = await screen.findByText('Warning 1');
       expect(text).toBeInTheDocument();
     });
   });
   

3. （可选优化）简化响应拦截器逻辑
   你现在写的错误拦截器没必要额外包一层Promise，直接写即可：

   this.instance.interceptors.response.use(
     (response) => response,
     (error) => Promise.reject(error.response)
   );
   

补充说明 #

你提到的「直接用未配置拦截器的axios.get能正常跑，用继承HttpService的this.instance就报错」本质是mock失效后的表现：mock没生效时测试环境会发起真实的网络请求，带拦截器的实例会往配置的HOST地址发请求，测试环境下这个地址不可访问，请求直接失败；裸axios.get如果没有配置baseURL默认会往测试环境的本地地址发，可能刚好被其他全局mock规则命中，所以看起来能正常运行。

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