如何测试Angular中的route queryParams？

Question

I have a components gets a value from the params of ActivatedRoute.

the components looks like

constructor(
  private route: ActivatedRoute,
  private router: Router,
  private marketService: MarketService,
) { }

ngOnInit() {
  // New Post
  this.route.queryParams.pipe(
    filter(params => params.type))
    .subscribe(
      params => {
        this.isNew = true;
        this.brd_path = params.type;
        this.category_path = this.route.snapshot.params['category_path'];
      },
      () => { },
      () => { }
    );

  // Edit Post
  this.route.queryParams.pipe(
    filter(params => params.no)) 
    .subscribe(
      params => {
        if (!this.marketService.getCurrentMarket()) {
          this.router.navigateByUrl('');
          return;
        }
        this.isNew = false;
        this.market_no = +params.no; 
      }
    );
}

I want to test depend params isNew, brd_path, category_path, market_no

TEST code

describe('SellCreateComponent', () => {
  let component: SellCreateComponent;
  let fixture: ComponentFixture<SellCreateComponent>;
  let el: HTMLElement;
 
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
        RouterTestingModule,
        BrowserAnimationsModule,
      ],
      declarations: [SellCreateComponent],
      providers: [
        { provide: MarketService },
        {
          provide: ActivatedRoute, useValue: {
            paramMap: of(convertToParamMap({ brd_path: 'replica' }))
          }
        },
      ]
    }).compileComponents();
    fixture = TestBed.createComponent(SellCreateComponent);
    component = fixture.componentInstance;
    el = fixture.debugElement.nativeElement;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  describe('ngOnInit', () => {
    it('should get the route parameter', fakeAsync(() => {
      component.ngOnInit();

      expect(component.brd_path).toBe('replica');
      expect(component.isNew).toBe(true);
    }));
  });

});

when i run the test. i got the error.

SellCreateComponent > ngOnInit > should get the route parameter TypeError: Cannot read properties of undefined (reading 'pipe')

Thank you!

Answer 1

I think you're mocking ActivatedRoute incorrectly.

You're supplying paramMap but you're looking for queryParams .

Try this:

provide: ActivatedRoute, useValue: {
            queryParams: of(convertToParamMap({ brd_path: 'replica' }))
          }

That should hopefully get rid of that error.