■ はじめに

https://dk521123.hatenablog.com/entry/2020/12/23/103209
https://dk521123.hatenablog.com/entry/2021/01/08/164356

の続き。

モックを使って単体試験をする必要がでてきたので、メモする。

【１】主なメソッド

１）基本的なモック関数

mockFn.mockImplementation(fn)
https://jestjs.io/ja/docs/mock-function-api#mockfnmockimplementationfn

https://dk521123.hatenablog.com/entry/2021/01/13/110105

で扱った Vue Mixins をモック化するのに使える
(以下のサイトも参照)

https://qiita.com/ksakiyama134/items/908deafe173e256fe907
イメージ

import { shallowMount, createLocalVue } from '@vue/test-utils';

describe('Hello.vue', () => {
  const localVue = createLocalVue();
  localVue.prototype.$getHello = jest.fn().mockImplementation((name: string) => Promise.resolve(`Mock handling ${name}`));

構文

const 【モックにしたい関数】 = jest.fn().mockImplementation(() => {
  return 【モックで返却した処理】
});

２）後処理系

jest.clearAllMocks()
https://doc.ebichu.cc/jest/docs/ja/jest-object.html#jestclearallmocks

より抜粋

全てのモックの mock.calls と mock.instancesプロパティを初期化します。
モック化された関数の各々に.mockClear()関数を呼び出すことに相当します。

jest.restoreAllMocks()
https://doc.ebichu.cc/jest/docs/ja/jest-object.html#jestrestoreallmocks

より抜粋

全てのモックを初期値に戻します。
モック化された関数の 各々に.mockRestore を呼び出すことに相当します。

jest.resetAllMocks()
https://doc.ebichu.cc/jest/docs/ja/jest-object.html#jestresetallmocks

より抜粋

すべてのモックの状態をリセットします。
モック化された関数の各々に .mockReset() 関数を呼び出すことに相当します。

【２】サンプル

例１：consoleログをモック化する

実際に使用しているフル・サンプルは以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2021/03/23/231011

より重要な部分のみ抜粋

Demo2.spec.ts

describe('Demo2.vue', () => {
  let wrapper: Wrapper<Demo2>;
  console.info = jest.fn();
  console.error = jest.fn();

  it('This is a network error test', async () => {
    wrapper = shallowMount(Demo2);

    expect(console.error).toHaveBeenCalledWith('Error...');
  });
});

例２：axiosを使ったメソッドをモックする

https://dk521123.hatenablog.com/entry/2021/01/14/101645

で扱った axios を使ったメソッドに対して、モックしてみる。

ファイル構成

my-app << 対象プロジェクト
 + src
      + util
       |  + sample.ts ... テスト対象クラス
      + test
           + util
               + sample.spec.ts ... テストクラス

sample.ts

import axios from 'axios';

interface User {
  id:string
  name:string
}

export default class Sample {
  static async getUserById(id: string): Promise<User> {
    try {
      const vallue = "sss";
      return await axios.get(`http://localhost/user/id=${vallue}`);
    } catch (ex) {
      throw new Error(ex.message);
    }
  }
}

sample.spec.ts

import Sample from '../../../src/util/sample';

jest.mock('axios');
import axios from 'axios';

describe('Sample', () => {
  it('getUserById for Mock demo', async () => {
    const targetId = 'x0001';
    (axios.get as any).mockResolvedValue({ id: targetId, name: 'Mike' });

    const result = await Sample.getUserById(targetId);
    expect(result.id).toBe(targetId);
    expect(result.name).toBe('Mike');
  });
});

参考文献

https://qiita.com/rema424/items/ee650a1cf99de178cb90
https://qiita.com/clomie/items/ccf8977a7724f81eff12

JS単体試験ツール Jest ～入門編～
https://dk521123.hatenablog.com/entry/2020/12/23/103209
JS単体試験ツール Jest ～基本編～
https://dk521123.hatenablog.com/entry/2021/01/08/164356
JS単体試験ツール Jest ～キャッシュ関連～
https://dk521123.hatenablog.com/entry/2021/03/12/164932
Jestを使った Vue / TypeScript の単体試験～入門編～
https://dk521123.hatenablog.com/entry/2021/01/07/230317
Jestを使った Vue / TypeScript の単体試験～基本編～
https://dk521123.hatenablog.com/entry/2021/01/27/225148
Jestを使った Vue / TypeScript の単体試験～ axios 編～
https://dk521123.hatenablog.com/entry/2021/01/16/202822
axios ～外部API通信ライブラリ～
https://dk521123.hatenablog.com/entry/2021/01/14/101645
Vue Mixins + TypeScript ～入門編～
https://dk521123.hatenablog.com/entry/2021/01/13/110105

プログラムの超個人的なメモ

Memo for Programming.

【JS】【TS】JS単体試験ツール Jest ～ Mock編～