computedでglobal変数をreturnしているvmをvue-test-utilsでtestする | Vuex + vue-test-utils その0001

参考にさせて頂いたページ

• Mounting Options | Vue Test Utils

要約すると

要約すると「任意のcomputedを上書きしてからtestを実行する。」ということになります。

例

例えばプロダクトのコードで、 window.gon = { hoge: 'example_value' } を用意して、これをcomputedのhogeでreturnしている状態があるとします。

例えば以下のようなVueModelです。

window.gon = { hoge: 'example_value' }

const vm = new Vue({
  〜略〜
  computed: {
    hoge () {
      return window.gon.hoge;
    },
  },
  〜略〜
});

上記のようなコンポーネントをテストするとき以下のように記述することで確認できそうです。

  it('テストのタイトル', () => {
    const gon = {hoge: 'example_value'};
    const wrapper = shallowMount(TextField, {
      computed: {
        hoge() {
          return gon.hoge;
        },
      },
    });

    // ここでテストする
    console.log('============================');
    console.log(wrapper.vm.hoge);
    console.log('============================');
  });