Next.js with React Testing Library, Jest, TypeScript
Vložit
- čas přidán 27. 07. 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn how to write tests in Next.js with React Testing Library, Jest, and TypeScript. This tutorial takes you through the setup for testing in Next.js 13 with App Router and TypeScript step-by-step. Write your first tests in Next.js!
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
GitHub: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 Source Code: github.com/gitdagray/next-tes...
📺 "Testing Your Code" playlist: • Testing Your Code
Next.js Testing Introduction with React Testing Library, Jest, TypeScript
(00:00) Intro
(00:11) Welcome
(00:35) Lesson Goals
(01:06) Create a Next.js Project
(02:50) Add dependencies
(04:11) Current issue with Next.js & Jest
(06:17) Add scripts
(06:49) Jest config
(10:04) Jest setup
(10:33) ESLint
(12:17) Writing Your First Component Test & AAA Pattern
(19:20) Multiple Tests for the Same Component
(23:49) For More Information
📚 Tutorial References:
🔗 Next.js Official Site: nextjs.org/
🔗 React Testing Library: testing-library.com/docs/reac...
🔗 Jest: jestjs.io/
🔗 TypeScript: www.typescriptlang.org/
Was this tutorial about getting started with Jest, React Testing Library and TypeScript in Next.js helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #react #testing
Finally a CZcamsr that doesn't constantly do html crash course videos... keep it up with medium/advanced topics! Love it!🎉
Finally? There are tons of CZcamsrs 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 CZcamsrs 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
Hey Dave! You've are a saviour/ultimate mentor for those who are diving deep into Next.js. Appreciate your progressive content. Thank you.
Thank you dave, i hope you will continue this testing video as series, it will help so much❤
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 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.
the configuration really did help as its setup is not straight forward
thank you Dave🔥
This is what we want !!!! Dave you are my hero! You always provide useful and advanced stuff !!! 👍👍
Thank you! I really hope you produce more unit-testing videos with React!
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
Thanks for this awesome video
i was struggling to understand testing with nextjs ❤
Looking forward to more videos on testing, thanks Dave.
Thank you so much for this helpful video ! 😊❤
Great tutorial Dave! highly appreciated
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
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?
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!
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!
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!
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.
It would be nice to see some unit testing in react native using react native library and jest.Also love your explanations.
Great! Waiting for next video.
Nice tutorial,Thanks
Awesome stuff man
damn next.js with this versions and all that libraries
struggled a lot
thank you mate
AA Dave I am going to watch you while next series if I can
You are the best!!! Thank you! 😍😍😍
Super Love it thankyou! I used Chai with Hardhat. Yeeew lol...
Weldone Sir.
I would like the videos for react. Thank you Sir.
Yet another great video.
Wise words at the last minute: strive for progress over perfection!
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
A video for react will be very helpful.
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
Ozm Dave 🔥👍🏼
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.
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
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!
The icon theme is vscode-icons
thank you!
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?
thanks
yes sir we need react testing video
How comes you are using extend-expect when it was removed in @testing-library/jest-dom v6.0?
That rolling back for @testing-library/jest-dom@5.16.5 saved me hours of searching. Thanks a lot
Ever thought of adding React native (mobile) tuts to your channel Dave?
Hey, can you please make a video on socket io setting up in NextJS 13 App Directory it would be great
Hello, before I use this, anyone knows if the issue was fized in Nextjs 14?
Works fine with Next 14.0.1. just nuke yarn-error, yarn.lock and node-modules/ and install everything again before run 'yarn jest'.
Mr Dave Can You Give The Effect Filter Of Your OBS
dear dave, why in nextjs 13.4 app directory we have several errors for testing aplication?
Please make a video on react testing using the same.
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 ...
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
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 :)
thx
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.
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
please Dave a video tuto for testing react with typescript
I do cover React testing library in this playlist. 😃
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 encountered the error " ReferenceError: Can't find variable: document
at render ....". I already set testEnvironment: "jest-environment-jsdom". Anybody can help me ? Thanks
codium tutorials please. thats a great tool n ure a great teacher. win || win
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.
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.
Why do we have jest.setup.js?
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: czcams.com/video/WtHQGlKGUrU/video.html
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 wonder why Nextjs does not come with testing like create react app comes… it would help a lot
Maybe someday!
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!
Sir please make videos django course from beginniner to advance.
Can you do it more testing with react❤❤❤
❤
Omg ❤
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"
Bruh half the video was just setup and configurations. This is why no one likes to do testing 😂
Yikes a lot of work around configuration to get this to work with nextjs!!!
Way tooo much set up lol
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
__tests__/productImages.test.tsx
● Test suite failed to run
Cannot find module '@testing-library/jest-dom/extend-except' from 'jest.setup.js'
please help
Did you install the dependency? All of the dependencies are listed in the package.json file.
thank you for reply yes. but i am facing cannot find module for nested components. the components which are individual they are passing tests.
SyntaxError: Cannot use import statement outside a module showing this error please help
It is extend-expect not extend-except
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
thanks