Angular单元测试入门：如何为NgRedux编写测试用例（针对this.ngRedux.getState().message.data代码段）

嘿，作为Angular单元测试新手，完全理解你想搞懂NgRedux测试的心情！我先帮你搞定this.ngRedux.getState().message.data这个具体场景的测试，再给你总结通用的测试方法，包你一看就会～

一、针对this.ngRedux.getState().message.data的具体测试用例 #

单元测试的核心是隔离依赖，所以我们不会用真实的NgRedux Store，而是创建一个Mock版本来模拟它的行为。下面是完整的测试示例：

import { TestBed } from '@angular/core/testing';
import { NgRedux } from '@angular-redux/store';
// 替换成你要测试的组件/服务路径
import { YourTargetComponent } from './your-target.component';

// 自定义Mock NgRedux类，只实现我们需要用到的方法
class MockNgRedux {
  // 用来存储模拟的state
  mockState: Record<string, any> = {};

  // 模拟getState方法，返回我们预设的mockState
  getState() {
    return this.mockState;
  }

  // 如果你的代码用到了dispatch，也可以在这里模拟（用jasmine spy更方便）
  dispatch = jasmine.createSpy('dispatch');
}

describe('YourTargetComponent', () => {
  let component: YourTargetComponent;
  let mockNgRedux: MockNgRedux;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [YourTargetComponent],
      providers: [
        // 用MockNgRedux替代真实的NgRedux服务
        { provide: NgRedux, useClass: MockNgRedux }
      ]
    });

    const fixture = TestBed.createComponent(YourTargetComponent);
    component = fixture.componentInstance;
    // 获取注入的MockNgRedux实例
    mockNgRedux = TestBed.inject(NgRedux) as unknown as MockNgRedux;
  });

  it('should correctly retrieve message.data from NgRedux state', () => {
    // 1. 预设我们需要的mock state数据
    const testMessageData = { id: 1, content: 'Hello, Test!' };
    mockNgRedux.mockState = {
      message: {
        data: testMessageData
      }
    };

    // 2. 触发组件中用到getState的逻辑（比如调用某个方法，或者直接访问属性）
    // 假设你的组件里有个方法getCurrentMessage()返回this.ngRedux.getState().message.data
    const result = component.getCurrentMessage();

    // 3. 断言结果是否符合预期
    expect(result).toEqual(testMessageData);
  });

  it('should handle undefined message state gracefully', () => {
    // 测试边界情况：state里没有message属性
    mockNgRedux.mockState = {};

    const result = component.getCurrentMessage();

    // 根据你的业务逻辑断言，比如返回undefined或者空对象
    expect(result).toBeUndefined();
  });
});

二、NgRedux单元测试的通用方法 #

掌握了上面的具体案例，再给你总结几个通用的测试技巧，覆盖大部分NgRedux的使用场景：

1. 永远用Mock替代真实Store #

单元测试只关注当前组件/服务的逻辑，不需要依赖真实的Redux Store和状态流转，所以一定要用Mock类或者Spy来模拟NgRedux的方法。

2. 模拟getState()的不同场景 #

• 正常场景：设置完整的state结构，测试正常逻辑
• 边界场景：测试state缺失某个属性、属性为null/undefined的情况
• 异常场景：如果你的代码有错误处理，可以模拟错误状态

3. 测试dispatch()调用 #

如果你的代码会触发Redux Action，用Spy来监听dispatch方法，断言它是否被调用、调用的参数是否正确：

it('should dispatch the correct action when user submits', () => {
  // 触发组件中的提交逻辑
  component.onSubmit('test input');

  // 断言dispatch被调用，且参数符合预期
  expect(mockNgRedux.dispatch).toHaveBeenCalledWith({
    type: 'SUBMIT_FORM',
    payload: 'test input'
  });
});

4. 测试select()订阅场景 #

如果用了ngRedux.select()来监听状态变化，可以用BehaviorSubject模拟数据流：

import { BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';

class MockNgRedux {
  private stateSubject = new BehaviorSubject({});

  // 模拟select方法，返回对应的Observable
  select = jasmine.createSpy('select').and.callFake((selector) => {
    return this.stateSubject.pipe(
      map(state => {
        if (typeof selector === 'function') {
          // 如果是函数选择器，应用到当前state
          return selector(state);
        }
        // 如果是字符串路径，直接取对应属性
        return state[selector];
      })
    );
  });

  // 更新state的方法，用于测试订阅后的变化
  updateMockState(newState: any) {
    this.stateSubject.next(newState);
  }
}

// 测试订阅逻辑
it('should update view when message.data changes', (done) => {
  // 订阅组件中的数据流（假设组件有个messageData$的Observable）
  component.messageData$.subscribe(data => {
    expect(data.content).toBe('Updated Message');
    done(); // 告诉测试异步操作完成
  });

  // 更新mock state，触发数据流变化
  mockNgRedux.updateMockState({
    message: { data: { id: 2, content: 'Updated Message' } }
  });
});

5. 覆盖所有代码路径 #

确保你的测试覆盖到代码里的所有分支，比如if/else、try/catch等，避免遗漏潜在的bug。

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