Test mockをSnapshot testする

Transcript

1. Test mockを
   Snapshot testする
   2023-09-14 ひむら ともひこ
   

   View Slide

2. 自己紹介
   ひむら ともひこ
   最近遊びたいこと(希望)
   ● 要求管理の仕組みをつくって遊びたい
   ● さらっとリリースバーンアップが書けるツールつくって遊びたい
   

   View Slide

3. 最近の自分のちょっとした
   課題を解決したいだけの人生だった
   

   View Slide

4. 概要 Test MockをSnapshot testする
   ● なぜ Test MockをSnapshot testするか
   ● Test Mockとは
   ● Snapshot testとは
   ● Test MockをSnapshot testしてみる
   

   View Slide

5. なぜTest mockをSnapshot testするか
   

   View Slide

6. ちょっと楽しいから
   

   View Slide

7. 別にやらなくていい
   

   View Slide

8. もしかしたら
   考え方の幅が広がるかも
   ぐらいの小ネタです
   

   View Slide

9. Test mockとはなにか
   

   View Slide

10. みんな大好き(?)
    Mockオブジェクト
    

    View Slide

11. Test mockとは何か
    単体テストをする際などに、
    テスト対象から外部への呼び出しを正しく行ってい
    るか検証するためのオブジェクト
    呼び出されたメソッドやその引数を記録している。
    (呼び出し記録自体はTest spyでも行うが検証する場
    合はMockと呼ばれる)
    

    View Slide

12. 具体例
    

    View Slide

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' ]
    }
    */
    

    View Slide

14. say関数を検証する例
    expect(say.mock.calls.length).toBe(2) // 2回呼び出されたことを検証する
    expect(say.mock.calls[0].toEqual([‘Hello’]) // 1回目の呼び出しの引数を検証する
    

    View Slide

15. Snapshot testとはなにか
    

    View Slide

16. みんな大好き(?)
    期待値の自動生成ができる
    

    View Slide

17. Snapshot testとはなにか
    ● 初回はテスト対象の出力を保存する
    ● 2回目以降は保存した出力と比較する
    ● 意図しない変更を検知するのに役立つテクニック
    

    View Slide

18. 具体例
    

    View Slide

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",
    ],
    }
    `;
    */
    

    View Slide

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",
    ],
    }
    

    View Slide

21. Test mockをSnapshot testしてみる
    

    View Slide

22. 説明する必要があるだろうか…
    

    View Slide

23. Test mockをSnapshot testする
    function greeting(say) {
    say(‘hello’);
    say(‘bye’);
    }
    test(‘greeting’, () => {
    const say = jest.fn();
    greeting(say);
    expect(say.mock).toMatchSnapshot();
    });
    

    View Slide

24. Test mockをSnapshot testする - 処理を変更
    function greeting(say) {
    say(‘こにゃにゃちわー’);
    say(‘ほなら’);
    }
    test(‘greeting’, () => {
    const say = jest.fn();
    greeting(say);
    expect(say.mock).toMatchSnapshot();
    });
    

    View Slide

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,
    

    View Slide

26. Test mockをSnapshot testするの用途
    ● 自動テスト書かれていないコードのさくっと自動テストをつくる
    ○ リファクタリングに役に立つ
    ● mockを使いたいが丁寧に検証するのが面倒なとき
    ○ 手抜きだけど、ないよりはましな場合がある
    ● 丁寧に検証する前の確認として
    ○ mockプロパティみたほうがはやくないか?
    

    View Slide

27. Jest以外でどうやるか
    ● 調べてない
    ● 調べかけてたけど、やりやすい環境がそもそも他に…
    ● そのため、このネタはお蔵入りした
    

    View Slide

28. まとめ
    

    View Slide

29. まとめ Test mockをSnapshot testする
    ● Test mock
    ○ 期待どおりメソッドや関数が呼び出されるか確認するためのテク
    ● Snapshot test
    ○ 実行結果を保存し、テストの期待値とするテク
    ● Test mockをSnapshot testする
    ○ mockに対して呼び出しに変化ないか簡単にテストできるテク
    

    View Slide