Skip to content
Advertisement

What is the proper way to test Vue3 async setup component with suspense?

No doubt that Suspense feature leads to a cleaner code base, but as tidy as it is, it turns to be hard to test. Specifically it is not well documented yet.

case:

Regular app generated by VUE CLI

  • Tech stack: Vuex, Router, PWA, jest for unit testing

Challenge:

I made use of Suspense component as recommended as follows:

JavaScript

I have few routes and views:

  • one of them is for Login view
JavaScript

And my test suite as follows:

JavaScript

Does any VUE veteran here can give a hint or workaround!

All open discussions on Github shows that I am not the only one stumbled on this issue, but for now it is just a discussion.

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

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

Advertisement

Answer

After investigation wrote a little helper quoted from Github discussion above:

JavaScript
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement