CODEWITHSUNDEEP
webpackjasminevue.jskarma-runnerkarma-jasmine
Programatt
Programatt

Reputation: 836

Testing Vue.js components with Karma,jasmin and webpack

Please see below my code:

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

I'm trying to do a really basic test and get it to validate the name of the component, set in user tile matches what is defined:

 export default{
name: 'user-tile'
}

but it always fails with: FAILED TESTS:

   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)

Can anyone help me?

Upvotes: 0

Views: 842

Answers (1)

Belmin Bedak
Belmin Bedak

Reputation: 9201

It's because name property doesn't exist on component directly - it's on $options object, so this should work:

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

Upvotes: 1

Related Questions