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组件

1 个答案: