使用 Karma、jasmin 和 webpack 测试 Vue.js 个组件

Question

请看下面我的代码：

import Vue from 'vue';
import UserTile from "../src/components/user-tile.vue";
const DataBus = require('../src/dataBus');

describe('user Tile', () => {
const getComponent = (userData) =>{
  let vm = new Vue({
    template: '<div><user-tile ref="component" :userData="userData"></user-tile></div>',
    components: {
      UserTile,
    },
    data:{
      userData
    }
  })
  return vm;
}

  it('does something', () => {
    const vm = getComponent(DataBus.pod.members[0]).$mount();
    const component= vm.$refs.component;
    console.info(component);
    expect(component.name).toBe('user-tile');
  });
});

我正在尝试做一个非常基本的测试并让它验证组件的名称，在用户磁贴中设置与定义的相匹配：

 export default{
name: 'user-tile'
}

但它总是失败：失败的测试：

   user Tile
    × does something
      Chrome 57.0.2987 (Windows 7 0.0.0)
    Expected undefined to be 'user-tile'.
        at Object.eval (eval at 492 (test/individual-user-tile-test.js:154:1), <anonymous>:33:28)

谁能帮帮我？

Answer 1

这是因为 name 属性不直接存在于组件上 - 它存在于 $options 对象上，所以这应该有效：

it('does something', () => {
    const el = document.createElement('div');
    const vm = getComponent(DataBus.pod.members[0]).$mount(el);
    const component= vm.$refs.component;
    expect(component.$options.name).toEqual('user-tile');
});

使用 Karma、jasmin 和 webpack 测试 Vue.js 个组件

Testing Vue.js components with Karma,jasmin and webpack

jasmine

karma-runner

karma-jasmine

webpack

vue.js