Test mockをSnapshot testする

Transcript

1. Test mockを Snapshot testする 2023-09-14 ひむら ともひこ
2. 自己紹介 ひむら ともひこ 最近遊びたいこと(希望) • 要求管理の仕組みをつくって遊びたい • さらっとリリースバーンアップが書けるツールつくって遊びたい
3. 最近の自分のちょっとした 課題を解決したいだけの人生だった
4. 概要 Test MockをSnapshot testする • なぜ Test MockをSnapshot testするか • Test Mockとは • Snapshot testとは • Test MockをSnapshot testしてみる
5. なぜTest mockをSnapshot testするか
6. ちょっと楽しいから
7. 別にやらなくていい
8. もしかしたら 考え方の幅が広がるかも ぐらいの小ネタです
9. Test mockとはなにか
10. みんな大好き(?) Mockオブジェクト
11. Test mockとは何か 単体テストをする際などに、 テスト対象から外部への呼び出しを正しく行ってい るか検証するためのオブジェクト 呼び出されたメソッドやその引数を記録している。 (呼び出し記録自体はTest spyでも行うが検証する場 合はMockと呼ばれる)
12. 具体例
13. Test mock - Jestを使った例 • JestはJavaScriptで使われるテスティングフレームワーク • Test mockになっている関数を作る機能がある(mock関数) • mock関数の呼び出しはmockプロパティに記録される const say = jest.fn() // mock関数 sayを作成している。 sayは呼び出せる say(‘hello’) // 引数 Helloで呼び出す say(‘bye’) // 引数 byeで呼び出す console.log(say.mock) /* ~> { calls: [ [ 'Hello' ], [ 'bye' ] ], // 引数 Helloとbyeで呼び出しがあった contexts: [ undefined, undefined ], // 実行環境の情報 instances: [ undefined, undefined ], invocationCallOrder: [ 1, 2 ], results: [ // 各呼び出しの戻り値の情報 { type: 'return', value: undefined }, { type: 'return', value: undefined } ], lastCall: [ 'bye' ] } */
14. say関数を検証する例 expect(say.mock.calls.length).toBe(2) // 2回呼び出されたことを検証する expect(say.mock.calls[0].toEqual([‘Hello’]) // 1回目の呼び出しの引数を検証する
15. Snapshot testとはなにか
16. みんな大好き(?) 期待値の自動生成ができる
17. Snapshot testとはなにか • 初回はテスト対象の出力を保存する • 2回目以降は保存した出力と比較する • 意図しない変更を検知するのに役立つテクニック
18. 具体例
19. Snapshot test - Jestを使った例 test(“Snapshot Testの例”, () => { const output = { calls: [‘hello’] } // 関数の出力とする expect(output).toMatchSnapshot() // まだ出力を保存していない場合は保存する }); /* __snapshot__ ディレクトリにファイル名に .snap をつけたファイルに以下が保存される // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Snapshot Testの例 1`] = ` { "calls": [ "hello", ], } `; */
20. Snapshot Testの例 test(“Snapshot Testの例”, () => { const output = { calls: [‘bye’] } // 関数の出力とする値をわざと変更する expect(output).toMatchSnapshot() // 出力が保存済みなので、保存された結果と比較 }); /* – 実行時の出力 Error: expect(received).toMatchSnapshot() Snapshot name: `Snapshot Testの例 1` { "calls": [ - "hello", + "bye", ], }
21. Test mockをSnapshot testしてみる
22. 説明する必要があるだろうか…
23. Test mockをSnapshot testする function greeting(say) { say(‘hello’); say(‘bye’); } test(‘greeting’, () => { const say = jest.fn(); greeting(say); expect(say.mock).toMatchSnapshot(); });
24. Test mockをSnapshot testする - 処理を変更 function greeting(say) { say(‘こにゃにゃちわー’); say(‘ほなら’); } test(‘greeting’, () => { const say = jest.fn(); greeting(say); expect(say.mock).toMatchSnapshot(); });
25. Test mockをsnapshot testする - 実行してみる Snapshot name: `greeting 1` - Snapshot - 3 + Received + 3 @@ -1,12 +1,12 @@ { "calls": [ [ - "hello", + "こにゃにゃちわー ", ], [ - "bye", + "ほなら", ], ], "contexts": [ undefined, undefined, @@ -18,11 +18,11 @@ "invocationCallOrder": [ 1, 2, ], "lastCall": [ - "bye", + "ほなら", ], "results": [ { "type": "return", "value": undefined,
26. Test mockをSnapshot testするの用途 • 自動テスト書かれていないコードのさくっと自動テストをつくる ◦ リファクタリングに役に立つ • mockを使いたいが丁寧に検証するのが面倒なとき ◦ 手抜きだけど、ないよりはましな場合がある • 丁寧に検証する前の確認として ◦ mockプロパティみたほうがはやくないか?
27. Jest以外でどうやるか • 調べてない • 調べかけてたけど、やりやすい環境がそもそも他に… • そのため、このネタはお蔵入りした
28. まとめ
29. まとめ Test mockをSnapshot testする • Test mock ◦ 期待どおりメソッドや関数が呼び出されるか確認するためのテク • Snapshot test ◦ 実行結果を保存し、テストの期待値とするテク • Test mockをSnapshot testする ◦ mockに対して呼び出しに変化ないか簡単にテストできるテク