Nuxt Test Utils - A Primer to Testing in Nuxt
Vložit
- čas přidán 28. 07. 2024
- 🃏 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 - Věda a technologie
Like if at least one of your Nuxt projects doesn't have tests... YET
Does it count if I had installed the test utils but was waiting for your video ?
@thetakburger7928 only if you add the tests soon 😛
I tested it with my own eyes, it'll be fine! (🥲)
Hm currently not a single one of my Nuxt projects has tests, and I feel guilty xD
testing api showcase would be great!)))
Noted!
Testing some forms in combination with some API calls would also be great!!!
Wow, the testing tools have come a long way since I last tried to setup testing in a Nuxt app. Well done Nuxt team 👏
Will forward that 🙌
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...)
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.
Well, you can at least run more than 1 Playwright test in parallel.
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.
Haha, I am afraid I won't be able to keep up with the speed of new Nuxt + UnJS features 😛
Glad it was useful 🙏🏻
I absolutely love this kind of videos! Please make more content for tests
Coming! 🙌🏻
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.
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.
Your killing it with these videos Alex. Keep them coming 👍🏻
Thank youu! Will do 🙏🏻
Another great video. Thanks as always
My pleasure!
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.
Thank you 🙏🏻 Was about time 🙊
Glad you enjoyed the video!
Great job explaining everything as always. Please consider some unit testing that includes Pinia as well. Waiting for part 2!
Thank you 🙏🏻
Will definitely get back to it and add a more thorough example/video!
Thank you for this!
Congrats!!
Thanks a lot 🙏🏻
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
I agree!
Sure I will!
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.
Please make a video about the comprehensive testing of e2e.
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?
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 😊
@@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
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 🤓
Hah, good idea for next time! Should've done taht 😋
Any advice on how to run it showing the browser?
@AllexSise sure! Just set headless: false in the playwright browser launch options
@@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
}
}
})
I used composables to separate my logic from ui, can you please show case of fetching data inside composable with custom fetch function 😵💫😵💫
You mean as in czcams.com/video/jXH8Tr-exhI/video.html 👀
Yes exactly i meant if you can show how to test such like thing that in the video 😃😃
Thanks for the tutorial! Would love to see a walkthrough on implementing pinia vs useState for global state management
Briefly covered it in czcams.com/video/mv0WcBABcIk/video.html
Anything besides that you are interested in? 😋
Showing us your way on how to set /api endpoints would be great as well as Pinia store! Tnx, Milos
Will come ✅
Congratulations on completing your thesis! Will it be publicly available? I'm very interested in reading it :)
Thank you so much! Yes, it will be in the future! Will give you a ping.
You did it😘
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!
OOoo yea! This is the content I want
Glad to hear Cody 🎉
For me mocking the VueRouter and testing with useRoute was difficult. Maybe you can do some content about that. Loved this video, very informative❤
Noted 👍🏻
Glad you enjoy them ☺️
Would be great to see testing with Pinia integration!
Alex, I am getting now to tests, would there be any difference in how to use these tools for the server apis?
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?
Not yet! Server components will be covered in the future though and „client only“ components might be an own video too 🙏🏻
You recommend vitest over jest? can you clarify why? I started my tests few days ago and i couldn't find much about it.
I'm having trouble implementing this in the nuxt layers, does it happen to anyone else?
I use an external API in client side calls. Would be great to see how these can be mocked in e2e tests with playwright.
Ideally, E2E shouldn't have anything mocked but a demo env. If the external API doesn't provide that then you *could* consider replacing it with your own response via `page.route` or mock things via nitro and replace the API URL via runtime config.
❤❤❤
Hi,
we can set a default the environment on vitest.config and then when needed we can overide it directly on the file, right?
Yes, absolutely 🙌
I'm a sucker for the thumbnails 😂
Haha, thank you 🙊
Glad you enjoy them!
is there a way we can skip mock auto imports for nuxt core composables, or it's a must ?
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
@@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
that *should* work out of the box when following the guide (setting the right vitest environment is important here!)
And what about Nuxt4? Is there any change regarding tests?
I tried to follow your steps using an installation with 'compatibilityVersion:4' and always get an error "Cannot find package "#imports" from runtime-utils"
Just took a look and had no issues running the (component) tests with compatibility version ☺️
It should also work as before with Nuxt 4.
Can you provide a reproduction?
I'm a dumb... trying to run 'test' instead of 'vitest'... sorry bothering you.
Love to learn from you and all Nuxt team. I'm big fan of you guys. 🍻
Do you have an example of Nuxt configuration with MSWjs Mock (Service Worker) ??
Nope, didn't use MSW with Nuxt yet. But just put it on my list 👍🏻
@@TheAlexLichter Please how do I put it on your list? That tool is very useful, and with Nuxt even more so.
Sorry, I meant that I just put it on my list of topics 😁
So you kinda did that already 😛
@@TheAlexLichter Wow, great. Thanks in advance !!
Can you make video about nuxt 3 + prisma and how to setup on production?
Might use it in a stream soon!
@@TheAlexLichter 🔥🔥🔥
Glückwunsch zur Thesis - Bachelor oder Master?
Danke! Weder noch, Diplom 👀
Congrats with the Thesis, when will you share your conclusions😋
Thank youu 🙏 The thesis will be submitted to an academic conference. After that I will 🙌
Can you do a server api routes test please 🙂
On the list ✅
Any specifics with regards to server api routes testing you want to know?