node.jsunit-testingvue.jsmocha.jsmocha-webpack

How do you get the 'this' variable defined in a vuejs component unit test


I am trying to use mocha-webpack in an npm script to test a vuejs component. I am mocking the vuex store like this in the test:

const vm = new Vue({
        template: '<div><test></test></div>',
        store: new Vuex.Store(mockedStore),
        components: {
            'test': TestItems
        }
    }).$mount()

I call a method on the component to test such as:

vm.$options.components.test.methods.foo()

In the component I have code that accesses the store such as:

this.$store.commit('bar', data)

The problem is when it gets to this point I get this error:

'Cannot read property \'commit\' of undefined' undefined undefined

I verified that 'this' is undefined in this context. When I run the app, 'this' is defined and has '$store'. How can I make it work in the unit test context?


Solution

  • You're calling the foo method of the test component without an instance of test. Try doing something like this:

    const vm = new Vue({
      template: '<div><test ref="test"></test></div>',
      store: new Vuex.Store(mockedStore),
      components: {
        'test': TestItems
      }
    }).$mount()
    
    vm.$refs.test.foo()
    

    foo will be called with vm.$refs.test as this.