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

Question

我正在使用 Vue 2 来增强 Ruby on Rails 引擎，使用现有 Haml View 中的 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 模板来支持这一点。