ngRedux测试报错：this.ngRedux.dispatch()不是函数求助

我之前也踩过这个坑，折腾了好几个小时才捋清楚问题所在。你的报错核心原因是测试环境里没有正确Mock NgRedux服务，导致组件或ModuleActions拿到的NgRedux实例缺少dispatch方法。下面一步步给你解决思路：

1. 给测试环境提供正确的NgRedux Mock #

在Angular测试中，我们不能直接用真实的NgRedux实例，必须手动创建带有dispatch（以及你用到的其他方法，比如select）的mock对象，通过TestBed提供给组件和依赖服务。

给你一个具体的测试配置示例：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NgRedux } from '@angular-redux/store';
import { TestedClassComponent } from './tested-class.component';
import { ModuleActions } from './module.actions';

describe('TestedClassComponent', () => {
  let component: TestedClassComponent;
  let fixture: ComponentFixture<TestedClassComponent>;
  let mockNgRedux: jasmine.SpyObj<NgRedux<any>>;

  beforeEach(async () => {
    // 创建带spy的NgRedux mock，包含需要用到的方法
    mockNgRedux = jasmine.createSpyObj('NgRedux', ['dispatch', 'select']);

    await TestBed.configureTestingModule({
      declarations: [TestedClassComponent],
      providers: [
        ModuleActions,
        // 用mock替换真实NgRedux服务
        { provide: NgRedux, useValue: mockNgRedux }
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(TestedClassComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  // 测试用例示例：验证dispatch是否被触发
  it('should trigger dispatch when invoking module action', () => {
    // 调用组件中触发ModuleActions的方法
    component.callModuleAction();

    // 断言dispatch方法被调用
    expect(mockNgRedux.dispatch).toHaveBeenCalled();
  });
});

2. 检查ModuleActions的依赖注入是否规范 #

确保你的ModuleActions类是通过构造函数注入NgRedux，而不是用静态方法或直接实例化的方式：

import { Injectable } from '@angular/core';
import { NgRedux } from '@angular-redux/store';
import { IAppState } from './app.state';

@Injectable()
export class ModuleActions {
  // 必须通过构造函数注入NgRedux，才能在测试中拿到mock实例
  constructor(private ngRedux: NgRedux<IAppState>) {}

  yourTargetAction() {
    // 你的条件dispatch逻辑
    if (someCondition) {
      this.ngRedux.dispatch({ type: 'YOUR_ACTION_TYPE', payload: someData });
    }
  }
}

如果ModuleActions里用了静态方法调用NgRedux，测试中的mock会完全失效，必须改成依赖注入的方式。

3. 排查其他可能的问题 #

如果上面两步都做了还是报错，要检查：

• 组件是否直接注入了NgRedux，但测试中没有提供对应的mock？
• ModuleActions是否在某个地方用new ModuleActions()手动实例化了？这种情况下Angular的依赖注入不会生效，mock的NgRedux也不会被传入，会导致实例拿到的NgRedux是undefined。

最后验证 #

你可以在测试用例里临时打印this.ngRedux的值，确认它是我们创建的mock对象，而不是undefined或者空对象，这样就能快速定位问题了。

内容的提问来源于stack exchange，提问作者Jean-Baptiste