Helpers: Suspense (and others?)

#105 had some great discussion around helpers - the example raised there was for components with async setup functions (used in <Suspense>). Testing those alone won’t work, since if you have a async setup, Vue expected a <Suspense> wrapper.

We could provide a helper (this works)

  test('uses a helper to mount a component with async setup', async () => {
    const Comp = defineComponent({
      async setup() {
        return () => h('div', 'Async Setup')
      }
    })

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

    const wrapper = mountSuspense(Comp)
    console.log(wrapper.html()) //=> <div>Async Setup</div>
  })

Some thoughts:

• we call flushPromises for the user. Any possible side-effects/unexpected behavior?
• does this belong in this library? Or should we mention in the docs and let users write their own?
• this sets a precedent. One we have one helper, it may be expected others are included. This is not a bad thing, just something to keep in mind.
• do we also then need a shallowMountSuspense? Someone will almost certainly ask for this.
  • if we drop shallowMount as a stand-alone function (which I think we should) and instead have a shallow: true mounting option, this would not be a problem.

[afontcu]

Hey @lmiller1990 the renderStubDefaultSlot option is a great idea and would help me out a lot! When do you think it might make it into a release?

it’s already there 😃 https://github.com/vuejs/vue-test-utils-next/pull/102

[lmiller1990]

Yes, I agree, we should add this as a global config too.