NgRx单元测试中dispatch后如何检测组件内Store变化？

问题根源 #

1. 组件自动覆盖主题：组件ngOnInit的订阅逻辑中，当themeState.isChanged为false时，会自动调用getPreferredTheme()并派发主题切换action。如果测试初始状态的isChanged是false，你手动派发的dark主题会被组件自动派发的偏好主题（大概率是light）覆盖。
2. MockStore无自动状态更新：provideMockStore生成的MockStore不会像真实Store那样通过reducer自动更新状态，必须手动模拟状态变化。

具体解决方案 #

方案1：修改测试初始状态，关闭自动派发逻辑 #

直接在测试初始状态中将isChanged设为true，阻止组件自动触发偏好主题派发：

const initialState = {
  theme: {
    ...fromTheme.initialState,
    isChanged: true // 阻止组件自动派发主题
  },
};

方案2：Mock getPreferredTheme函数 #

在测试中mock该函数，让它返回你需要的主题值，避免覆盖手动操作：

// 在beforeEach块顶部添加，替换实际文件路径
jest.mock('./utils/theme-utils', () => ({
  getPreferredTheme: () => 'dark'
}));

方案3：手动更新MockStore的状态 #

通过overrideSelector强制设置selector的返回值，确保组件能接收到更新后的主题状态：

it('should have a class with theme', () => {
  expect(compiled.classList.contains('light')).toBeTrue();

  // 手动设置selector返回dark主题状态
  store.overrideSelector(selectTheme, { theme: 'dark', isChanged: true });
  store.dispatch(fromTheme.changeTheme({ payload: 'dark' }));
  
  fixture.detectChanges();

  expect(compiled.classList.contains('dark')).toBeTrue();
});

额外优化：处理异步订阅 #

如果状态更新是异步的，使用fixture.whenStable()确保订阅完成后再断言：

it('should have a class with theme', async () => {
  expect(compiled.classList.contains('light')).toBeTrue();

  store.overrideSelector(selectTheme, { theme: 'dark', isChanged: true });
  store.dispatch(fromTheme.changeTheme({ payload: 'dark' }));
  
  fixture.detectChanges();
  await fixture.whenStable();
  fixture.detectChanges();

  expect(compiled.classList.contains('dark')).toBeTrue();
});

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