【Vue】Jestを使った Vue / TypeScript の単体試験 ～ axios 編 ～

Vue jest

■ はじめに

https://dk521123.hatenablog.com/entry/2021/01/07/230317
https://dk521123.hatenablog.com/entry/2021/01/27/225148
https://dk521123.hatenablog.com/entry/2021/03/13/000000

の続き。

今回は、Vue 内で、axios を使った画面に対して、
単体試験を行いたいので、調べてみた。

目次

【１】環境設定
【２】構文：Mockからデータを返却する
【３】サンプル

【１】環境設定

axios をモックかするのに、
axios-mock-adapter を使用する

コマンド
https://github.com/ctimmerm/axios-mock-adapter

より抜粋
~~~~~~~~~~~~~
npm install axios-mock-adapter --save-dev
~~~~~~~~~~~~~

【２】構文：Mockからデータを返却する

import MockAdapter from 'axios-mock-adapter';
import axios from 'axios';

const mockAxios = new MockAdapter(axios);

// onGet 以外には、onPost / onAny などがある
mock.onGet("/users").reply(function (config) {
  // `config` is the axios config and contains things like the url

  // return an array in the form of [status, data, headers]
  return [
    // 200 OK
    200,
    // 返却したいデータを設定
    {
      users: [{ id: 1, name: "John Smith" }],
    },
  ];
});

【３】サンプル

以下の関連記事の「例５：Vue/TypeScript での リスト表示」の
単体試験を行ってみる

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

* consoleログのモック化は、以下の関連記事を参照のこと。

JS単体試験ツール Jest ～ Mock編 ～
https://dk521123.hatenablog.com/entry/2021/01/26/215558
Demo2.spec.ts 

import { shallowMount, Wrapper } from '@vue/test-utils';
import Demo2 from '@/views/Demo2.vue';

import flushPromises from 'flush-promises';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

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

  beforeEach(() => {
    mockAxios = new MockAdapter(axios);
  });

  it('This is just a demo test', async () => {
    mockAxios.onGet('https://jsonplaceholder.typicode.com/users').reply(200, [
      {
        id: 1,
        name: 'Mike',
        email: 'mike@gmail.com',
      },
      {
        id: 2,
        name: 'Tom',
        email: 'tom@gmail.com',
      },
      {
        id: 3,
        name: 'Sam',
        email: 'sam@gmail.com',
      },
    ]);

    wrapper = shallowMount(Demo2);
    
    await flushPromises();

    const vm = (wrapper.vm as any);
    console.log(vm.items);
    expect(vm.items[0].id).toEqual(1);
    expect(vm.items[0].name).toEqual('Mike');
    expect(vm.items[0].email).toEqual('mike@gmail.com');
    expect(vm.items[1].id).toEqual(2);
    expect(vm.items[1].name).toEqual('Tom');
    expect(vm.items[1].email).toEqual('tom@gmail.com');
    expect(vm.items[2].id).toEqual(3);
    expect(vm.items[2].name).toEqual('Sam');
    expect(vm.items[2].email).toEqual('sam@gmail.com');

    expect(console.info).toHaveBeenCalledWith('Response OK');
  });

  it('This is a network error test', async () => {
    mockAxios.onGet('https://jsonplaceholder.typicode.com/users').networkError();

    wrapper = shallowMount(Demo2);
    
    await flushPromises();

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

参考文献

https://dev.classmethod.jp/articles/vue-unittest-using-axios-mock-adapter/
https://www.wantedly.com/companies/istyle/post_articles/181566
https://blog.yug1224.com/archives/59efdfbc3804030a73c96f8a/
https://qiita.com/torinist/items/39d91c034aebd59351d3
https://qiita.com/goodtea0223/items/2c9316496c12bd3a8e27
https://qiita.com/Sue_chan/items/d73a4e3a4856046bc296

関連記事

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 の単体試験 ～ 非同期編 ～
https://dk521123.hatenablog.com/entry/2021/03/13/000000
Jestを使った Vue / TypeScript の単体試験 ～ axios / あれこれ 編 ～
https://dk521123.hatenablog.com/entry/2021/03/26/225814
非同期処理 ～ async/await, Promise ～
https://dk521123.hatenablog.com/entry/2021/01/16/202822
axios ～ 外部API通信ライブラリ ～
https://dk521123.hatenablog.com/entry/2021/01/14/101645
JS単体試験ツール Jest ～ Mock編 ～
https://dk521123.hatenablog.com/entry/2021/01/26/215558