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:
🔗 Docs - nuxt.com/docs/getting-started...
🔗 Code - github.com/manniL/alexander-l...
🔗 Test Utils Repo: github.com/nuxt/test-utils/
🔗 DejaVue - dejavue.fm/ - ‪@DejaVueFm‬
📺 What is useState - • Why you should use use...
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: www.lichter.io
Twitter/X: / thealexlichter
Twitch: / thealexlichter
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

[@user-qb7yc3qg3b]

testing api showcase would be great!)))

[@TheAlexLichter]

Noted!

[@TheAlexLichter]

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

[@thetakburger7928]

Does it count if I had installed the test utils but was waiting for your video ?

[@TheAlexLichter]

@thetakburger7928 only if you add the tests soon 😛

[@randomtimessomehow]

I tested it with my own eyes, it'll be fine! (🥲)

[@georgespanos4680]

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

[@max06de]

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...)

[@ragura]

There’s no way around spinning up a new Nuxt instance for separate tests that I know of; the whole point is to have them as isolated units. If you really wanted to you could test more things inside one test (even with Playwright by navigating to another page), but I’d consider that bad practice. I don’t know how many tests you have, but even 90 seconds isn’t too bad for something that should only run on pre-commit and in CI. If you’re writing tests, add “.only” to the test you’re writing to only test that specific test instead of the whole suite.

[@joshdeltener2012]

Well, you can at least run more than 1 Playwright test in parallel.

[@luc122c]

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

[@TheAlexLichter]

Will forward that 🙌

[@MartinMasevski]

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

[@TheAlexLichter]

Coming! 🙌🏻

[@CJohnD]

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

[@TheAlexLichter]

Thank you 🙏🏻 Will definitely get back to it and add a more thorough example/video!

[@scottyzen88]

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

[@TheAlexLichter]

Thank youu! Will do 🙏🏻

[@gro967]

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.

[@TheAlexLichter]

Especially in an existing application it is tricky and you'd want to start "somewhere" with it. But the setup part (staging data, staging env etc etc) is commonly the most difficult one.

[@alexcroox]

Thank you for this!

