質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

0回答

919閲覧

Observableのtapの中でsubscribeする際に、単体テストがうまくいかない

vicreo32

総合スコア15

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2020/10/08 12:49

前提・実現したいこと

tapの中でsubscribeをして、値が取れているかテストを行いたい。

発生している問題・エラーメッセージ

fakeAsyncを使っても、非同期のテストがうまくいかない。

Chrome 85.0.4183.121 (Windows 10) ParentComponent ngOninit numsに値が入ること FAILED Error: Expected 0 to be 14. at <Jasmine> at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/parent/parent.component.spec.ts:37:37) at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:1749:1)

該当のソースコード

.ts

TypeScript

1export class ParentComponent implements OnInit { 2 3 @Input() content: string = ""; 4 5 content3: string; 6 7 private onDestroy$ = new Subject(); 8 9 nums: number[] = []; 10 11 nums2: number[] = []; 12 13 14 constructor(private service: StoreService) { } 15 16 ngOnInit(): void { 17 this.service.obs1().pipe( 18 tap(n => { 19 this.service.obs2(n).pipe(takeUntil(this.onDestroy$)) 20 .subscribe(nums => this.nums = nums); 21 }) 22 ) 23 }

.spec.ts

Typescript

1fdescribe('ParentComponent', () => { 2 let component: ParentComponent; 3 let fixture: ComponentFixture<ParentComponent>; 4 let service: StoreService; 5 6 beforeEach(async(() => { 7 TestBed.configureTestingModule({ 8 declarations: [ParentComponent] 9 }) 10 .compileComponents(); 11 })); 12 13 beforeEach(() => { 14 fixture = TestBed.createComponent(ParentComponent); 15 service = TestBed.inject(StoreService); 16 component = fixture.componentInstance; 17 fixture.detectChanges(); 18 spyOn(service, "obs1").and.returnValue(of([1,2,3,4,5,6,7,8,9,10])); 19 spyOn(service, "obs2").and.returnValue(of([3,4,5,6,7,8,9,10,11,12,13,14])); 20 }); 21 22 it('should create', () => { 23 expect(component).toBeTruthy(); 24 }); 25 26 describe('ngOninit', () => { 27 it('numsに値が入ること', fakeAsync(() => { 28 component.ngOnInit(); 29 tick(); 30 31 expect(component.nums.length).toBe(10); 32 })); 33 }); 34

試したこと

処理が非同期なので、tickを使ったがうまく動かなかった。
tick()がうまくいっていないのかなと仮設を立てていて、実際にobs1をsubscribeしてnums2に代入する処理を追加するとnums1の方にも値がはいった。
obs1にsubscribeする処理を付け加えないでテストを成功させるにはどうすればよいのか。

補足情報(FW/ツールのバージョンなど)

angular 9.1.11
ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問