@@TheAlexLichter Hi! I also really need info on api testing. Would greatly appreciate. P.S: would be also cool if you could show how to test middleware-protected apis, like with auth middleware, etc
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.
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
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.
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.
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
Hey Alex, thank you for the hard work you put into making this high quality content on real challenges with Nuxt apps. I recently watched your video on organizing composable code, and while I do like the concept of inline composables, I'm not sure how to go about integrating testing with that pattern, as I would ideally like to test components and the logic in the composables separately, but I do think inline composables are often much cleaner. Do you have any advice to offer on that? I also agree with the other commenter that a video covering the different levels of testing (unit, component, E2E) would be very beneficial.
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.
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!
+1 For a guide on API testing. The docs are sparse and it's kinda difficult to set up API testing, esp. with endpoints having auth. Bonus ideas would be demonstrating a test that uses/mocks Oauth2. Thank you for your helpful videos!
The lack of documentation(back in the days) and massive errors in test with the basic setup (especially with vuetify and ssr) were the one point why we moved straight to vue for newer projects, since auto tests were important to us. Maybe its time to give nuxt a new chance with version 4.0
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 🤓
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?
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?
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.
@@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
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!
@@TheAlexLichter Hi!
I also really need info on api testing. Would greatly appreciate.
P.S: would be also cool if you could show how to test middleware-protected apis, like with auth middleware, etc
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.
Testing some forms in combination with some API calls would also be great!!!
I absolutely love this kind of videos! Please make more content for tests
Coming! 🙌🏻
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!
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.
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 🙏🏻
Your killing it with these videos Alex. Keep them coming 👍🏻
Thank youu! Will do 🙏🏻
Please make a video about the comprehensive testing of e2e.
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!
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
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 th-cam.com/video/jXH8Tr-exhI/w-d-xo.html 👀
Yes exactly i meant if you can show how to test such like thing that in 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!
Hey Alex, thank you for the hard work you put into making this high quality content on real challenges with Nuxt apps. I recently watched your video on organizing composable code, and while I do like the concept of inline composables, I'm not sure how to go about integrating testing with that pattern, as I would ideally like to test components and the logic in the composables separately, but I do think inline composables are often much cleaner. Do you have any advice to offer on that? I also agree with the other commenter that a video covering the different levels of testing (unit, component, E2E) would be very beneficial.
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.
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!
+1 For a guide on API testing. The docs are sparse and it's kinda difficult to set up API testing, esp. with endpoints having auth.
Bonus ideas would be demonstrating a test that uses/mocks Oauth2. Thank you for your helpful videos!
You recommend vitest over jest? can you clarify why? I started my tests few days ago and i couldn't find much about it.
Alex, I am getting now to tests, would there be any difference in how to use these tools for the server apis?
Another great video. Thanks as always
My pleasure!
The lack of documentation(back in the days) and massive errors in test with the basic setup (especially with vuetify and ssr) were the one point why we moved straight to vue for newer projects, since auto tests were important to us. Maybe its time to give nuxt a new chance with version 4.0
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
}
}
})
Hey Alex, do you have a video/resources that explains the use case of different types of testing like Unit testing, component testing and E2E testing?
Not at the moment! Would you be interested in that?
100% 🙌🙌🙌
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. 🍻
🙏🏻🙏🏻🙏🏻
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 🙏🏻
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 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.
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.
Showing us your way on how to set /api endpoints would be great as well as Pinia store! Tnx, Milos
Will come ✅
Congrats!!
Thanks a lot 🙏🏻
Thanks for the tutorial! Would love to see a walkthrough on implementing pinia vs useState for global state management
Briefly covered it in th-cam.com/video/mv0WcBABcIk/w-d-xo.html
Anything besides that you are interested in? 😋
I'm having trouble implementing this in the nuxt layers, does it happen to anyone else?
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!)
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 !!
Thank you for this!
Would be great to see testing with Pinia integration!
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 ☺️
I'm a sucker for the thumbnails 😂
Haha, thank you 🙊
Glad you enjoy them!
Can you make video about nuxt 3 + prisma and how to setup on production?
Might use it in a stream soon!
@@TheAlexLichter 🔥🔥🔥
OOoo yea! This is the content I want
Glad to hear Cody 🎉
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?
❤❤❤
Glückwunsch zur Thesis - Bachelor oder Master?
Danke! Weder noch, Diplom 👀
You did it😘
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 🙌