React单元测试报错：injectStore不是函数（Redux/Sagas场景）

错误根源 #

测试运行时，tab.test.tsx的依赖链会触发index.tsx的执行，而index.tsx中调用injectStore(store)的时机早于测试代码中的注入逻辑；同时，测试场景下不需要真实的axios拦截器逻辑，真实模块的加载顺序问题导致injectStore无法被正确识别为可调用函数。

解决方案 #

方案1：Mock拦截器模块（推荐） #

在测试文件顶部添加mock，替换真实的webapi-axios-interceptor模块，避免执行真实的拦截器逻辑，同时保证injectStore可正常调用：

// 在测试文件最顶部添加mock代码
jest.mock('../../../../../network/webapi-axios-interceptor', () => ({
  injectStore: jest.fn(),
  default: jest.fn()
}));

// 原测试代码
import React from 'react'
import { render } from '@testing-library/react'
import { mock } from '../__mock__/mock'
import Tab from '../Tab'
import configureStore from '../../../../../store'
import { Provider } from 'react-redux';
import { injectStore } from '../../../../../network/webapi-axios-interceptor'

describe('Tab', () => {
  beforeEach(() => {
    jest.resetAllMocks();
  })

  it('should render "Tab" component', () => {
    const store = configureStore({})
    injectStore(store)

    const { container } = render(
      <Provider store={store}>
        <Tab
          key={mock.key}
          onSuccessfulMerge={jest.fn()}
        />
      </Provider>
    )

    expect(container).toBeInTheDocument()
  })
})

注意：原测试中expect(result).toBeInTheDocument()存在错误，render返回的对象需通过container或查询后的DOM元素进行断言。

方案2：给拦截器增加容错逻辑 #

修改webapi-axios-interceptor.tsx中的axiosRequest函数，增加store存在性判断，避免未注入store时触发报错：

function axiosRequest(
  request: InternalAxiosRequestConfig
): InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig> {
  // 增加store存在的判断，避免未注入时报错
  if(request.headers && store) {
    request.headers = store.getState().config.config.currentUser
  }
  return request
}

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