NgRx Signal Store：如何模拟withEntities实体？

当你的NgRx Signal Store使用withEntities特性时，它会自动生成一系列实体管理相关的信号（如entities、ids、entityMap）和操作方法（如addEntities、updateEntities）。测试时只需模拟组件实际用到的部分即可，无需实现全部接口。

1. 创建模拟Store对象 #

根据组件依赖的属性，用Angular的signal包装预设数据，同时模拟需要的操作方法（可用测试框架的spy函数做调用断言）：

import { signal } from '@angular/core';
// 若用Jasmine
import jasmine from 'jasmine';
// 若用Jest则替换为jest.fn()

type Todo = {
  id: number;
  text: string;
  completed: boolean;
};

const mockTodosStore = {
  // 模拟entities信号，返回预设的待办数据
  entities: signal<Todo[]>([
    { id: 1, text: '完成测试用例', completed: false },
    { id: 2, text: '整理文档', completed: true }
  ]),
  // 模拟addEntities方法，用于后续断言调用情况
  addEntities: jasmine.createSpy('addEntities'),
  // 若组件用到ids/entityMap，按需模拟
  ids: signal<number[]>([1, 2]),
  entityMap: signal<Record<number, Todo>>({
    1: { id: 1, text: '完成测试用例', completed: false },
    2: { id: 2, text: '整理文档', completed: true }
  })
};

2. 在测试模块中注入模拟对象 #

将上述模拟对象作为TodosStore的提供者：

TestBed.configureTestingModule({
  imports: [SomeComponent],
  providers: [
    {
      provide: TodosStore,
      useValue: mockTodosStore
    },
  ],
});

3. 测试中更新模拟状态（可选） #

如果需要在测试流程中修改实体数据，直接调用信号的set方法更新即可：

// 添加新的待办项
mockTodosStore.entities.set([
  ...mockTodosStore.entities(),
  { id: 3, text: '优化代码', completed: false }
]);

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