That ain't the problem. The problems are: - Do those videos have clear timestamps? - Can you code by yourself after you are done watching the video? - Can you compete with the low/middle/high/ultra high level developers like you? Or will you fail bad? - How long will it take for you to move onto the next level of developing? If the answers for these questions are "no", or "i don't know", then you'd better stop watching videos, and start doing first
@@lord-of-the-shinobi-world I'm not a beginner fyi. I was just complaining about UA-camrs that continue to create HTML5 courses and even sell them. It's all already on the Internet. I want to see new technologies and see how others use them in different scenarios. What you wrote are facts anyway, good point, but it ain't related to what I wrote. I hope that I made it now clear what I meant 😁🙌
@@johnbeckham606 Well then, think of those things as "teaching material". If you just repeat the same thing, over and over again, your students will leave you. I am in middle level, so i understand what you're saying
Three hours of head banging the desk trying to get Jest up and running with NextJS and failing, or twenty five minutes following Dave's instructions. Thank you!
thank you for this, got jest into my existing audio player project. It's crazy that getting one of most popular testing libraries to work with one of most popular frameworks takes so many workarounds.
Hi Dave, I am doing some of your other videos, and a little something I wanted to thank you for: Thanks for explaining the little things that you do and not just doing them (e.g. Ctrl + B to hide the file tree, etc etc). These tidbits make the learning journey more fun, clearer, and basically make me feel more involved in what's happening, which makes me want to keep at it, so muchas gracias ;-)
17:06 Or instead of downgrade the dependency you can: install this: npm i -D @types/jest import '@testing-library/jest-dom'; in the testing files import '@testing-library/jest-dom' in the jest.setup.js file
For me a similar approach worked: 1. npm i -D @types/jest 2. in jest.setup.ts change import "@testing-library/jest-dom/extend-expect"; to import "@testing-library/jest-dom/extend-expect"; And everything works fine. No additional imports needed and way cleaner than relying on an old version
If using the latest versions of NextJS, Jest and Testing Library running npm i -D @types/jest and adding import '@testing-library/jest-dom'; to the test file worked
"Good to know:extend-expect was removed in v6.0, so if you are using @testing-library/jest-dom before version 6, you will need to import @testing-library/jest-dom/extend-expect instead."
I've been fighting jest, typescript, webpack, nextjs, and vite the whole day trying to set up a test runner for a nextjs project created with create-t3-app. The pain in the js ecosystem is real. I hope I can just use bun for everything soon. Anyways, this video got me the closest to a perfect setup just a tiny bit of googling aside from the instructions in this video got jest+RTL working! Thank you!
Oh, thank you so much! Really saved my day❤ I don't know about others, but for me, working with typescript sometimes can be very head-scratching and I myself fell into quite a few traps😂 And contents like setting configs or some other little tricks can be very very helpful, just like what this video demonstrates. Thank you again and hopefully we could watch more great video in this channel
Thank you so much Dave, I tried to follow the next official document to install jest exactly, but I don't know why, there was a red underline at the 'expect' and 'describe'. I was so annoyed. But finally you gave me the solution. It was really helpful. Thanks.
I would love to see more videos on Next 13 testing, client, and server components. Also, I am assuming that after this testing series, you are going to create a project on Next 13 with testing included?
For 17:00, it helped to install another dev dependency instead of downgrading: npm i --save-dev @types/jest. I'm on -> "@testing-library/jest-dom": "^6.4.2" then adding the line import '@testing-library/jest-dom' at the top as well.
"Good to know:extend-expect was removed in v6.0, so if you are using @testing-library/jest-dom before version 6, you will need to import @testing-library/jest-dom/extend-expect instead."
Dave thanks for this video. Is there any resource that tells how to effectively test the frontend. Like what to test and what not to test and goes over various test strategies.
Thanks for this Dave. The Using App Router docs at Vercel still do not have specific Testing documentation in the Optimizing section as of Next version 14.0.3 and I was struggling getting Jest and React Testing Library configured properly.
I was really glad to find this video but when I went through it, I realized things are just too problematic to even set up Jest with the Next 13 right now ... conflict after conflict ... will get back when the issues are resolved ...
Hello! This is a very nice video for beginners learning about the basics of testing. I came here with a bit more experience and I can't even get one test passing since next 13. The useRouter hook just keeps throwing the same error: " invariant expected app router to be mounted". If you don't have an idea yet about your next video, showing how to setup the tests when using "next/navigation" package should be a good one, not "next/router" (this is important) 👌Thanks for the content
Yes, that's a more advanced issue that I was looking into as well. Currently, it seems the solution is to mock next/navigation. A current discussion on this: github.com/vercel/next.js/discussions/48937
@@DaveGrayTeachesCode Thanks for your response! They seem to have found a pretty cute workaround! I also managed to fix it temporarily by mocking "next/navigation" and then useRouter.mockReturnValue({ push: jest.fn(), replace: jest.fn() });. This way i can see when push/replace are called and with what argument. But I'm defo going to try the stuff in the link you shared 😄
Hi Dave .. Thank you so much about everything .. I learned from you alot of things not just programming .. I learned from you english language also Your accent very clear .. I have one request please .. Can you start with SQL I need this for my work and I need to understand it using your explanation Thanks Hamza
HI Dave, thanks a lot for the jest video as you asked Could you Please do react vite vitest video on a big react project?? like the blog project you had in your redux video?? want to see how it works compared to jest and learn more on how it does crud on frontend?
Finally, we need more of this Dave, keep it up, I want to question you about two things: The vscode extension you're using for the icons When selecting the pages and not the app features in next project inititializing, will it work with same new SSR and SSG functionalities or we will use the getStaticProps, getServerSideProps keywords, thanks!
Hey Dave ! any thoughts about a testing course ? Like, what is mock, spy, stub, e2e and unit testing...Maybe a little teoric and practice introduction to these subjects, as a beginner I feel that will be a great adittion to my studies, recently I came across many videos about that. Thank you for your teachings ! Helped me a lot to learn Nextjs
@DaveGray Module '"@testing-library/react"' has no exported member 'screen'.ts(2305) import screen, where mine , @testing-library/react@16.0.0, even thiugh i am gettign above error, is their any alternative solution to resolve this issue.
I need some help I have a big app made with expo react native and typescript and for testing typescript, it says it needs ts-jest but I've tried everything and I can't configure it for testing typescript can someone help
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\ ode_modules\string-width\index.js from C:\ ode_modules\cliui\build\index.cjs not supported. Instead change the require of index.js in C:\ ode_modules\cliui\build\index.cjs to a dynamic import() which is available in all CommonJS modules. at Object. (C:\ ode_modules\cliui\build\index.cjs:291:21) when execute test command
I encountered the error " ReferenceError: Can't find variable: document at render ....". I already set testEnvironment: "jest-environment-jsdom". Anybody can help me ? Thanks
Lool, I'm applying this tutorial for a nextjs project I started this week, and a dependency has already changed. eslint-config-next, from my 13.4.16 to Dave's 13.4.17. Not much, but you know, better watch this tutorial in August, or it will become outdated
for me Screen not available. I have tried everything. such as uninstall node software and reinstall the latest one but no luck. After I tried to create with Next@14 package as per your video suggest. however, no luck. Now I am stuck. your video does not helpful. Import {screen} from "@testing-library/react"
david THANK YOU!! I had problem in fil 'jest.setup.js' import '@testing-library/jest-dom/extend-exptect'. we find two soluction: delete only '/extend-expect' or changed to version 5.16.5 in "@testing-library/jest-dom": "^6.4.2",
I suggest trying to use the latest version of everything. If it doesn't work, then roll back one of the versions that I did. By the following video in the series, I think I was using the latest Next.js with no issues.
Finally a UA-camr that doesn't constantly do html crash course videos... keep it up with medium/advanced topics! Love it!🎉
Finally? There are tons of UA-camrs who cover medium or advanced topics in web development.
@@ScriptRaccoonoh, can you name some of them? would love to check them out :) thanks 🙌
That ain't the problem. The problems are:
- Do those videos have clear timestamps?
- Can you code by yourself after you are done watching the video?
- Can you compete with the low/middle/high/ultra high level developers like you? Or will you fail bad?
- How long will it take for you to move onto the next level of developing?
If the answers for these questions are "no", or "i don't know", then you'd better stop watching videos, and start doing first
@@lord-of-the-shinobi-world I'm not a beginner fyi. I was just complaining about UA-camrs that continue to create HTML5 courses and even sell them. It's all already on the Internet. I want to see new technologies and see how others use them in different scenarios. What you wrote are facts anyway, good point, but it ain't related to what I wrote. I hope that I made it now clear what I meant 😁🙌
@@johnbeckham606
Well then, think of those things as "teaching material".
If you just repeat the same thing, over and over again, your students will leave you.
I am in middle level, so i understand what you're saying
Just something I needed these days. I have already middle size app written with Next.js 13 but with 0% tests 😁 Thank you Dave
Three hours of head banging the desk trying to get Jest up and running with NextJS and failing, or twenty five minutes following Dave's instructions. Thank you!
thank you for this, got jest into my existing audio player project. It's crazy that getting one of most popular testing libraries to work with one of most popular frameworks takes so many workarounds.
Hey Dave! You've are a saviour/ultimate mentor for those who are diving deep into Next.js. Appreciate your progressive content. Thank you.
the configuration really did help as its setup is not straight forward
thank you Dave🔥
Hi Dave,
I am doing some of your other videos, and a little something I wanted to thank you for: Thanks for explaining the little things that you do and not just doing them (e.g. Ctrl + B to hide the file tree, etc etc). These tidbits make the learning journey more fun, clearer, and basically make me feel more involved in what's happening, which makes me want to keep at it, so muchas gracias ;-)
Thank you dave, i hope you will continue this testing video as series, it will help so much❤
17:06 Or instead of downgrade the dependency you can:
install this: npm i -D @types/jest
import '@testing-library/jest-dom'; in the testing files
import '@testing-library/jest-dom' in the jest.setup.js file
You can, but you shouldn't have to. As mentioned, hopefully the issue will be fixed in the near future. The update is just a few days old.
Instead of -> import '@testing-library/jest-dom' in the jest.setup.js file
You can add -> "files": ["jest.setup.js"] in your tsconfig.json file
For me a similar approach worked:
1. npm i -D @types/jest
2. in jest.setup.ts change import "@testing-library/jest-dom/extend-expect"; to import "@testing-library/jest-dom/extend-expect";
And everything works fine. No additional imports needed and way cleaner than relying on an old version
If using the latest versions of NextJS, Jest and Testing Library running npm i -D @types/jest and adding import '@testing-library/jest-dom'; to the test file worked
"Good to know:extend-expect was removed in v6.0, so if you are using @testing-library/jest-dom before version 6, you will need to import @testing-library/jest-dom/extend-expect instead."
Wise words at the last minute: strive for progress over perfection!
This is what we want !!!! Dave you are my hero! You always provide useful and advanced stuff !!! 👍👍
I've been fighting jest, typescript, webpack, nextjs, and vite the whole day trying to set up a test runner for a nextjs project created with create-t3-app. The pain in the js ecosystem is real. I hope I can just use bun for everything soon.
Anyways, this video got me the closest to a perfect setup just a tiny bit of googling aside from the instructions in this video got jest+RTL working! Thank you!
Oh, thank you so much! Really saved my day❤ I don't know about others, but for me, working with typescript sometimes can be very head-scratching and I myself fell into quite a few traps😂 And contents like setting configs or some other little tricks can be very very helpful, just like what this video demonstrates. Thank you again and hopefully we could watch more great video in this channel
Great tutorial Dave! highly appreciated
Thank you! I really hope you produce more unit-testing videos with React!
Yes please, I need to dive into more testing now 😊
Thanks for this awesome video
i was struggling to understand testing with nextjs ❤
Thank you so much Dave, I tried to follow the next official document to install jest exactly, but I don't know why, there was a red underline at the 'expect' and 'describe'. I was so annoyed. But finally you gave me the solution. It was really helpful. Thanks.
Super Love it thankyou! I used Chai with Hardhat. Yeeew lol...
Thank you so much for this helpful video ! 😊❤
Looking forward to more videos on testing, thanks Dave.
Thanks, for your hard work, it helps a lot👍👍
That rolling back for @testing-library/jest-dom@5.16.5 saved me hours of searching. Thanks a lot
I would love to see more videos on Next 13 testing, client, and server components.
Also, I am assuming that after this testing series, you are going to create a project on Next 13 with testing included?
Waiting for your next react testing tutotrial. Thanks.
AA Dave I am going to watch you while next series if I can
Hey Dave! I'd love some react testing videos. Finding resources to effectively explain testing react hooks and redux usages are few and far between!
For 17:00, it helped to install another dev dependency instead of downgrading: npm i --save-dev @types/jest. I'm on -> "@testing-library/jest-dom": "^6.4.2" then adding the line import '@testing-library/jest-dom' at the top as well.
This worked for me! Thank you!
"Good to know:extend-expect was removed in v6.0, so if you are using @testing-library/jest-dom before version 6, you will need to import @testing-library/jest-dom/extend-expect instead."
Weldone Sir.
I would like the videos for react. Thank you Sir.
Dave 200k subs today!
There are hundreds testing videos for Reactjs in youtube but i think this is literally first Nextjs testing video ? Please add more
A video for react will be very helpful.
Great! Waiting for next video.
Ozm Dave 🔥👍🏼
damn next.js with this versions and all that libraries
struggled a lot
thank you mate
I am curious, why is your test extension `tsx` as opposed to just `ts`? Is it because you did not create it as a spec file?
Keep going in this series and I change it. Really doesn't matter as both work but was unnecessary and created multiple questions :)
How comes you are using extend-expect when it was removed in @testing-library/jest-dom v6.0?
You are the best!!! Thank you! 😍😍😍
Nice tutorial,Thanks
Awesome stuff man
Yet another great video.
It would be nice to see some unit testing in react native using react native library and jest.Also love your explanations.
Dave thanks for this video. Is there any resource that tells how to effectively test the frontend. Like what to test and what not to test and goes over various test strategies.
I don't have a specific resource for this, but good question. It might make a good topic of discussion with ChatGPT or Claude.
Thanks for this Dave. The Using App Router docs at Vercel still do not have specific Testing documentation in the Optimizing section as of Next version 14.0.3 and I was struggling getting Jest and React Testing Library configured properly.
yes sir we need react testing video
Works fine with Next 14.0.1. just nuke yarn-error, yarn.lock and node-modules/ and install everything again before run 'yarn jest'.
Great content, please make examples but using JavaScript
is that the issue in next js that you are talking about is fidex in next 14?
I was really glad to find this video but when I went through it, I realized things are just too problematic to even set up Jest with the Next 13 right now ... conflict after conflict ... will get back when the issues are resolved ...
Hello Dave, Thanks for this teaching. I have one question, What is that .swc folder that made in root directory when you used npm test?
Hello! This is a very nice video for beginners learning about the basics of testing. I came here with a bit more experience and I can't even get one test passing since next 13. The useRouter hook just keeps throwing the same error: " invariant expected app router to be mounted". If you don't have an idea yet about your next video, showing how to setup the tests when using "next/navigation" package should be a good one, not "next/router" (this is important) 👌Thanks for the content
Yes, that's a more advanced issue that I was looking into as well. Currently, it seems the solution is to mock next/navigation. A current discussion on this: github.com/vercel/next.js/discussions/48937
@@DaveGrayTeachesCode Thanks for your response! They seem to have found a pretty cute workaround! I also managed to fix it temporarily by mocking "next/navigation" and then useRouter.mockReturnValue({ push: jest.fn(), replace: jest.fn() });. This way i can see when push/replace are called and with what argument. But I'm defo going to try the stuff in the link you shared 😄
The useRouter from next/router is meant to be used with the Pages Router.
For the App Router, you'll have to import from next/navigation.
Hi Dave .. Thank you so much about everything .. I learned from you alot of things not just programming .. I learned from you english language also Your accent very clear .. I have one request please .. Can you start with SQL I need this for my work and I need to understand it using your explanation
Thanks
Hamza
How does this work with nextjs 15 and the latest versions of react etc?
thanks
Please make a video on react testing using the same.
thank you!
HI Dave, thanks a lot for the jest video as you asked Could you Please do react vite vitest video on a big react project?? like the blog project you had in your redux video?? want to see how it works compared to jest and learn more on how it does crud on frontend?
codium tutorials please. thats a great tool n ure a great teacher. win || win
dear dave, why in nextjs 13.4 app directory we have several errors for testing aplication?
Finally, we need more of this Dave, keep it up, I want to question you about two things:
The vscode extension you're using for the icons
When selecting the pages and not the app features in next project inititializing, will it work with same new SSR and SSG functionalities or we will use the getStaticProps, getServerSideProps keywords, thanks!
The icon theme is vscode-icons
Im using yarn, are those commands same for it, like adding dev dependency ?
I should do a tutorial on yarn. You can learn more about it here: yarnpkg.com/getting-started/usage
Hey Dave ! any thoughts about a testing course ? Like, what is mock, spy, stub, e2e and unit testing...Maybe a little teoric and practice introduction to these subjects, as a beginner I feel that will be a great adittion to my studies, recently I came across many videos about that.
Thank you for your teachings ! Helped me a lot to learn Nextjs
Mr Dave Can You Give The Effect Filter Of Your OBS
@DaveGray
Module '"@testing-library/react"' has no exported member 'screen'.ts(2305)
import screen,
where mine , @testing-library/react@16.0.0, even thiugh i am gettign above error, is their any alternative solution to resolve this issue.
install @testing-library/dom
please Dave a video tuto for testing react with typescript
I do cover React testing library in this playlist. 😃
Ever thought of adding React native (mobile) tuts to your channel Dave?
thanks
Please, please... make a video about How to test React) you are a great teacher... do you work offline as a teacher?)
Yes, I do teach university courses.
I need some help I have a big app made with expo react native and typescript and for testing typescript, it says it needs ts-jest but I've tried everything and I can't configure it for testing typescript can someone help
Hey, can you please make a video on socket io setting up in NextJS 13 App Directory it would be great
Though jest is good and has been around for a time, what is your opinion on something like vitest
Vitest is also good. Getting several requests for a React + Vite + Vitest tutorial, too.
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\
ode_modules\string-width\index.js from C:\
ode_modules\cliui\build\index.cjs not supported.
Instead change the require of index.js in C:\
ode_modules\cliui\build\index.cjs to a dynamic import() which is available in all CommonJS modules.
at Object. (C:\
ode_modules\cliui\build\index.cjs:291:21) when execute test command
Hello, before I use this, anyone knows if the issue was fized in Nextjs 14?
I encountered the error " ReferenceError: Can't find variable: document
at render ....". I already set testEnvironment: "jest-environment-jsdom". Anybody can help me ? Thanks
Lool, I'm applying this tutorial for a nextjs project I started this week, and a dependency has already changed. eslint-config-next, from my 13.4.16 to Dave's 13.4.17. Not much, but you know, better watch this tutorial in August, or it will become outdated
I show an issue Next.js & Jest have right now and actually rollback to 13.4.10 to avoid it. All details in the vid.
I wonder why Nextjs does not come with testing like create react app comes… it would help a lot
Maybe someday!
thx
Hey Dave can you teach us auth0 for next js 13 ?
I could, but I prefer Kinde Auth. I think it is easier to implement, and my video for it is here: ua-cam.com/video/WtHQGlKGUrU/v-deo.html
Why do we have jest.setup.js?
for me Screen not available. I have tried everything.
such as uninstall node software and reinstall the latest one but no luck.
After I tried to create with Next@14 package as per your video suggest. however, no luck.
Now I am stuck. your video does not helpful.
Import {screen} from "@testing-library/react"
Sir please make videos django course from beginniner to advance.
Can you do it more testing with react❤❤❤
❤
Omg ❤
Yikes a lot of work around configuration to get this to work with nextjs!!!
Bruh half the video was just setup and configurations. This is why no one likes to do testing 😂
Way tooo much set up lol
Yo! Donald Trump
david THANK YOU!! I had problem in fil 'jest.setup.js' import '@testing-library/jest-dom/extend-exptect'. we find two soluction: delete only '/extend-expect' or changed to version 5.16.5 in "@testing-library/jest-dom": "^6.4.2",
Replace jest.setup.js with the line "import '@testing-library/jest-dom'" because extend-expect is not there anymore
not gonna lie, all the switching from versions makes everything so uncertain
I suggest trying to use the latest version of everything. If it doesn't work, then roll back one of the versions that I did. By the following video in the series, I think I was using the latest Next.js with no issues.
@@DaveGrayTeachesCode 🙏 thank you for considering this bump in the road
npm i -D @testing-library/jest-dom@5.16.5 @testing-library/react @testing-library/user-event jest jest-environment-jsdom ts-jest
Works fine with Next 14.0.1. Thanks. Just nuke node-modules, and yarn lock before run test and install wverything again.
npm i -D @testing-library/jest-dom @testing-library/react @testing-library/user-event jest jest-environment-jsdom ts-jest
you are welcome