Testing Keep-Alive with avoriaz doesn't work

I’m referring to this blob when creating unit test for keep alive component.

This test without avoriaz works. It calls the activated hook in the TargetComponent

Vanilla Vue Unit Test

import TargetComponent from '@/comp/TargetComponent'
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)
describe('App.vue', () => {
  let store = new Vuex.Store({})
  store.registerModule('mock', {
     // [snipped or I'll be jobless
  })

  describe('loads TargetComponent.vue', () => {
    let two = {
      template: '<div>two</div>'
    }
    let components = {
      TargetComponent,
      two
    }
    it('without problem', () => {
      const vm = new Vue({
        template: `
        <div>
          <keep-alive>
            <component :is="view"></component>
          </keep-alive>
        </div>
      `,
        data: {
          view: 'TargetComponent'
        },
        store,
        components
      }).$mount()
      Vue.nextTick(() => {
        vm.view = 'two'
        Vue.nextTick(() => {
          vm.view = 'TargetComponent'
        })
      })
    })
  })
})

However, after trying to recreate the test using avoriaz

---

Avoriaz Unit Test

/**
 * Don't change this part
 */
import Vue from 'vue'
import {mockStore} from '../../dummy/mockStores'
import {mockComponent, createLocalVue} from '../../dummy/testUtils'
/**
 * Load our unit test framework
 */
import Vuex from 'vuex'
import {mount} from 'avoriaz'

/**
 * Add the component you want to test against here
 */
import TargetComponent from '@/comp/TargetComponent'

let localVue = createLocalVue() // adapted from vue-test-utils
/**
 * Include your preferred plugin.
 * Usually, if you are testing Vuex, you can install it here.
 * If it's installed in main.js, you can skip this step.
 */

/**
 * Init VM
 */
let store = new Vuex.Store()
store.registerModule(mockStore.name, mockStore)

const testedVM = localVue.extend({
  // add options here if relevant with your unit testing
  template: `<div>
              <keep-alive>
                <component :is="view"></component>
              </keep-alive>
            </div>`,
  data: {
    view: 'mockComponent'
  },
  components: {
    mockComponent,
    TargetComponent
  }
})

describe('TargetComponent.vue', () => {
  it('activated without problem', (done) => {
    // use shallow if you don't want to load component deps
    const wrapper = mount(testedVM, {store})
    // here, we test for activated hook.
    // be aware that we are 'keeping it alive', so that activated hook
    // will be fired when being called
    wrapper.vm.view = 'TargetComponent'
    Vue.nextTick(() => {
      expect(wrapper.vm.view).to.equal('CalendarForm')
      done()
      // Note: Doesn't call activated hook. :/
    })
  })
})

---

It seems when I try to access wrapper.vm.view, it is not referencing to the view data in the testedVM. Calling wrapper.setData({view: 'TargetComponent'}) also yields no result

Any help or lead is appreciated

[eddyerburgh]

Try this:

Expand

/**
 * Don't change this part
 */
import Vue from 'vue'
import {mockStore} from '../../dummy/mockStores'
import {mockComponent, createLocalVue} from '../../dummy/testUtils'
/**
 * Load our unit test framework
 */
import Vuex from 'vuex'
import {mount} from 'avoriaz'

/**
 * Add the component you want to test against here
 */
import TargetComponent from '@/comp/TargetComponent'

let localVue = createLocalVue() // adapted from vue-test-utils
/**
 * Include your preferred plugin.
 * Usually, if you are testing Vuex, you can install it here.
 * If it's installed in main.js, you can skip this step.
 */

/**
 * Init VM
 */
let store = new Vuex.Store()
store.registerModule(mockStore.name, mockStore)

const testedVM = {
  // add options here if relevant with your unit testing
  template: `<div>
              <keep-alive>
                <component :is="view"></component>
              </keep-alive>
            </div>`,
  data: {
    view: 'mockComponent'
  },
  components: {
    mockComponent,
    TargetComponent
  }
}

describe('TargetComponent.vue', () => {
  it('activated without problem', (done) => {
    // use shallow if you don't want to load component deps
    const wrapper = mount(testedVM, {store})
    // here, we test for activated hook.
    // be aware that we are 'keeping it alive', so that activated hook
    // will be fired when being called
    wrapper.vm.view = 'TargetComponent'
    Vue.nextTick(() => {
      expect(wrapper.vm.view).to.equal('CalendarForm')
      done()
      // Note: Doesn't call activated hook. :/
    })
  })
})

I wrote my own test and successfully switched the component by calling `wrapper.setState`:

Expand

import {mount} from 'avoriaz'
import sinon from 'sinon'
import {expect} from 'chai'

const activated = sinon.stub()
const deactivated = sinon.stub()

const one = {
    template: '<div>one</div>',
    deactivated
}

const two = {
    template: '<div>two</div>',
    activated,
}

const componentToTest = {
    template: `<div>
              <keep-alive>
                <component :is="view"></component>
              </keep-alive>
            </div>`,
    data: {
        view: 'one'
    },
    components: {
        one,
        two
    }
}

describe.only('TargetComponent.vue', () => {
    it('activated without problem', () => {
        const wrapper = mount(componentToTest)
        wrapper.vm.view = 'TargetComponent'
        wrapper.setData('two')
        expect(activated.called)
        expect(deactivated.called)
    })
})

[willypt]

Okay, that clears up why the test doesn’t work in Vue 2.1.x Thanks a lot for your help @eddyerburgh I’ll mark it as closed and resolved 👍