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

Question

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

score 0 · Answer 1 · answered Oct 15 '22 at 12:42

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

Thank you very much for your answer. It didn't solve the problem completely but you helped me a lot. I would upvote your answer but right now I lack the points to do so. — kiwi, Oct 15 '22 at 13:27

score 0 · Accepted Answer · answered Oct 15 '22 at 13:32

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

// ...

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

2 Answers2