如何为NgRx代码编写Jest测试？聚焦Actions与Select测试

一、测试Actions（dispatch操作） #

针对你给出的MyService，核心是验证调用startAction时，是否正确触发了对应的NgRx Action。这里不需要真实的Store，用NgRx提供的Mock Store即可：

测试代码示例 #

import { TestBed } from '@angular/core/testing';
import { provideMockStore, MockStore } from '@ngrx/store/testing';
import { MyService } from './my.service';
import * as MyActions from './my.actions'; // 引入你的Action定义文件

describe('MyService', () => {
  let service: MyService;
  let mockStore: MockStore;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        MyService,
        provideMockStore() // 注入Mock Store，无需初始状态
      ]
    });

    service = TestBed.inject(MyService);
    mockStore = TestBed.inject(MockStore);
    // 监听store的dispatch方法，方便后续断言
    jest.spyOn(mockStore, 'dispatch');
  });

  it('调用startAction时应触发Action1', () => {
    service.startAction();
    // 断言dispatch被调用，且参数是正确的Action实例
    expect(mockStore.dispatch).toHaveBeenCalledWith(MyActions.Action1());
  });
});

关键说明 #

• 使用@ngrx/store/testing里的provideMockStore创建模拟Store，避免依赖真实状态管理逻辑；
• 通过jest.spyOn监听dispatch方法，验证其调用时机和参数是否符合预期。

二、测试Select操作 #

假设你的MyService有依赖Selector的方法（比如从Store中获取数据），测试核心是验证Service能正确获取Selector返回的状态值：

先给Service补充一个示例方法 #

// MyService中新增依赖Selector的方法
getTargetData() {
  return this.store.select(selectTargetData); // selectTargetData是你的自定义Selector
}

测试代码示例 #

import { TestBed } from '@angular/core/testing';
import { provideMockStore, MockStore } from '@ngrx/store/testing';
import { MyService } from './my.service';
import { selectTargetData } from './my.selectors'; // 引入你的Selector定义文件

describe('MyService', () => {
  let service: MyService;
  let mockStore: MockStore;
  // 配置模拟的初始状态，要匹配Selector对应的状态结构
  const initialState = {
    featureModule: {
      targetData: '模拟测试数据'
    }
  };

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        MyService,
        provideMockStore({ initialState }) // 传入初始状态
      ]
    });

    service = TestBed.inject(MyService);
    mockStore = TestBed.inject(MockStore);
  });

  it('应从Selector获取正确的数据', (done) => {
    // 若需动态修改Selector返回值，可使用overrideSelector覆盖初始配置
    // mockStore.overrideSelector(selectTargetData, '更新后的测试数据');

    service.getTargetData().subscribe(data => {
      expect(data).toBe('模拟测试数据');
      done(); // 异步测试需调用done结束
    });
  });
});

关键说明 #

• 初始状态initialState的结构要和你的状态树匹配，保证Selector能正确取到值；
• 用overrideSelector可以快速修改Selector的返回值，测试不同状态场景下的Service行为；
• 因为select返回Observable，所以测试时需要用subscribe+done处理异步逻辑。

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