NgRx Signal Store 单元测试中如何模拟 watchState 行为

在 Angular 18 中使用 NgRx Signal Store 时，组件通过 watchState 监听状态变化是一种常见模式。然而在单元测试中，当我们需要模拟 Store 时，如何处理 watchState 的测试成为了一个技术难点。

核心问题分析

watchState 是 Signal Store 提供的响应式状态监听机制，其工作原理依赖于 Store 内部的状态更新机制。当我们在测试中直接使用 Mock 对象替代真实 Store 时，会遇到以下挑战：

1. Mock 对象通常不具备真实 Store 的状态更新能力
2. watchState 的回调函数依赖于 Store 内部的状态变更通知
3. 测试需要验证组件是否正确响应状态变化

解决方案：创建功能完备的轻量级 Store

正确的做法是创建一个最小化的 SignalStore 实现作为测试替身，而非简单的 Mock 对象。这个测试用的 Store 需要：

1. 保持与真实 Store 相同的接口
2. 实现基本的 patchState 功能
3. 能够触发状态变更通知

实现示例

// 测试用 Store 实现
class TestQuoteDraftStore {
  private state = signal<State>(initialState);
  private state$ = this.state.asReadonly();

  patchState(update: Partial<State>) {
    this.state.update(current => ({...current, ...update}));
  }

  // 实现 watchState 所需接口
  get stateSignal() {
    return this.state$;
  }
}

// 测试用例
describe('MyComponent', () => {
  let component: MyComponent;
  let testStore: TestQuoteDraftStore;

  beforeEach(() => {
    testStore = new TestQuoteDraftStore();
    component = new MyComponent(testStore as any);
  });

  it('应该响应状态变化', () => {
    testStore.patchState({ key: 'new value' });
    // 验证组件是否正确更新
    expect(component.currentStateSignal()).toEqual(
      expect.objectContaining({ key: 'new value' })
    );
  });
});

关键注意事项

1. 状态更新机制：测试 Store 必须实现 patchState 来模拟状态变更
2. 信号转换：需要将内部信号转换为可读信号供外部使用
3. 类型安全：虽然测试中可能使用类型断言，但应确保接口与真实 Store 一致

最佳实践建议

1. 将测试用 Store 实现提取为可复用工具类
2. 考虑使用工厂函数动态创建测试 Store
3. 对于复杂场景，可以扩展测试 Store 添加辅助测试方法
4. 保持测试 Store 的最小化，避免引入真实业务逻辑

通过这种方式，我们可以在测试环境中准确模拟 Signal Store 的行为，同时保持测试的隔离性和可维护性。这种方法既解决了 watchState 的测试难题，也为其他 Signal Store 功能的测试提供了可靠基础。