How to use unit test with vuex-loading

[mrcanon]

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: `

`

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

[giubatt]

I think you didn't paste all the code, I don't see 'isLoading' anywhere.

In another note, you shouldn't be importing Vue in your tests, that's what createLocalVue is for

[dobromir-hristov]

My two cents here. You should probably just create a simple mock of the library and pass it to the mocks property of vue-test-utils. A simple rule to follow is, what is not yours, dont test/mock it. This would mean we have to create a wrapper around the lib but lets be real here... we just assume it all works (as it should) and we create a simple mock. Otherwise you will have to install the plugin for the test too.

[f]

I think @dobromir-hristov's answer is the answer. Closing this issue.

[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);
});

[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) :)