Nuxt Test Utils - A Primer to Testing in Nuxt

🃏 Testing is important for any application. And at a certain complexity, manual testing is simply not possible anymore. Luckily, writing Unit Tests and E2E Tests for your Nuxt application isn't as difficult as it may seems. In this video, we will dive into the different testing types and build tests for your demo application in less than 20 minutes!

Key points:
🔧 How to set up @nuxt/test-utils
⌨️ Writing unit tests for our demo application
🚨 Creating different E2E tests, e.g. using Playwright

---

Links:

Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!

🌐 Connect further:

Chapters:
00:00 Intro and Agenda
01:16 Demo App Overview
03:28 Set up Test Utils
05:48 Simple Unit test for the AppNumber Component
08:17 Mocking useState in a Unit Test
10:46 Suggest your scenarios!
11:06 End to End Testing asserting the HTML
14:04 E2E Testing with Playwright
17:30 Setting the test env per file if needed
18:30 Summary
19:23 DejaVue - The Vue Podcast

[qbycqgb]

testing api showcase would be great!)))

[TheAlexLichter]

Like if at least one of your Nuxt projects doesn't have tests... YET

[maxde]

Having tests is great. Having fast tests is better. Since e2e tests require a running instance, can you give out some tricks how to improve the startup speed? (For you it's 4.x seconds, my app already takes ~20 seconds on my machine. And for a coworker, we're talking about 90 seconds...)

[georgespanos]

Testing some forms in combination with some API calls would also be great!!!

[lucc]

Wow, the testing tools have come a long way since I last tried to setup testing in a Nuxt app. Well done Nuxt team 👏

[MartinMasevski]

I absolutely love this kind of videos! Please make more content for tests <3

[scottyzen]

Your killing it with these videos Alex. Keep them coming 👍🏻

[DavidDeSloovere]

You're on a roll. At this rate Nuxt will need new features for you to cover in the videos 🙂.
Thanks again for the video. For a primer, it's great to see it as a video to get a quick idea on how to start.

[miguelcassimiro]

Congrats for the Thesis defence. Nice to see that and the new video also. Tests are something welcome to discuss and with Nuxt even better.

[CJohnD]

Great job explaining everything as always. Please consider some unit testing that includes Pinia as well. Waiting for part 2!

[gro]

Thanks for actually showing the most important, but also hardest part with Nuxt testing, which is the e2e. Unit testing and API testing is really easy with vitest, but this one is always something where you don't know where to start.

[frallen]

Please make a video about the comprehensive testing of e2e.

[rayan_azzam]

I used composables to separate my logic from ui, can you please show case of fetching data inside composable with custom fetch function 😵‍💫😵‍💫

[nangseakheng]

Really appreciate your contents teaching test components in Nuxtjs and I hope you can create new video about hosting Nuxtjs with docker using Bun package manager as well can't wait your new video

[eothica]

You make it look so easy!

Would really, really like to know how you'd test:

- A component that depends on API endpoint data from a parent component.
- A Component requiring props
- Deeply nested components that is dependant on their parent.
- Mocking the router and using registerEndpoint (how to mock endpoint data?)
- Whats the difference between renderSuspended, mountSuspended, mount and when do you use each?

I got so many question man. And waiting for VueSchools "Use Vitest with Nuxt 3" to come out too. even though it has been in progress for a long time.


I really really appriciate these videos and all the work you guys do! It's so amazing what people are able to build because of this.

[JoshHeller-fsjj]

Thanks for the video Alex. I was now able to get Nuxt testing all setup and working along with Vue Testing Library, jest-dom and User Interactions all working with TS. So tons of testing apis to choose from. The 1 thing I have not been able to get is where you wrote mountSuspended and VS found it even without you having already imported and then auto added the import for you. Any idea how you're making that happen? Thanks!

[jecht]

Would be great to see testing with Pinia integration!

[eduardocamillo]

Alex, I am getting now to tests, would there be any difference in how to use these tools for the server apis?

[DanielMunozMartin-wzst]

I'm having trouble implementing this in the nuxt layers, does it happen to anyone else?

[fmoessle]

Great vid, I haven’t checked out testing with nuxt with something other than cypress. Would have loved to see playwright with an open browser. Now I have to test it for myself 🤓