測試Vue組件方法

Question

我從Vue.js開始，很難找到有關單元測試的文檔。

我試圖測試組件methods和內置的東西作為ready() 。 我可以正確地調用它們，但它們在內部引用了this對象，並且在測試時間內丟失了this上下文。

錯誤

TypeError: this.$on is not a function

spec.js

import Vue      from 'vue';
import Partners from 'components/main/partner/Partners';

describe.only('Partners.vue', () => {
  it('should render with mocked partners', (cb) => {
    Partners.ready(); // I get an error here because ready() is calling inside: this.$on(...)

    cb(null);
  });
});

component.vue

export default {
  name: 'Partners',

  data() {
    return { };
  },

  methods: {
    get() {
      // ...
    }
  },
  ready() {
    this.$on('confirm', (confirm) => {
      // ...
    });

    this.get();
  }
};

Answer 1

我認為ready（）與Vue 1.0一起折舊。 考慮升級到Vue 2（其中mounted（）替換ready（））。

要測試組件，需要初始化組件和Vue實例（並且通常根據您的操作安裝它）。

使用vue-webpack模板（使用Vue 2）：

var ctor = Vue.extend(Partners)
var vm = new ctor()
vm.$mount()

現在你可以做像vm.method（）這樣的事情，並且會自動調用vm.mount（）等。