62
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

【備忘録】JestのspyOn()とmock()の使い方について

はじめに

jestは、javascriptやtypescriptのテストツールです。
jest.spyOn()jest.mock()は、どちらもメソッドをmockするためのもので、テストコードの中でモック関数を定義する際に使用します。
どちらも同じようなことが出来るのですが、いつもいざ使おうとしたときに混同してしまいがちなので、備忘録としてまとめてみました。

環境

テストを作成した環境は、以下の通りです。

  • node: 12.19.0
  • @types/jest: 26.0.19
  • jest: 26.6.3
  • ts-jest: 26.4.4
  • ts-node: 9.0.0
  • typescript: 4.1.2

基本的な使い方

jest.spyOn()は、オブジェクトを引数に指定するのに対し、jest.mock()は、モジュールを引数に指定します。
つまり、mockの対象が引数に指定したオブジェクトだけなのか、モジュールそのものなのかという違いがあります。
また、jest.mock()でmockされモジュールは、デフォルトでは何も返さない状態になってしまうのに対し、jest.spyOn()の場合、デフォルトで本来のメソッドが呼ばれます。(JEST API Reference#jest.spyOnより)

テスト対象サンプルコード

以下のサンプルコードで、定義されたTestClassクラスのgetText()メソッドをテストする場合を例に記載します。

  • moduleA.ts:mock対象。CalcModuleAクラスとTextModuleAクラスが定義されたファイル
  • test.ts:テスト対象。TesTClassクラスが定義されたファイル

moduleA.ts

export class CalcModuleA {
    constructor(readonly x: number){}
    exec(a: number, b: number) {
        return a + b - this.x;
    }
}
export class TextModuleA {
    exec(a: string, b: string) {
        return a + b;
    }
}

test.ts

import { CalcModuleA, TextModuleA } from './moduleA';

export class TestClass {
    calc: CalcModuleA;
    constructor(readonly text: TextModuleA) {
        this.calc = new CalcModuleA(1);
     }

    public getText(textA: string, textB: string) {
        const s1 = textA.split('s');
        const s2 = textB.substr(-2);
        const c = this.calc.exec(textA.length, textB.length);
        const t = this.text.exec(s1[0], s2);
        return t + s1[s1.length -1] + c;
    }
}

jest.spyOn()でmockする場合

TextModuleA.exec mockテスト内で、TextModuleAクラスのインスタンスを作成後、jest.spyOn()でmock化し処理を定義します。

import { CalcModuleA, TextModuleA } from '../moduleA';
import { TestClass } from '../test';

describe('spyOn', () => { 
    it(`TextModuleA.exec mock`, () => {
         //TestClassクラスに渡すTextModuleAクラスのインスタンスを作成
        const t = new TextModuleA();
        //execメソッドのmock化
        const mockTextExec = jest.spyOn(t, 'exec');
        //mock処理を仕込む
        mockTextExec.mockImplementation((a: string, b: string) => {
            return `spy`;
        });

        const test = new TestClass(t);
        //testインスタンス内のCalcModuleAクラスのexecメソッドをmock化
        //インスタンスが取得さえ出来れば、mock化することができる。
        const mockCalcExec = jest.spyOn(test['calc'], 'exec');

        //テスト対象のメソッドを実行
        const result = test.getText('testA', 'planB');
        console.log(`spyOn result: ${result}`);

        //mock化したメソッドの引数を検証
        expect(mockTextExec).toBeCalledTimes(1);
        expect(mockTextExec).toBeCalledWith('te', 'nB');
        expect(mockCalcExec).toBeCalledTimes(1);
        expect(mockCalcExec).toBeCalledWith(5, 5);
        //テスト対象メソッドの結果を検証
        expect(result).toBe('spytA9');
    })
});

jest.mock()でmockする場合

テストファイルの最初で、mock化を行います。
TestModuleAクラスをmock化する際に、CalcModuleAクラスも一緒にmock化されてしまうため、一緒に処理を定義しておく必要があります。

jest.mock('../moduleA', () => {
    //moduleAモジュールのimport結果をmock
    return {
        //TextModuleAクラスのコンストラクタのmock定義
        TextModuleA: jest.fn().mockImplementation(() => {
            return {
                exec: jest.fn(),
            }
        }),
        //CalcModuleAクラスのコンストラクタのmock定義
        CalcModuleA: jest.fn().mockImplementation(() => {
            return {
                //execメソッドをmock化し、常に1を返すように設定
                exec: jest.fn().mockReturnValue(1),
            }
        })
    }
});
import { TextModuleA } from '../moduleA';
import { TestClass } from '../test';

describe('jest.mock', () => {
    it(`TextModuleA.exec mock`, () => {
        //TestClassクラスに渡すTextModuleAクラスのインスタンスを作成
        const t = new TextModuleA();
        //execメソッドのmock定義を取得
        const mockTextExec = t.exec as jest.Mock;
        //mock処理を仕込む
        mockTextExec.mockImplementation((a: string, b: string) => {
            return `mock`;
        });
        const test = new TestClass(t);
        //testインスタンス内のCalcModuleAクラスのexecメソッドのmock定義を取得
        const mockCalcExec = test['calc'].exec;

        //テスト対象のメソッドを実行
        const result = test.getText('testA', 'planB');
        console.log(`mock result: ${result}`);

        //mock化したメソッドの引数を検証
        expect(mockTextExec).toBeCalledWith('te', 'nB');
        expect(mockCalcExec).toBeCalledWith(5, 5);
        //テスト対象メソッドの結果を検証
        expect(result).toBe('mocktA1');
    });
})

この例では、特定のインスタンスの1メソッドをmockして1件だけのテストをしているのみであるため、jest.spyOn()の方がjest.mock()に比べ、シンプルに記述することができます。

mockの結果を呼び出し毎に設定する場合

複数回呼ばれるメソッドで、都度異なる結果を返すようにしたい場合のmock処理の定義方法です。
xxxOnce()でmock定義することで1度だけ呼ばれるようになります。複数個のxxxOnce()を連続で定義すると、定義した順番にその値が返されるようになります。
xxxOnce()が全て返された後は、xxxOnce()でないmock処理が定義されていた場合は、その値を返しますが、何も定義されていない場合、デフォルトの処理が呼ばれます。

    it('mock returnValues', () => {
    //TestClassクラスに渡すTextModuleAクラスのインスタンスを作成
    const t = new TextModuleA();
    //execメソッドのmock化
    const mockTextExec = jest.spyOn(t, 'exec');
    //mock処理を仕込む
    mockTextExec.mockImplementationOnce((a: string, b: string) => {
        return `spy1`;
    }).mockImplementationOnce(() => 'spy2')
        .mockReturnValueOnce('spy3');

    //先に定義した値から順番に返される
    expect(t.exec('a', 'b')).toBe('spy1');
    expect(t.exec('a', 'b')).toBe('spy2');
    expect(t.exec('a', 'b')).toBe('spy3');
    //定義したものを全て呼んだ後は、デフォルトの処理が呼ばれる
    expect(t.exec('a', 'b')).toBe('ab');
})

mockの初期化処理

mockした処理が呼ばれた後、そのまま別のテストを行うと、定義済みのmockが影響して上手くテストが出来ないことがあり得ます。そこで、テストの前後どちらかでmockの初期化処理を行うようにすべきです。
初期化に関するメソッドは、以下の3つがあります。(JEST API Referenceより)

  • mockClear():mockの実行履歴(呼び出し回数など)をクリアします。
  • mockReset()mockClear()の内容に加えて、mockの定義(戻り値や、関数)も完全に初期化する。jest.spyOn()のものに使用した場合でも、戻り値のない関数となるので注意が必要です。
  • mockRestore()jest.spyOn()のものにのみ有効です。mockReset()の内容に加えて、対象をmock前の処理に復元します。

最低でもmockClear()は行うようにした方が良いです。

少しひねった使い方

jest.spyOn()で、インスタンスを取得せずにmockする方法

基本的に、jest.mock()でmockすれば良いですが、jest.spyOn()でも出来ます。
mock対象のメソッドが一部であったり、mock処理を実装せず、引数の検証だけしたい場合などは、jest.spyOn()を使用した方が容易となります。
jest.spyOn()で、引数に指定するオブジェクトとしてxxx.prototype(xxxは、クラス名)を使用することでmockすることができます。
ただし、mock対象がインスタンスではないため、テストの前後のどちらかで、mockRestore()などをしないと、ほかのテストに影響が出てしまうので、注意が必要です。

import { CalcModuleA, TextModuleA } from '../moduleA';
import { TestClass } from '../test';

describe('spyOn prototype', () => {
    beforeEach(() => {
        //CalcModuleAクラスのexecメソッドをmock化
        jest.spyOn(CalcModuleA.prototype, 'exec');
        //TextModuleAクラスのexecメソッドのmock化
        jest.spyOn(TextModuleA.prototype, 'exec');
    });
    afterEach(() => {
        //test外で、mock定義を行うため、`afterEach()`で、mockの初期化やクリア処理を行う。
        //CalcModuleAクラスのexecメソッドのmock履歴をクリア
        (CalcModuleA.prototype.exec as jest.Mock).mockClear();
        //TextModuleAクラスのexecメソッドのmock定義を本来のものに戻す
        (TextModuleA.prototype.exec as jest.Mock).mockRestore();
    })
    it(`TextModuleA.exec mock`, () => {
        //TextModuleAクラスのexecメソッドのmock処理を仕込む
        (TextModuleA.prototype.exec as jest.Mock).mockImplementation((a: string, b: string) => {
            return `spy`;
        });

        //TestClassクラスに渡すTextModuleAクラスのインスタンスを作成
        const t = new TextModuleA();
        const test = new TestClass(t);

        //テスト対象のメソッドを実行
        const result = test.getText('testA', 'planB');
        console.log(`spyOn result: ${result}`);

        //mock化したメソッドの引数を検証
        expect(TextModuleA.prototype.exec).toBeCalledTimes(1);
        expect(TextModuleA.prototype.exec).toBeCalledWith('te', 'nB');
        expect(CalcModuleA.prototype.exec).toBeCalledTimes(1);
        expect(CalcModuleA.prototype.exec).toBeCalledWith(5, 5);
        //テスト対象メソッドの結果を検証
        expect(result).toBe('spytA9');
    });
});

jest.spyOn()でコンストラクタをmockする方法

こちらも、jest.mock()でmockすれば良いですが、jest.spyOn()でも出来ます。
jest.spyOn()で、引数に指定するオブジェクトとしてモジュール自体を指定することで、コンストラクタのmockをすることができます。
ただし、他のjest.spyOn()と異なりデフォルトでも本来のメソッドが呼び出されません。
そのため、テストの際にmock処理を定義する必要があります。

CalcModuleAクラスのコンストラクタをmockする例

moduleAのCalcModuleAクラスのコンストラクタをmockするサンプルです。
本来のコンストラクタが呼び出せるように、jest.spyOn()を行う前にoriginal変数に格納し、spyOn()時の初期mock処理として呼び出すようにmock処理を定義しています。

//moduleAモジュール全体を読み込む
import * as moduleA from '../moduleA';
import { TextModuleA, CalcModuleA } from '../moduleA';
import { TestClass } from '../test';

describe('spyOn constructor', () => {
    //mock前の本来の処理を格納する。
    const original = moduleA.CalcModuleA;

    beforeEach(() => {
        //mockしたいコンストラクタのクラスを指定することで、コンストラクタをmockできる。
        //デフォルトの処理として、本来のコンストラクタを呼び出すようにする。
        jest.spyOn(moduleA, 'CalcModuleA').mockImplementation((x)=> {return new original(x)});
    })
    afterEach(() => {
        //CalcModuleAクラスのコンストラクタのmock定義を本来のものに戻す
        (CalcModuleA as jest.Mock).mockRestore();
    })
    it(`CalcModuleA.exec mock`, () => {
        //CalcModuleAクラスのコンストラクタをmockし、execメソッドが常に1000を返すように設定
        const mockCalcExec = jest.fn((a, b) => { return 1000 });
        (CalcModuleA as jest.Mock).mockImplementation((x: number) => {
            return {
                x,
                exec: mockCalcExec
            }
        });
        const t = new TextModuleA();
        const test = new TestClass(t);
        const result = test.getText('testA', 'planB');
        console.log(`spyOn result: ${result}`);

        //mock化したコンストラクタの呼び出し回数と引数を検証
        expect(CalcModuleA).toBeCalledTimes(1);
        expect(CalcModuleA).toBeCalledWith(1);
        //mock化したexecメソッドの引数を検証
        expect(mockCalcExec).toBeCalledWith(5, 5);
        expect(result).toBe('tenBtA1000');
    });
})

Dateをmockする例

globalのDateクラスのコンストラクタをmockするサンプルです。
new Date()の結果を、固定するためのmockです。コンストラクタの引数が無い場合のみmockした値を返すようにmock定義を行っています。
jest.spyOn()で定義しているため、mockRestore()するだけで、本来の処理に復元が可能です。

    //mockする前の本来の処理を格納
    const OriginalDate = Date;
    //mockで返す固定のDateを定義
    const now = new OriginalDate('2020/04/01 11:23:34.567');
    const spiedDate = jest.spyOn<any, any>(global, 'Date').mockImplementation((...arg: any[]) => {
        const p = Array(7).fill(0);
        arg.forEach((v, i) => p[i] = v);
        if (arg.length > 0) {
            return arg.length === 1 ? new OriginalDate(arg[0]) : new OriginalDate(p[0], p[1], p[2], p[3], p[4], p[5], p[6]);
        }
        return now;
    });
    ・・・
    //mockを解除して本来の処理に戻す際に呼ぶ
    spiedDate.mockRestore();

jest.mock()で、本来のメソッドを残しつつmockする方法

jest.mock()jest.requireActual()を使用することで、jest.spyOn()と同様に、コンストラクタやメソッドをspyしつつ本来の処理を呼び出すことができます。(JEST API Reference#jest.requireActualより)

CalcModuleAクラスのコンストラクタをmockする例

import { CalcModuleA, TextModuleA } from '../moduleA';
import { TestClass } from '../test';

//moduleAモジュールの本来のモジュール
let original: any;

jest.mock('../moduleA', () => {
    //moduleAモジュールの本来のモジュールを読み込む
    original = jest.requireActual('../moduleA');
    return {
        //moduleAモジュールの本来の処理を展開
        ...original,
        //CalcModuleAクラスのコンストラクタ定義を上書き。
        CalcModuleA: jest.fn().mockImplementation((x: number) => {
            //初期処理として本来のコンストラクタを呼び出し
            return new original.CalcModuleA(x);
        }),
    }
});

describe('jest.mock constructor', () => {
    afterEach(() => {
        //CalcModuleAクラスのコンストラクタのmock履歴をクリア
        (CalcModuleA as jest.Mock).mockClear();
        //コンストラクタのmock定義がテストごとに変わる場合は、再定義する。
        (CalcModuleA as jest.Mock).mockImplementation((x: number) => {
            //初期処理として本来のコンストラクタを呼び出し
            return new original.CalcModuleA(x);
        });
    })

    it(`arguments check`, () => {
        //TestClassクラスに渡すTextModuleAクラスのインスタンスを作成
        const t = new TextModuleA();
        const test = new TestClass(t);

        //テスト対象のメソッドを実行
        const result = test.getText('testA', 'planB');
        console.log(`mock result: ${result}`);

        //mock化したコンストラクタの引数を検証
        expect(CalcModuleA).toBeCalledTimes(1);
        expect(CalcModuleA).toBeCalledWith(1);
        //テスト対象メソッドの結果を検証
        expect(result).toBe('tenBtA9');
    });
    it(`CalcModuleA.exec mock`, () => {
        //CalcModuleAクラスのコンストラクタをmockし、execメソッドが常に1000を返すように設定
        const mockCalcExec = jest.fn((a, b) => { return 1000 });
        (CalcModuleA as jest.Mock).mockImplementation((x: number) => { 
            return {
                exec: mockCalcExec
            }
        });
        const t = new TextModuleA();
        const test = new TestClass(t);
        const result = test.getText('testA', 'planB');
        console.log(`mock2 result: ${result}`)

        expect(CalcModuleA).toBeCalledTimes(1);
        expect(CalcModuleA).toBeCalledWith(1);
        //mock化したexecメソッドの引数を検証
        expect(mockCalcExec).toBeCalledWith(5, 5);
        expect(result).toBe('tenBtA1000');
    })
})

pathモジュールのisAbsolute()をmockする例

自作のモジュールでなくても、同様にmockすることが可能です。

import path from 'path';
jest.mock('path', () => {
    //pathモジュールの本来の処理を格納
    const original = jest.requireActual('path');
    return {
        ...original,
        //isAbsolute()の処理をmockに差し替え
        isAbsolute: jest.fn((filePath: string) => {
            return original.isAbsolute(filePath);
        }),
    }
})
describe('path', () => {
    it('isAbsolute', () => {
        //1回目は、必ずtrueを返すようにmock定義を追加
        (path.isAbsolute as jest.Mock).mockReturnValueOnce(true);

        //1回目は、trueが返される
        expect(path.isAbsolute('./test.ts')).toBe(true);
        //joinメソッドは、本来の処理が呼ばれる
        expect(path.join('z', 'a')).toBe('z\\a');
        //2回目は、本来の処理が呼ばれ、falseが返される
        expect(path.isAbsolute('./test.ts')).toBe(false);
    });
});

fsモジュールのexistsSync()をmockする例

本来の処理を、originalExistsSyncFunctionとしてmock処理の外部に格納することで、テストの際に必要に応じて本来の処理を呼ぶことが出来ます。(例:テストの結果としてファイルの存在確認をしたい。など)

//existsSync()の本来の処理を格納する変数
//あとから、本来の処理を呼べるようにするために定義しておく。
let originalExistsSyncFunction;
jest.mock('fs', () => {
    const original = jest.requireActual('fs');
    //existsSync()の本来の処理を格納
    originalExistsSyncFunction = original.existsSync;
    return {
        ...original,
        existsSync: jest.fn((filePath: string) => {
            //デフォルトで、本来の処理を行うようにmockを定義
            return originalExistsSyncFunction(filePath);
        }),
    };
});

describe('fs', () => {
    it('existsSync', () => {
        //常にfalseを返すように定義
        (fs.existsSync as jest.Mock).mockReturnValue(false);

        expect(originalExistsSyncFunction('./write.txt')).toBe(false);
        expect(fs.existsSync('./write.txt')).toBe(false);
        fs.writeFileSync('./write.txt', 'write');
        expect(originalExistsSyncFunction('./write.txt')).toBe(true);
        expect(fs.existsSync('./write.txt')).toBe(false);

        expect(fs.existsSync).toBeCalledTimes(2);
    })
});

おわりに

今回、jest.spyOn()jest.mock()を使ったmockの方法についてまとめてみました。
両方とも出来ることはほぼ同じですが、mockを行う際の指定方法やmockの初期化時の挙動に違いがある点は、気を付ける必要があります。
個人的には、jest.spyOn()の方が手軽に使えるのかなという印象です。

記載の会社名、製品名、サービス名等はそれぞれの会社の商標または登録商標です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
62
Help us understand the problem. What are the problem?