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

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();
});
});

CodePudding user response：

You are providing the following code as ActivatedRoute:

{
    snapshot: {
        queryParams: {
            type: 'placeholder',
        }
    },
    routeConfig: {
        path: '',
    }
}

So your queryParams is not observable and you are getting an error, because of that. To solve this problem you can import RouterTestingModule to your test suit or you can mock queryParams with an observable. That means instead of

{
    type: 'placeholder',
}

use the following code:

of({ type: 'placeholder' })

CodePudding user response：

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',
                        },
                    },

// ...