Question

我正在使用Vue 2来增强Ruby on Rails引擎，使用现有Haml视图中的inline-template属性作为我的Vue组件的模板。

是否可以测试这样定义的组件的方法？我可以找到的所有测试示例都假设使用单文件.vue组件。

这些测试（使用Mocha和Chai）失败并显示[Vue warn]: Failed to mount component: template or render function not defined.

示例组件：

//main-nav.js

import Vue from 'vue'
const MainNav =  {
  data: function() {
    return {open: true}
  },

  methods: {
    toggleOpen: function(item) {
      item.open = !item.open
    }
  }
}

export default MainNav

示例测试：

//main-nav.test.js
import MainNav from '../../admin/main-nav'

describe('MainNav', () => {
  let Constructor
  let vm

  beforeEach(() => {
    Constructor = Vue.extend(MainNav)
    vm = new Constructor().$mount()
  })

  afterEach(() => {
    vm.$destroy()
  })

  describe('toggleOpen', () => {
    it('has a toggleOpen function', () => {
      expect(vm.MainNav.toggleOpen).to.be.a('function')
    })

    it('toggles open from true to false', () => {
      const result = MainNav.toggleOpen({'open': true})
      expect(result).to.include({open: false})
    })
  })
})

Answer 1

事实证明，您仍然可以在组件文件中指定模板，并且将使用任何inline-template模板来支持它。

使用内联模板对单元测试vue.js组件进行测试

1 个答案: