🙆

[jest] angularのsubscribeのmockの作り方

2023/05/19に公開

まずsubscribeとは?
angularのsubscribeに関してはこちらをご覧ください

簡単にいうとresultを複数返せるPromiseのようなもの。。。らしいです

subcribeをjestでmock化するには
subscribeの関数をreturnValueで返す
returnValueは設定したmock関数を返すものでmock化した関数をsubscibe関数の中で発火させ、それを returnValueで返すようにする

対象のコード

this.dialogRef.afterOpened().subscribe(() => this.initDialogSize());

対象のテスト

# component.dialogが発火するafterOpened関数のmockを作成
const afterOpenedMock = spyOn(component.dialogRef, 'afterOpened')

# subscribeの中で発火しているcomponenが発火するinitDialogSize関数のmockを作成
const initDialogSizeMock = spyOn(component, 'initDialogSize')

afterOpenedMock.and.returnValue(
  {
    subscribe: () => {
      initDialogSizeMock();
    }
  } as any)

afterOpenedMockが発火した後にsubscribeが発火しinitDialogSizeMockが発火できるようになる

Discussion