Блог

Без сомнения, функция Suspense приводит к более чистой кодовой базе, но какой бы аккуратной она ни была, ее сложно протестировать. В частности, это еще недостаточно хорошо документировано.

случай:

Обычное приложение, созданное VUE CLI

• Технический стек: Vuex, Router, PWA, jest для модульного тестирования

Задача:

Я использовал компонент Suspense в соответствии с рекомендациями следующим образом:

     <RouterView name="default" v-slot="{ Component, route }">
      <transition :name="route.meta.transition" mode="out-in" :duration="300" :key="route.path">
        <Suspense >
          <template #default>
            <component :is="Component" :key="route.path"/>
          </template>
          <template #fallback>
            <div class="top-0 right-0 h-screen w-screen z-50 flex justify-center items-center">
               <div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-yellow-700"></div>
            </div>
          </template>
        </Suspense>
      </transition>
    </RouterView>

 

У меня мало маршрутов и представлений:

• один из них предназначен для просмотра входа в систему

   // here is the gotcha, if ever I removed async from setup the test runs well otherwise it always returns empty vm.
  async setup(){
    const router = useRouter()
    const route = useRoute()
    const form = reactive(new Form({
          username:'',
          password:'',
      }))
}
 

И мой набор тестов выглядит следующим образом:

 
  test('Shows login form',  async () => {
      let wrapper = mount(Login,{
        // tried set global.stubs.transition to false
        renderDefaultSlot: true // tried as well to move this attr to beforeEach hook
      })
      expect(wrapper.exists()).toBe(true) // passes
      await nextTick()
      // tried to flushPromises()
      console.log(wrapper.vm) // always empty object {}
      expect(wrapper.findAll('div')).toBeTruthy() // fails accordingly as it can't run helper methods to get the parentElement
    })

 

Может ли какой-нибудь ветеран VUE здесь дать подсказку или обходной путь!

Все открытые обсуждения на Github показывают, что я не единственный, кто наткнулся на эту проблему, но пока это просто обсуждение.

https://github.com/vuejs/vue-test-utils-next/issues/108#issue-611802592

https://github.com/vuejs/vue-test-utils/issues/956

После расследования написал небольшой помощник, цитируемый из обсуждения на Github выше:

 import {defineComponent,h,Suspense } from 'vue'
import { mount } from '@vue/test-utils'
import flushPromises from 'flush-promises';

const mountSuspense =  async (component, options) => {
    const wrapper = mount(defineComponent({
      render() {
        return h(Suspense, null, {
          default: h(component),
          fallback: h('div', 'fallback')
        })
      }}), ...options)

    await flushPromises()
    return wrapper
  }

  describe('App renderes', ()=>{
      test('About page renders',async()=>{
          const wrapper = await mountSuspense(About)
          await console.log(wrapper.text()) // it works
      })
  })