2

我想用使用 vuetify、vuex、vuex-loading 的异步操作编写单元测试，例如： 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>
    <ul v-if="items.length">
      <li v-for="item in items" :key="item.id">
        <strong>{{ item.title }}</strong> <br>
        {{ item.body }}
      </li>
    </ul>
  </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>

文件导航.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()
  })
})

此测试的结果： [Vue 警告]：config.errorHandler 中的错误：“TypeError：无法读取未定义的属性 'isLoading'”

请帮我解决这个问题。感谢您提供的任何帮助

4

0 回答 0