测试报TypeError: _ViewStore.default不是构造函数问题求助

核心原因分析 #

报错的直接原因是测试代码中尝试实例化的不是ViewStore类，而是一个已经实例化的对象，同时测试环境未正确处理JourneyStore的依赖，也会间接导致类加载或构造失败。

1. 导入混淆：类 vs 实例 #

业务代码中，你将ViewStore类实例化后导出：

import ViewStoreClass from './ViewStore';
const ViewStore = new ViewStoreClass();

如果测试代码错误导入了这个已实例化的ViewStore变量，而非ViewStore类本身，执行new ViewStore()就会抛出“不是构造函数”的错误——因为实例对象无法被new关键字调用。

2. JourneyStore依赖未初始化 #

ViewStore的setCurrentPageFromJourney方法直接依赖全局的JourneyStore实例，测试环境中如果没有预先初始化这个实例，会导致类在加载或执行方法时抛出隐含错误，间接影响构造函数的正常调用（你提到注释掉JourneyStore相关代码测试就能通过，也验证了这一点）。

解决方案 #

方案1：修正测试中的导入逻辑 #

确保测试代码导入的是ViewStore类本身，而非已实例化的对象：

// 测试文件中
import ViewStore from './path/to/ViewStore'; // 导入类本身

describe('ViewStore', () => {
  let store;

  beforeEach(() => {
    store = new ViewStore(); // 正确实例化类
  });

  test('should pass', () => {
    expect(true).toBe(true);
  });
});

方案2：模拟JourneyStore依赖 #

由于ViewStore依赖全局的JourneyStore，测试时需要模拟这个依赖（以Jest为例）：

// 测试文件顶部
jest.mock('./path/to/JourneyStore', () => ({
  journeyParams: {
    state: 'a' // 模拟需要的状态值
  }
}));

import ViewStore from './path/to/ViewStore';

describe('ViewStore', () => {
  let store;

  beforeEach(() => {
    store = new ViewStore();
  });

  test('should set correct page from journey state', () => {
    store.setCurrentPageFromJourney();
    expect(store.currentPage).toBe(PDP_VIEWS.DEVICE);
  });
});

方案3：重构依赖注入（长期优雅方案） #

避免直接依赖全局实例，通过构造函数注入JourneyStore，降低耦合度：

// 修改ViewStore类
class ViewStore {
  currentPage: Stage;
  previousPageHistory: Stage[];
  private journeyStore;

  constructor(journeyStore) {
    makeAutoObservable(this);
    this.journeyStore = journeyStore;
    this.currentPage = PDP_VIEWS.DEVICE;
    this.previousPageHistory = [];
  }

  setCurrentPageFromJourney() {
    const journeyState = this.journeyStore.journeyParams.state;

    switch (journeyState) {
      case `a`:
        this.setCurrentPage = PDP_VIEWS.DEVICE;
        break;
      case `b`:
        this.setCurrentPage = PDP_VIEWS.INSURANCE;
        break;
    }
  }
}

// 业务代码中实例化时传入JourneyStore
import ViewStoreClass from './ViewStore';
import JourneyStore from './JourneyStore';
const ViewStore = new ViewStoreClass(JourneyStore);

// 测试代码中传入模拟的JourneyStore
describe('ViewStore', () => {
  let store;
  let mockJourneyStore;

  beforeEach(() => {
    mockJourneyStore = {
      journeyParams: { state: 'a' }
    };
    store = new ViewStore(mockJourneyStore);
  });

  test('should pass', () => {
    expect(true).toBe(true);
  });
});

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