[@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.

[@TheAlexLichter]

Haha, I am afraid I won't be able to keep up with the speed of new Nuxt + UnJS features 😛 Glad it was useful 🙏🏻

[@miguelcassimiro8103]

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.

[@TheAlexLichter]

Thank you 🙏🏻 Was about time 🙊 Glad you enjoyed the video!

[@RobKrater]

Another great video. Thanks as always

[@TheAlexLichter]

My pleasure!

[@nangseakheng2976]

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

[@mattroyer]

I agree!

[@TheAlexLichter]

Sure I will!

[@youhan96]

Congrats!!

[@TheAlexLichter]

Thanks a lot 🙏🏻

[@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.

[@rayanazzam7225]

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

[@TheAlexLichter]

You mean as in kzbin.info/www/bejne/oImraYeoYsqrnqs 👀

[@rayanazzam7225]

Yes exactly i meant if you can show how to test such like thing that in the video 😃😃

[@mattroyer]

Thanks for the tutorial! Would love to see a walkthrough on implementing pinia vs useState for global state management

[@TheAlexLichter]

Briefly covered it in kzbin.info/www/bejne/o6eTiJZ4dqeWf80 Anything besides that you are interested in? 😋

[@oscarrafaelcampos]

Hello Alex, thank you for this video, it will be very useful. Of all the videos you've made, do you have any that explain in practice the use of the .client or .server suffixes in components?

[@TheAlexLichter]

Not yet! Server components will be covered in the future though and „client only“ components might be an own video too 🙏🏻

[@jecht94]

Would be great to see testing with Pinia integration!

[@milos018]

Showing us your way on how to set /api endpoints would be great as well as Pinia store! Tnx, Milos

[@TheAlexLichter]

Will come ✅

[@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 🤓

[@TheAlexLichter]

Hah, good idea for next time! Should've done taht 😋

[@AllexSise]

Any advice on how to run it showing the browser?

[@TheAlexLichter]

@AllexSise sure! Just set headless: false in the playwright browser launch options

[@AllexSise]

@@TheAlexLichter thanks, got it working: edit vitest.config.ts import { defineVitestConfig } from '@nuxt/test-utils/config' export default defineVitestConfig({ test:{ browser:{ enabled: true, name: 'chrome', headless: false } } })

[@ribl1000]

You did it😘

[@louis4757]

For me mocking the VueRouter and testing with useRoute was difficult. Maybe you can do some content about that. Loved this video, very informative❤

[@TheAlexLichter]

Noted 👍🏻 Glad you enjoy them ☺️

[@Gaijin101]

❤❤❤

[@codybontecou]

OOoo yea! This is the content I want

[@TheAlexLichter]

Glad to hear Cody 🎉

[@MGJoe93]

Congratulations on completing your thesis! Will it be publicly available? I'm very interested in reading it :)

[@TheAlexLichter]

Thank you so much! Yes, it will be in the future! Will give you a ping.

[@ragura]

Finally got around to watching this video. Good introduction to the basics and I like that you skipped the whole testing philosophy explanation many other videos get into before finally showing how to actually write tests. I’m actually a bit of a test writing veteran because of my job (Django tests) and the only thing that still confuses me about Nuxt testing specifically is how to bypass middleware that uses session data, for example in the case of an authentication route guard. It becomes even more complicated when the functionality is abstracted away to some library, like for example Superbase auth functions and Pinia stores storing user data. Is the best approach to mock all of these functions and even the Pinia stores?

[@TheAlexLichter]

Yeah, I try to keep the lenght still reasonable, with testing philosophy & more we'd be easily 30+ minutes :D I think for bypassing: You can use import.meta.test to check if you are in a test environment 😊

[@ManpreetSingh-jy9jc]

@@TheAlexLichter I am currently checking process.env.NODE_ENV which is set to 'Test' when test cases are run to bypass some checks. For session cookies, I am extracting cookie from the login response, saving it in a variable and sending it in subsequent requests

[@fmoessle]

I'm a sucker for the thumbnails 😂

[@TheAlexLichter]

Haha, thank you 🙊 Glad you enjoy them!

[@VitorNeves]

Hi, we can set a default the environment on vitest.config and then when needed we can overide it directly on the file, right?

[@TheAlexLichter]

Yes, absolutely 🙌

[@HadeelYassin-jy9gk]

is there a way we can skip mock auto imports for nuxt core composables, or it's a must ?

[@TheAlexLichter]

Depends a lot on your test case. I'd mock as little as possible but e.g. for randomness and similar it is more or less necessary

[@HadeelYassin-jy9gk]

@@TheAlexLichter thanks for your reply, but i am currently using nuxt core auto-imports (utils/composables), like definePageMeta and vitests is failing due to undefined definePageMeta, how can i make those core auto imports recognized by vitest, appreciate your help

[@TheAlexLichter]

that *should* work out of the box when following the guide (setting the right vitest environment is important here!)

[@DanielMunozMartin-wz4st]

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

[@cumacos65]

Do you have an example of Nuxt configuration with MSWjs Mock (Service Worker) ??

[@TheAlexLichter]

Nope, didn't use MSW with Nuxt yet. But just put it on my list 👍🏻

[@cumacos65]

@@TheAlexLichter Please how do I put it on your list? That tool is very useful, and with Nuxt even more so.

[@TheAlexLichter]

Sorry, I meant that I just put it on my list of topics 😁 So you kinda did that already 😛

[@cumacos65]

@@TheAlexLichter Wow, great. Thanks in advance !!

[@muhammadrizkiwahyudi3334]

Can you make video about nuxt 3 + prisma and how to setup on production?

[@TheAlexLichter]

Might use it in a stream soon!

[@muhammadrizkiwahyudi3334]

@@TheAlexLichter 🔥🔥🔥

[@svenvanreenen]

Congrats with the Thesis, when will you share your conclusions😋

[@TheAlexLichter]

Thank youu 🙏 The thesis will be submitted to an academic conference. After that I will 🙌

[@jonileih]

Glückwunsch zur Thesis - Bachelor oder Master?

[@TheAlexLichter]

Danke! Weder noch, Diplom 👀

[@taoufiqnaciri8345]

Can you do a server api routes test please 🙂

[@TheAlexLichter]

On the list ✅ Any specifics with regards to server api routes testing you want to know?