APIリクエストが2回以上で、同じMockを使わなければならない場合、
レスポンスも変えないとテストが通らない。知っていれば簡単なので、メモしておきます。

今回は、$axios.getが2回叩かれるページのテストを書きました。axiosGetMockが2回呼ばれる。

    const wrapper = mount(Page, {
      localVue,
      vuetify,
      mocks: {
        $axios: {
          get: axiosGetMock

Mock作成

これだと、何回呼ばれても同じ値が返りますが、

      axiosGetMock = jest.fn(() => Promise.resolve({ data: { infomation, infomations: [] } }))

下記のようにすると、1回目は2行目(infomation)、2回目は3行目(user)、
3回目以降は1行目が返るようになる。

      axiosGetMock = jest.fn()
        .mockImplementationOnce(() => Promise.resolve({ data: { infomation, infomations: [] } }))
        .mockImplementationOnce(() => Promise.resolve({ data: { user } }))

モック関数 · Jest – mockFn.mockImplementationOnce(fn)

呼び出しのテスト

これだと、2回呼ばれて、2つのURLが呼ばれる事は担保できますが、順番は担保されない。

    expect(axiosGetMock).toBeCalledTimes(2)
    expect(axiosGetMock).toBeCalledWith('https://example.com/infomations.json', { params: { page } })
    expect(axiosGetMock).toBeCalledWith('https://example.com/users/auth/show.json')

下記のようにnthCalledWithにすれば、何回目に呼ばれたかも担保できる。

    expect(axiosGetMock).toBeCalledTimes(2)
    expect(axiosGetMock).nthCalledWith(1, 'https://example.com/infomations.json', { params: { page } })
    expect(axiosGetMock).nthCalledWith(2, 'https://example.com/users/auth/show.json')

Expect · Jest – .toHaveBeenNthCalledWith(nthCall, arg1, arg2, ….)

1回の場合の挙動は変わらないけど、
toBeCalledWithを使わずにnthCalledWithに統一しておくと明確にできるので良さそう。