Testing Vue components methods

Question

I am starting with Vue.js and is really hard to find documentation about Unit Test.

I am trying to test components methods and builtin stuff as ready(). I can call those correctly but they internally have references to this object and this context is lost during testing time.

error

TypeError: this.$on is not a function

spec.js

import Vue      from 'vue';
import Partners from 'components/main/partner/Partners';

describe.only('Partners.vue', () => {
  it('should render with mocked partners', (cb) => {
    Partners.ready(); // I get an error here because ready() is calling inside: this.$on(...)

    cb(null);
  });
});

component.vue

export default {
  name: 'Partners',

  data() {
    return { };
  },

  methods: {
    get() {
      // ...
    }
  },
  ready() {
    this.$on('confirm', (confirm) => {
      // ...
    });

    this.get();
  }
};

lmiller1990 · Accepted Answer · 2017-01-21 07:33:47Z

2

I think ready() is depreciated along with Vue 1.0. Consider upgrading to Vue 2 (where mounted() replaces ready()).

To test your component, you need to initialize your component and a Vue instance, (and usually mount it, depending what you are doing).

Using the vue-webpack template (which uses Vue 2):

var ctor = Vue.extend(Partners)
var vm = new ctor()
vm.$mount()

now you can do things like vm.method(), and vm.mount() will automatically be called, etc.

answered Jan 21, 2017 at 7:33

lmiller1990

9552 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Testing Vue components methods

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related