Vue.js prototypeに登録したpluginのユニットテストを書く

Vue.js で plugin のテストを書いた時のメモ。prototype に登録したプラグインって、どうやって Jest から呼べばいいんだろうってちょっと悩んだ。最終的に localVue.use() してからlocalVue.prototype.$hoge() って実行すればちゃんと Jest からでも実行できた。

テスト対象コード

例えば、HTTP ステータスコードによって処理を行う処理があったとする。本来であればテストしやすいように install とは別ファイルでロジックを管理するべきなんだろうけど。元がこうなっていたので、このコードを保ったままユニットテストを書く。

export const MyPlugin = {
  install(Vue) {
    Vue.prototype.$myPlugin = (statusCode: number) => {
      switch (statusCode) {
        case 401:
          /* 処理省略 */
          break;
        case 500:
          /* 処理省略 */
          break;
        default:
          /* 処理省略 */
          break;
      }
    };
  }
};

テストコード

テストコードはこんな感じ。vue-test-utils の createLocalVue でインスタンスを作成して、 use() でプラグインを適用。その後 prototype から $myPlugin を直接呼べば良い。

import { createLocalVue } from "@vue/test-utils";
import { MyPlugin } from "my-plugin.ts";

const localVue = createLocalVue();
localVue.use(MyPlugin);

describe("MyPlugin", () => {
  it("引数が401の場合", () => {
    localVue.prototype.$myPlugin(401);
  });

  it("引数が500の場合", () => {
    localVue.prototype.$myPlugin(500);
  });
});

Vue のテストコードといえば shallowMount を使ってコンポーネントのユニットテストをよく書いていたけど、いざプラグインのテストを書こうと思ったら、なかなか思い付かず。vue-test-utils は便利。