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 TH-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
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
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?
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 ...
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.
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.
@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.
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
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"
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 ;-)
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
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 😄
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 encountered the error " ReferenceError: Can't find variable: document at render ....". I already set testEnvironment: "jest-environment-jsdom". Anybody can help me ? Thanks
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
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!
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",
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?
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
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
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.
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
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!
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.
Bruh half the video was just setup and configurations. This is why no one likes to do testing 😂
Finally a TH-camr that doesn't constantly do html crash course videos... keep it up with medium/advanced topics! Love it!🎉
Finally? There are tons of TH-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 TH-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
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
Just something I needed these days. I have already middle size app written with Next.js 13 but with 0% tests 😁 Thank you Dave
Hey Dave! You've are a saviour/ultimate mentor for those who are diving deep into Next.js. Appreciate your progressive content. Thank you.
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?
Works fine with Next 14.0.1. just nuke yarn-error, yarn.lock and node-modules/ and install everything again before run 'yarn jest'.
Yikes a lot of work around configuration to get this to work with nextjs!!!
Way tooo much set up lol
How comes you are using extend-expect when it was removed in @testing-library/jest-dom v6.0?
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 ...
Weldone Sir.
I would like the videos for react. Thank you Sir.
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.
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 :)
the configuration really did help as its setup is not straight forward
thank you Dave🔥
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.
@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.
❤
Thank you so much for this helpful video ! 😊❤
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
npm i -D @testing-library/jest-dom @testing-library/react @testing-library/user-event jest jest-environment-jsdom ts-jest
you are welcome
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"
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 ;-)
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!
AA Dave I am going to watch you while next series if I can
Thanks for this awesome video
i was struggling to understand testing with nextjs ❤
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.
Great content, please make examples but using JavaScript
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
Dave 200k subs today!
Hello, before I use this, anyone knows if the issue was fized in Nextjs 14?
Waiting for your next react testing tutotrial. Thanks.
A video for react will be very helpful.
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.
Thanks, for your hard work, it helps a lot👍👍
Omg ❤
is that the issue in next js that you are talking about is fidex in next 14?
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.
Ozm Dave 🔥👍🏼
I encountered the error " ReferenceError: Can't find variable: document
at render ....". I already set testEnvironment: "jest-environment-jsdom". Anybody can help me ? Thanks
Thank you dave, i hope you will continue this testing video as series, it will help so much❤
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?
Please make a video on react testing using the same.
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
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!
Hey, can you please make a video on socket io setting up in NextJS 13 App Directory it would be great
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",
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?
dear dave, why in nextjs 13.4 app directory we have several errors for testing aplication?
Super Love it thankyou! I used Chai with Hardhat. Yeeew lol...
Yes please, I need to dive into more testing now 😊
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
Yo! Donald Trump
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
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!
Mr Dave Can You Give The Effect Filter Of Your OBS
There are hundreds testing videos for Reactjs in youtube but i think this is literally first Nextjs testing video ? Please add more
Ever thought of adding React native (mobile) tuts to your channel Dave?
Sir please make videos django course from beginniner to advance.
damn next.js with this versions and all that libraries
struggled a lot
thank you mate
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.
please Dave a video tuto for testing react with typescript
I do cover React testing library in this playlist. 😃
codium tutorials please. thats a great tool n ure a great teacher. win || win
thanks
thanks
Thank you! I really hope you produce more unit-testing videos with React!
It would be nice to see some unit testing in react native using react native library and jest.Also love your explanations.
This is what we want !!!! Dave you are my hero! You always provide useful and advanced stuff !!! 👍👍
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
Can you do it more testing with react❤❤❤
Wise words at the last minute: strive for progress over perfection!
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.
Why do we have jest.setup.js?
Great tutorial Dave! highly appreciated
Nice tutorial,Thanks
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
You are the best!!! Thank you! 😍😍😍
I wonder why Nextjs does not come with testing like create react app comes… it would help a lot
Maybe someday!
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.
Looking forward to more videos on testing, thanks Dave.
yes sir we need react testing video
Great! Waiting for next video.
Awesome stuff man
Yet another great video.
thank you!
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: th-cam.com/video/WtHQGlKGUrU/w-d-xo.html
Replace jest.setup.js with the line "import '@testing-library/jest-dom'" because extend-expect is not there anymore
thx
That rolling back for @testing-library/jest-dom@5.16.5 saved me hours of searching. Thanks a lot
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