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（）等。

测试Vue组件方法

1 个答案: