Question

我有以下测试效果很好

  it('does not render chapter div or error div', () => {
        const payLoad =  chapter;
        const switcher = 'guild';
        var vm = getComponent(payLoad, switcher).$mount();
        expect(vm.$el.querySelector('#chapter-card')).toBeNull();
        expect(vm.$el.querySelector('#error-card')).toBeNull();

    });

为此，我编写了一个安装组件的辅助方法：

  const getComponent = (prop1) => {
        let vm = new Vue({
            template: '<div><compd :payLoad="group" :index="index" "></compd ></div></div>',
            components: {
                compd,
            },
            data: {
                payLoad: prop1,

            },

        })
        return vm;
    }

但是，我的vue组件compd中有一个方法。为简单起见，我们称之为

add(num,num){
return num+num;
}

我希望能够编写类似于以下内容的测试用例：

  it('checks the add method works', () => {

        expect(compd.add(1,2).toBe(3));

    });

我无法弄清楚如何做到这一点。有人有什么建议吗？这里的文档： https://vuejs.org/v2/guide/unit-testing.html 不包括测试方法。

Answer 1

来自vue repo

的源代码

正如您所看到的，该方法只是在实例上调用

const vm = new Vue({
  data: {
    a: 1
  },
  methods: {
    plus () {
      this.a++
    }
  }
})
vm.plus()
expect(vm.a).toBe(2)

您也可以通过$options访问该方法，就像这种情况一样（vue source code）

const A = Vue.extend({
  methods: {
    a () {}
  }
})
const vm = new A({
  methods: {
    b () {}
  }
})
expect(typeof vm.$options.methods.a).toBe('function')

更新：要测试子组件，请使用$children访问必要的子组件。实施例

var childToTest = vm.$children.find((comp)=>comp.$options.name === 'accordion')`  assuming name is set to `accordion`

之后你可以

childToTest.plus();
vm.$nextTick(()=>{
  expect(childToTest.someData).toBe(someValue)
  done(); //call test done callback here
})

如果您有一个子组件而不是v-for，则会在其上放置ref `

vm.$refs.mycomponent.myMethod()

使用Jasmine在Vue组件中测试方法

1 个答案: