How to use unit test with vuex-loading

I would like to write a unit test with the async action such as: File navigation.spec.js: `

import Vue from ‘vue’
import Vuex from ‘vuex’
import Vuetify from ‘vuetify’
import vueLoading from ‘vuex-loading’
import { shallow, createLocalVue } from ‘@vue/test-utils’
import Navigation from ‘@/components/Navigation’
import { stat } from ‘fs’;

Vue.use(Vuetify)
Vue.use(vueLoading)
const localVue = createLocalVue()
localVue.use(Vuex)
describe(‘Navigation’, () => {
let store
let actions
let state
beforeEach(() => {
state = {
items: []
}
actions = {
  getAsync: jest.fn()
}

store = new Vuex.Store({
  state,
  actions
})

})
it(‘dispatches an getAsync action’, () => {
const wrapper = shallow(Navigation, {
store,
localVue
})
wrapper.find(‘button’).trigger(‘click’)
expect(actions.getAsync).toHaveBeenCalled()
})
})

`

File Navigation.vue: `

<template>

  <div class="multipane__aside">
    <v-btn
      :disabled="$loading.isLoading('call ajax')" 
      @click="fetchResults"
      color="primary" 
    >
      <v-loading loader='call ajax'>
        <template slot='spinner'>Loading...</template>
      </v-loading>
      Call ajax
    </v-btn>
    <div v-if="$loading.isLoading('call ajax')">call ajax...</div>
    

      

        {{ item.title }} 

        {{ item.body }}
      
    
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'RecipeNavigation',
  computed: {
    ...mapState(['items'])
  },
  methods: {
    ...mapActions(['getAsync']),
    fetchResults () {
      this.getAsync()
    },
    onClose () {
      this.$emit('close', this.$el)
    }
  }
}
</script>

`

The result of test: [Vue warn]: Error in config.errorHandler: “TypeError: Cannot read property ‘isLoading’ of undefined”

Please help me to pass this issue. Thank you for any help you can offer

[f]

Hi @gabrielrobert, would you help to add a “testing” part into README.md file according to your testing experiences and problems? I need to improve vue-wait to make it more testable. It would be awesome for the people asking for tests (including me) 😃

[gabrielrobert]

In some cases, we cannot mock v-wait. This library is widely used in our project and stubs/mocks prevent proper testability. For instance:

Component:

<v-wait for="loading">
   <Spinner slot="waiting" />
   <ul class="suggestions" v-if="suggestions">
      <li v-for="...">Bleh</li>
   </ul>
</v-wait>

Test:

it('shows suggestions', async () => {
    const wrapper = shallowMount(SuggestionsComponent, { localVue });
    expect(wrapper.find('.suggestions').exists()).toBe(true);
});

It is not possible to test proper ul rendering without v-wait component. You should:

const localVue = createLocalVue();
localVue.use(Vuex);
localVue.use(VueWait);

it('shows suggestions', async () => {
    const wrapper = shallowMount(SuggestedAddresses, {
      localVue,
      wait: new VueWait()
    });
    expect(wrapper.find('.suggestions').exists()).toBe(true);
});