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 は便利。
Author And Source
この問題について(Vue.js prototypeに登録したpluginのユニットテストを書く), 我々は、より多くの情報をここで見つけました https://qiita.com/ksakiyama134/items/908deafe173e256fe907著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .