How to unit test a component with TranslateService

Question

I followed this very carefully: Git issue #636.

But I'm not able to solve my problem. Let me explain. I've a TimeSelector component for which I've externalized all strings in a file i18n/en-US.json. Initially when the page loads, I'm setting recievedFromChild variable with CY 2020 VS CY 2019. Where CY and VS I've stored in en-US.json. So, when the page loads I'm calling translate.get([...]).subscribe(...). And I'm trying to test this thing only. Here's the code:

timeselector.component.html

<div>{{recievedFromChild}}</div>

timeselector.component.ts

import { Component, OnInit, ... } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
...

@Component({
    selector: 'app-timeselector',
    templateUrl: './timeselector.component.html'
})
export class TimeselectorComponent implements OnInit, AfterViewInit {

    calendarYearLabel: string;
    versusLabel: string;

    date = new Date();
    currentYear = this.date.getFullYear();
    previousYear= (this.date.getFullYear())-1;

    recievedFromChild; // <=========================== THIS I WANT TO TEST

    constructor(private translate: TranslateService,...) {}

    ngOnInit(): void {
      this.translateModes();
    }

    translateModes(): void {
      this.translate
        .get([
            'Timeselection.Abbreviations.CalendarYear',
            'Timeselection.Abbreviations.Versus'
        ])
        .subscribe(translations => {
          this.calendarYearLabel=translations['Timeselection.Abbreviations.CalendarYear'];
          this.versusLabel = translations['Timeselection.Abbreviations.Versus'];
          this.recievedFromChild =
              this.calendarYearLabel +
              ' ' +
              this.currentYear +
              ' ' +
              this.versusLabel +
              ' ' +
              this.calendarYearLabel +
              ' ' +
              this.previousYear;
        });
    }    
}

This is the external file: en-US.json

"Timeselection": {
    "Abbreviations": {
      "CalendarYear": "CY",   
      "Versus": "VS"
    }
}

and here's my test file: timeselector.component.spec.ts

import { TestBed, ComponentFixture, async } from "@angular/core/testing"
import { TimeselectorComponent } from './timeselector.component'
...
import { TranslateService } from '@ngx-translate/core';
...

fdescribe('TimeselectorComponent', () => {
    let fixture: ComponentFixture<TimeselectorComponent>;

    let mockTranslateService;

    beforeEach(async(()=>{
        mockTranslateService = jasmine.createSpyObj(['get']);

        TestBed.configureTestingModule({
            providers: [
                {provide: TranslateService, useValue: mockTranslateService},
                ...
            ],
            declarations: [
                ...
            ]
        });
        fixture = TestBed.createComponent(TimeselectorComponent);

    }))

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

    // THIS IS THE TEST CASE    
    it('should initially display current and previous calendar years only', () => {
        //fixture.componentInstance.translateModes();
        //fixture.detectChanges(); 
        expect(fixture.componentInstance.recievedFromChild).toBe('CY 2020 VS CY 2019');
    })
})

But I'm getting this failed test case:

TypeError: this.translate.get(...) is undefined

Here's the screenshot of the test case:

Please tell me what to do now. I'm blocked.