如何在组件中Mock Ngrx Selector并编写测试用例

我来帮你搞定这个Ngrx selector的测试问题！你遇到的核心痛点其实是如何模拟Ngrx的selector数据流，同时处理select方法多次调用的情况，下面我一步步给你讲清楚怎么做：

核心思路 #

我们需要用Subject来模拟selector返回的可观察流，这样就能动态更新值并触发组件模板的变化；同时通过callFake（而不是固定的andReturn）来匹配不同的selector，解决select方法多次调用的问题。

具体实现步骤 #

1. 准备测试依赖与Mock对象

首先定义对应selector的Subject，用来模拟数据流；然后创建Mock的Store，让它的select方法根据传入的selector返回对应的Subject流。

2. 配置TestBed

在测试模块的providers里注入Mock的Store，用callFake来区分不同的selector，返回对应的Observable。

3. 编写测试用例

通过Subject的next方法更新值，调用fixture.detectChanges()触发变更检测，然后断言模板的渲染结果。

完整代码示例 #

假设你的组件代码是这样的：

@Component({
  template: `
    <div *ngIf="user$ | async as user">Hello {{user.name}}</div>
    <ul>
      <li *ngFor="let product of products$ | async">{{product.name}}</li>
    </ul>
  `
})
export class MyComponent {
  user$ = this.store.select(fromStore.selectUser);
  products$ = this.store.select(fromStore.selectProducts);

  constructor(private store: Store) {}
}

对应的测试代码如下：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Store } from '@ngrx/store';
import { Subject, EMPTY } from 'rxjs';
import { MyComponent } from './my.component';
import * as fromStore from './store';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let user$: Subject<fromStore.User>;
  let products$: Subject<fromStore.Product[]>;

  beforeEach(async () => {
    // 初始化模拟数据流的Subject
    user$ = new Subject<fromStore.User>();
    products$ = new Subject<fromStore.Product[]>();

    await TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [
        {
          provide: Store,
          useValue: {
            // 用callFake匹配不同selector，返回对应Subject的流
            select: jasmine.createSpy('select').and.callFake((selector) => {
              if (selector === fromStore.selectUser) {
                return user$.asObservable();
              } else if (selector === fromStore.selectProducts) {
                return products$.asObservable();
              }
              // 其他未匹配的selector返回空流
              return EMPTY;
            })
          }
        }
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    // 初始化初始值
    user$.next({ id: 1, name: 'Alice' });
    products$.next([{ id: 101, name: 'Laptop' }, { id: 102, name: 'Phone' }]);
    fixture.detectChanges();
  });

  // 测试初始状态渲染
  it('should display initial user name and products', () => {
    const userElement = fixture.nativeElement.querySelector('div');
    expect(userElement.textContent).toContain('Hello Alice');

    const productItems = fixture.nativeElement.querySelectorAll('li');
    expect(productItems.length).toBe(2);
    expect(productItems[0].textContent).toBe('Laptop');
  });

  // 测试用户数据更新后的模板变化
  it('should update user name when user data changes', () => {
    user$.next({ id: 2, name: 'Bob' });
    fixture.detectChanges();
    const userElement = fixture.nativeElement.querySelector('div');
    expect(userElement.textContent).toContain('Hello Bob');
  });

  // 测试商品数据更新后的模板变化
  it('should update product list when product data changes', () => {
    products$.next([{ id: 103, name: 'Tablet' }]);
    fixture.detectChanges();
    const productItems = fixture.nativeElement.querySelectorAll('li');
    expect(productItems.length).toBe(1);
    expect(productItems[0].textContent).toBe('Tablet');
  });

  // 清理资源，避免内存泄漏
  afterEach(() => {
    user$.complete();
    products$.complete();
  });
});

关键细节说明 #

• 用Subject模拟数据流：Subject可以让我们随时通过next方法推送新值，完美模拟Ngrx store状态变化的场景。
• callFake处理多次select调用：不管select方法被调用多少次，只要是同一个selector，都会返回同一个Observable流，解决了你不知道怎么写多个andReturn的问题。
• 触发变更检测：每次更新Subject的值后，必须调用fixture.detectChanges()，Angular才会更新模板内容。

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