與噶，茉莉和的WebPack

Question

測試Vue.js組件請參考下面我的代碼：

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'); 
});