Testing Suspense Component

[jthn]

I am trying to test a component with an async setup. The components I am working with in my project do not include their own suspense components, as I am trying to bubble them up and handle them in a single place. This all works well in my implementation, but I am unable to get default case to resolve.

This deviates slightly from the example specs in this repo, but it seems like what I am attempting to do should work.

I created a minimal example repo and a corresponding StackBlitz. The component suspends just fine in the browser, but the tests do not pass. I can tell my suspense wrapper is working but the timeout I am using to test with never resolves.

The relevant files are as follows:

// SuspenseExample.vue

<template>
  <div>{{ out }}</div>
</template>

<script setup>
function timeout(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms))
}

await timeout(100)

const out = "Suspended"
</script>

// SuspenseExample.spec.js

import { describe, it, expect } from "vitest"
import { flushPromises, mount } from "@vue/test-utils"
import { defineComponent, h, Suspense } from "vue"
import SuspenseExample from "../SuspenseExample.vue"

const mountSuspense = async (component, options) => {
  const c = defineComponent({
    render() {
      return h(Suspense, null, {
        default: h(component),
        fallback: h("div", "fallback"),
      })
    },
  })

  const wrapper = mount(c, options)

  await flushPromises()

  return wrapper
}

describe("the-example", () => {
  it("is testable", async () => {
    const wrapper = await mountSuspense(SuspenseExample)

    console.log(wrapper.html())
    expect(wrapper.html()).toContain("suspended")
  })
})

I am not sure if this is a bug or not, as this pattern seems to be working for other folks in the issues here. I'd love a second set of eyes if I am doing something boneheaded.

[cexbrayat]

Hi @jthn

As you're waiting for 100ms in the promise, your test can't succeed
One easy way to workaround timers is to use vi.useFakeTimers().

Something like:

const mountSuspense = async (component, options) => {
  // use fake timers
  vi.useFakeTimers();
  const c = defineComponent({
    render() {
      return h(Suspense, null, {
        default: h(component),
        fallback: h("div", "fallback"),
      })
    },
  })

  const wrapper = mount(c, options)
  // advance 100ms
  vi.advanceTimersByTime(100)
  await flushPromises()

  return wrapper
}

and I think the test should succeed

[jthn]

Thank you SO MUCH @cexbrayat !!!

I'm new to this ecosystem and hadn't yet run across vi. You saved me another night of stubbornly trying the same thing over and over again.