如何模拟在 Angular 中的组件声明中调用的方法？

Question

I have an Angular 11 component that sets the user's timezone as a property.

export class AppComponent implements OnInit {

  timezone: string =  Intl.DateTimeFormat().resolvedOptions().timeZone;

  // ...
}

This works well, I think ¹ . Now I am trying to write a unit test for the code that uses this property. In my spec file I have this code.

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;
  let loader: HarnessLoader;

  beforeEach(
    waitForAsync(() => {
      spyOn(Intl.DateTimeFormat(), 'resolvedOptions').and.returnValue({
        timeZone: 'America/Sao_Paulo', // this is the mocked value
        calendar: 'gregory',           // ... and the rest is just the output from Europe/London
        day: '2-digit',
        locale: 'en-GB',
        month: '2-digit',
        numberingSystem: 'latn',
        year: 'numeric',
      });

      TestBed.configureTestingModule({
        declarations: [AppComponent],
      }).compileComponents();
      fixture = TestBed.createComponent(AppComponent);
      component = fixture.componentInstance;
      loader = TestbedHarnessEnvironment.loader(fixture);
    })
  );

  describe('The User Interface', () => {
    beforeEach(async () => {
      fixture.detectChanges();
      component.ngOnInit();
    });

   it('should render timezone', () => {
      const compiled = fixture.nativeElement;
      expect(
        compiled.querySelector('.tz').textContent
      ).toContain('America/Sao_Paulo');
    });
  });
});

The code compiles, but the test fails and finds my local "Europe/London" timezone. I suspect that I am doing the mock at the wrong time.

I thought maybe my declaration needs to live somewhere that is executed later, so I tried to move that into the constructor as well as into ngOnInit() , but neither of them changed anything.

When I tried using jasmine.clock().install() and mockDate() it timed out my tests and everything broke.

How can I get that mock to work so that my component gets a fake timezone?

---

^{1) I should probably change my computer's timezone to check if it really does...}

Answer 1

You are setting the spy on the wrong object. When running Intl.DateTimeFormat() you are creating a new object, both in the test and the component.

You should probably spy on DateTimeFormat.

spyOn<any>(Intl, "DateTimeFormat").and.returnValue({
    resolvedOptions: () => ({timeZone: 'MockTimezone'})
})