React routerのhistoryをモックする

最終更新日: 2021-03-22
  • まず history.push('/path/to/dest') 自体のテストを書くことはないはずなので、何かしらの副作用として実行される事が前提です
  • testing-library.com に書いてあることの応用です
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
 * useHistory() を使えるようにするテストユーティリティ
 */
const renderWithRouter = (children: JSX.Element, { route = '/' } = {}) => {
    window.history.pushState({}, 'Test page', route);

    return render(children, {
        wrapper: BrowserRouter,
    });
};

// spy 用のモック関数
const mockPush = jest.fn();
// react-router-dom をモックにする
jest.mock('react-router-dom', () => ({
    useHistory: () => ({
        // モック関数を設定
        push: mockPush,
    }),
}));

describe('Bar', () => {
    it('history.push のテスト', () => {
        renderWithRouter(<Bar />, {
            route: '/foo/bar',
        });

        // ここらへんに同期的に副作用を起こす処理を書く
        // 以降、副作用で history.push('/foo/baz') されたとする

        // 呼ばれたことの確認
        expect(mockPush).toBeCalled();
        // 引数の確認
        expect(mockPush.mock.calls[0][0]).toBe('/foo/baz');
    });
});