NGRX如何直接设置Store状态以简化单元测试步骤

完全可以跳过通过action构造初始状态的步骤，直接给Store设置指定值，适配你当前使用的Angular 10 + NGRX 10版本，具体实现如下：

实现步骤 #

• 第一步：测试模块配置时引入NGRX官方提供的测试工具类MockStore替代真实Store
  先导入依赖：

  import { MockStore, provideMockStore } from '@ngrx/store/testing';
  // 替换为你项目中的根状态类型定义
  import type { AppState } from './app.state';
  

  在TestBed配置中注册MockStore：

  let store: MockStore<AppState>;
  
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        // 注册MockStore，initialState可以传空对象，后续单测会单独设置状态
        provideMockStore({ initialState: {} }),
        // 你其他的测试依赖配置
      ]
    });
    // 获取MockStore实例
    store = TestBed.inject(MockStore) as MockStore<AppState>;
  });
  

• 第二步：每个单测中直接调用setState方法设置目标状态
  不需要提前dispatch任何action，直接传入你需要的完整根状态即可：

  it('测试目标action执行后状态符合预期', () => {
    // 直接设置你需要的任意初始状态
    store.setState({
      userModule: { userId: '123', userName: '测试用户' },
      orderModule: { orderList: [], totalCount: 0 }
    });
  
    // 执行待测试的action
    store.dispatch(待测试的Action实例);
  
    // 校验状态/副作用执行结果即可
    expect(store.selectSnapshot(xxxSelector)).toEqual(xxx预期值);
  })
  

场景适配说明 #

• 解决多测试共用Store实例的问题：每个单测可以独立调用setState覆盖当前状态，不同单测之间的状态不会互相干扰
• 解决effects执行前无法更新状态的问题：setState设置的状态会即时生效，后续dispatch action触发的reducer、effects读取到的都是更新后的状态，不存在仅初始化阶段生效的限制
• 仅需要修改部分状态的场景，可以先获取当前状态再合并更新：

  store.setState({
    ...store.state,
    userModule: newUserState
  });
  

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