Jestでnode-fetchをmockする

Jestでnode-fetchをmockする方法についてまとめます。

Jestのmock機能を利用する方法は、「Node.jsのテストでJestを使ってfetchをモックするのは意外に大変」を参照してください。ここでは、mock-fetchおよびjest-fetch-mockを利用する方法について説明します。

mock-fetchやjest-fetch-mockを利用することで、node-fetchを簡単にmockでき、呼び出しの確認も容易になります。

mock-fetchおよびjest-fetch-mockはfetchおよびnode-fetch (isomorphic-fetchも) をmockできますが、ブラウザ上のfetchをmockすることを想定しているため、node-fetchをmockするにはひと手間必要となっています。

mock-fetchを利用する方法

mock-fetchを利用する方法は、Using with jestに説明があります。

node-fetchをmockするため、以下のファイルを追加してください。これにより、node-fetchをrequiresするとfetch-mockが返るようになります。

__mocks__/node-fetch.js

const nodeFetch = jest.requireActual('node-fetch');
const fetchMock = require('fetch-mock').sandbox();
Object.assign(fetchMock.config, nodeFetch, {
  fetch: nodeFetch
});
module.exports = fetchMock;

以下はテスト対象のコードです。

index.js

const fetch = require('node-fetch');

const makeRequest = async () => {
    const res = await fetch("http://httpbin.org/get");
    const resJson = await res.json();
    return resJson;
};

module.exports = makeRequest;

以下、テストコードです。node-fetchをrequireするとfetch-mockが返ります。これを使ってmockの呼び出しを定義し、呼び出し結果を確認できます。

__tests__/index.test.js

const fetchMock = require('fetch-mock');
const makeRequest = require('../index');

describe('fetch-mock test', () => {
    it('check fetch mock test', async () => {
        fetchMock.get('http://httpbin.org/get', {test: 'example'})

        const data = await makeRequest();
        expect(data).toEqual({test: 'example'});
        expect(fetchMock.calls().length).toBe(1);
        expect(fetchMock.lastCall('http://httpbin.org/get')).toBeTruthy();
    });
});

jest-fetch-mockを利用する方法

jest-fetch-mockを利用するときは、setupFiles.jsを以下のように作成します。これによりnode-fetchをrequireするとjest-fetch-mockが返るようになります。

setupFiles.js

global.fetch = require('jest-fetch-mock');
jest.mock('node-fetch', () => (global.fetch));

作成したsetupfiles.jsは、package.jsonで設定します。

package.json

  "jest": {
    "testEnvironment": "node",
    "setupFiles": ["./setupFiles.js"]
  }

テスト対象のコードは同じものを使うので省略します。

テストコードは以下です。setupFiles.jsによりglobal.fetchが設定されているため、ここではnode-fetchをrequireする必要はありません。

__tests__/index.test.js

const makeRequest = require('../index');

describe('fetch-mock test', () => {
    it('check fetch mock test', async () => {
        fetch.mockResponseOnce(JSON.stringify({ test: 'example' }));

        const data = await makeRequest();
        expect(data).toEqual({test: 'example'});
        expect(fetch.mock.calls.length).toBe(1);
        expect(fetch.mock.calls[0][0]).toEqual('http://httpbin.org/get');
    });
});

まとめ

ひと手間かかりますが、最初に設定してしまえば、後は楽に使えるようになると思います。