I'm having a couple of issues with my Vue test libs. I am trying to test a mixin. It requires setting the route and mocking a function. Here is my code

MIXIN

export const CampaignNotifier = {
    mounted () {
        // Create tagname with dynamic currency parameter from banking app
        let routeName = this.$route.name
        let queryParamCurrency = (this.$route.query.currency) ? `- ${ this.$route.query.currency.toUpperCase() }` : '-'
        this.campaignTagName = (BRAZE_TAG_MAPPING[routeName]) ? BRAZE_TAG_MAPPING[routeName].replace(/-/, queryParamCurrency) : null
        if (this.campaignTagName) {
            this.$appboy.logCustomEvent(this.campaignTagName)
        }
    },
}

TEST:

import { expect } from 'chai'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import VueRouter from 'vue-router'
import sinon from 'sinon'
import { CampaignNotifier } from '@/mixins/campaignNotifier'

let wrapper

function factory (routeName, currency) {
    let localVue = createLocalVue()
    localVue.use(VueRouter)

    let routes = [
        {
            path: routeName,
            name: routeName,
            query: {
                currency
            }
        }
    ]

    let router = new VueRouter({
        routes
    })

    let Component = {
        render () { },
        mixins: [CampaignNotifier],
        localVue,
        router,
        mocks: {
            $route: {
                path: routeName,
                query: {
                    currency
                }
            },
            $appboy: {
                logCustomEvent: () => {}
            }
        }
    }
    return shallowMount(Component)
}

describe('@/mixins/campaignNotifier', () => {
    it('Campaign Notifier is not called if route not configured correctly', () => {
        wrapper = factory('before-begin', 'EUR')
        console.log('$route ***', wrapper.vm.$route)

        sinon.spy(wrapper.vm.$appboy, 'logCustomEvent')
        expect(wrapper.vm.$appboy.logCustomEvent).not.toHaveBeenCalled()
    })
})

Issues I am encountering:

1. When I mock the $route and console.log it, it returns undefined. I tried mocking it and also using VueRouter. Neither worked.
2. I am trying to mock the global prototype / method $appboy.logCustomEvent I get: [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'logCustomEvent' of undefined"

Any help would be greatly appreciated. Thanks

CodePudding user response：

You're incorrectly combining mounting options with the component definition itself, so your mocks aren't actually getting installed, leading to the errors you observed.

Mounting options should be passed as the second argument to shallowMount:

function factory() {
  let Component = {
    render() { },
    mixins: [CampaignNotifier],
  }
  let mountingOptions = {
    localVue,
    router,
    mocks: {
      $route: {
        path: routeName,
        query: {
          currency
        }
      },
      $appboy: {
        logCustomEvent: () => { }
      }
    }
  }
  return shallowMount(Component, mountingOptions)
}

CodePudding user response：

Tony: thank you so much, that was the issue :) Always something new to learn, eh!