NGRX 路由器成对单元测试

Question

有人知道如何为以下函数编写单元测试吗？我花了很多时间试图找到解决方案，但没有任何结果。 selectCurrentRoute 是一个 ngrx 路由器选择器。

this.store
      .pipe(select(selectCurrentRoute), takeUntil(this.destroy), pairwise())
      .subscribe(([previousRoute, currentRoute]) => {
        if (previousRoute?.routeConfig?.path === 'login') {
          this.getSettings();
        }
      });

提前致谢！

Answer 1

尝试这样的事情（这是 Angular 5 和 Ngrx 4）：

import { Component } from '@angular/core';
import { routerReducer, RouterStateSerializer, StoreRouterConnectingModule } from '@ngrx/router-store';

// MockComponent for the routes we will set up
@Component({
  template: ``,
})
class MockComponent { }

describe('Your component', () => {
  ....
  let store: Store<any>;
  let router: Router;
  
  beforeEach(async(() => {
   TestBed.configureTestingModule({
     imports: [
       RouterTestingModule.withRoutes(
         [{ path: '', component: MockComponent }],
       ),
       StoreModule.forRoot({
         router: routerReducer, // put ngrx router reducer how it is set up for your store
         // put other reducers as you see fit
       }),
       StoreRouterConnectingModule, 
     ],
     declarations: [MockComponent],
   }).compileComponent();
  }));

  beforeEach(() => {
    ....
    store = TestBed.get(Store);
    router = TestBed.get(Router); // this should be .inject instead of .get in Angular 9+
    ....
  });

  beforeEach(async done => {
    await router.navigate(['']); // two navigations so pairWise gets triggered
    await router.navigate(['']); // Angular testing may not allow two navigation, give it a try though
    done();
  });

  it('your test', () => {
    ....
  });

});

NGRX 路由器成对单元测试

NGRX Router pairwise unit test

unit-testing

typescript

angular

ngrx-store

ngrx-router-store