angularunit-testingrouterangular-router-params

How to write an Angular Unit Test for route.queryParamMap?


I've added a route.queryParamMap.pipe(..) to this project. However, now the unit test for the component fails with TypeError: Cannot read properties of undefined (reading 'pipe') inside "should create". I'm unable to find an adequate solution to this. What changes do I have to implement into the unit test? How can I mock an ActivatedRoute or queryParamMap?

This is the component class:

export class ContainerComponent implements OnInit {

public tab$: Observable<string> = this.route.queryParamMap.pipe(
    map(params => params.get('type')),
    distinctUntilChanged()
);

// ...

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

ngOnInit() {
    //...
}

This is the unit test without the imports:

describe('ContainerComponent', () => {
    let component: ContainerComponent;
    let fixture: ComponentFixture<ContainerComponent>;

beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
        imports: [
            TranslateModule.forRoot(),
            NgMaterialModule,
        ],
        providers: [
            {
                provide: Router,
                useValue: {navigate: jest.fn()},
            },
            {
                provide: ActivatedRoute,
                useValue: {
                    snapshot: {
                        queryParams: {
                            type: 'placeholder',
                        }
                    },
                    routeConfig: {
                        path: '',
                    }
                }
            },
        ],
        declarations: [
            ContainerComponent
        ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
        .compileComponents();
}));

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

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

Solution

  • Corrected the Unit Test by adding queryParamMap: of(params) and RouterTestingModule:

    import {of} from 'rxjs';
    import {RouterTestingModule} from '@angular/router/testing';
    
    const params = {
        get: jest.fn()
    };
    
    describe('ContainerComponent', () => {
    //...
    
    beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            imports: [
                TranslateModule.forRoot(),
                RouterTestingModule,
                NgMaterialModule,
            ],
            providers: [
                 // ...
                {
                    provide: ActivatedRoute,
                    useValue: {
                        queryParamMap: of(params),
                        snapshot: {
                            queryParams: {
                                type: 'placeholder',
                            },
                        },
    
    // ...