Question

我使用这种结构创建了vue组件。

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

我想用karma和jasmine或jasmine rails gem测试这个。我无法弄清楚如何测试组件。在文档的所有示例中，他们使用requirejs模块测试方法。我使用全局组件方式创建组件。

这些是文档中的示例。

<template>
  <span>{{ message }}</span>
</template>
<script>
  export default {
    data () {
      return {
        message: 'hello!'
      }
    },
    created () {
      this.message = 'bye!'
    }
  }
</script>

// Import Vue and the component being tested
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'

// Here are some Jasmine 2.0 tests, though you can
// use any test runner / assertion library combo you prefer

describe('MyComponent', () => {
  // Inspect the raw component options
  it('has a created hook', () => {
    expect(typeof MyComponent.created).toBe('function')
  })
  // Evaluate the results of functions in
  // the raw component options
  it('sets the correct default data', () => {
    expect(typeof MyComponent.data).toBe('function')
    const defaultData = MyComponent.data()
    expect(defaultData.message).toBe('hello!')
  })
  // Inspect the component instance on mount
  it('correctly sets the message when created', () => {
    const vm = new Vue(MyComponent).$mount()
    expect(vm.message).toBe('bye!')
  })
  // Mount an instance and inspect the render output
  it('renders the correct message', () => {
    const Ctor = Vue.extend(MyComponent)
    const vm = new Ctor().$mount()
    expect(vm.$el.textContent).toBe('bye!')
  })
})

Answer 1

import foo from 'bar';和var foo = require('bar');执行相同的操作，使foo可用作当前文件中的变量。在测试示例中，MyComponent是导入的vue组件实例，也可以使用当前文件中的MyComponent = Vue.component(...);实现。因此，如果您的测试位于同一文件中，请使用MyComponent变量，否则，您需要先使用MyComponent或module.exports = MyComponent导出export default MyComponent。这些导出假定MyComponent是您要导出的唯一内容，如果您要导出多个变量，请查看文档：{{3}} http://wiki.commonjs.org/wiki/Modules/1.1

单元测试Vue组件导轨应用程序

1 个答案: