Next.js with React Testing Library, Jest, TypeScript

[@johnbeckham606]

Finally a KZbinr that doesn't constantly do html crash course videos... keep it up with medium/advanced topics! Love it!🎉

[@ScriptRaccoon]

Finally? There are tons of KZbinrs who cover medium or advanced topics in web development.

[@johnbeckham606]

@@ScriptRaccoonoh, can you name some of them? would love to check them out :) thanks 🙌

[@lord-of-the-shinobi-world]

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

[@johnbeckham606]

@@lord-of-the-shinobi-world I'm not a beginner fyi. I was just complaining about KZbinrs 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 😁🙌

[@lord-of-the-shinobi-world]

@@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

[@DanielMolnar_Tuzla]

Just something I needed these days. I have already middle size app written with Next.js 13 but with 0% tests 😁 Thank you Dave

[@MichaelShingo]

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.

[@jayfallon]

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!

[@nishant810125]

Hey Dave! You've are a saviour/ultimate mentor for those who are diving deep into Next.js. Appreciate your progressive content. Thank you.

[@FreeDeveloper]

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

[@DaveGrayTeachesCode]

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.

[@rubendacostaesilva8442]

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

[@Ecki107]

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

[@vixy-dev]

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

[@berserks03]

"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."

[@farazk9729]

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 ;-)

[@alirezagarshasbi6557]

the configuration really did help as its setup is not straight forward thank you Dave🔥

[@emobodigo]

Thank you dave, i hope you will continue this testing video as series, it will help so much❤

[@ron-almog]

Wise words at the last minute: strive for progress over perfection!

[@noormuhammad888]

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?

[@danieljing9319]

This is what we want !!!! Dave you are my hero! You always provide useful and advanced stuff !!! 👍👍

[@romero-r]

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!

[@seanfang398]

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

[@HHB0206]

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.

[@ryanwoods3333]

Thank you! I really hope you produce more unit-testing videos with React!

[@benallan5078]

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!

[@tomasgilamoedo8301]

Great tutorial Dave! highly appreciated

[@justAbeautifulSoul409]

Thanks for this awesome video i was struggling to understand testing with nextjs ❤

[@raymondmichael4987]

Yes please, I need to dive into more testing now 😊

[@mortezarostami3287]

Thanks, for your hard work, it helps a lot👍👍

[@yonnierenton6177]

Super Love it thankyou! I used Chai with Hardhat. Yeeew lol...

[@mortezarostami3287]

Waiting for your next react testing tutotrial. Thanks.

[@farahrayis5928]

Looking forward to more videos on testing, thanks Dave.

[@waleedsharif618]

There are hundreds testing videos for Reactjs in youtube but i think this is literally first Nextjs testing video ? Please add more

[@o12345684]

That rolling back for @testing-library/jest-dom@5.16.5 saved me hours of searching. Thanks a lot

[@CTILET]

Dave 200k subs today!

[@watchandenjoy1043]

AA Dave I am going to watch you while next series if I can

[@Stefoux]

Thank you so much for this helpful video ! 😊❤

[@radixp0int]

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.

[@artsycoder533]

This worked for me! Thank you!

[@berserks03]

"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."

[@omidoyinayodeji9338]

Weldone Sir. I would like the videos for react. Thank you Sir.

[@iamsomraj]

A video for react will be very helpful.

[@27sosite73]

damn next.js with this versions and all that libraries struggled a lot thank you mate

[@kikaccc93]

It would be nice to see some unit testing in react native using react native library and jest.Also love your explanations.

[@MicroUrb]

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?

[@DaveGrayTeachesCode]

Keep going in this series and I change it. Really doesn't matter as both work but was unnecessary and created multiple questions :)

[@htmlfivedev]

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 ...

[@dlevz]

How comes you are using extend-expect when it was removed in @testing-library/jest-dom v6.0?

[@gopinathmano7910]

yes sir we need react testing video

[@DissectTheDocs]

Great! Waiting for next video.

[@imkir4n]

Ozm Dave 🔥👍🏼

[@TravinskiyVladislav]

Awesome stuff man

[@dazecm]

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.

[@moveonvillain1080]

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.

[@DaveGrayTeachesCode]

I don't have a specific resource for this, but good question. It might make a good topic of discussion with ChatGPT or Claude.

[@okbaalla8451]

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!

[@lucaspeixotodev]

The icon theme is vscode-icons

[@yourcasualdeveloper]

Yet another great video.

[@Nanashi-rq7lk]

Nice tutorial,Thanks

[@nan-simon]

You are the best!!! Thank you! 😍😍😍

[@sadeshure5241]

Ever thought of adding React native (mobile) tuts to your channel Dave?

[@focusme-tv3650]

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

[@DaveGrayTeachesCode]

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

[@focusme-tv3650]

@@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 😄

[@rubendacostaesilva8442]

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.

[@ankursharma4304]

is that the issue in next js that you are talking about is fidex in next 14?

[@ricardorien]

Works fine with Next 14.0.1. just nuke yarn-error, yarn.lock and node-modules/ and install everything again before run 'yarn jest'.

[@jazzdestructor]

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?

[@SajjjadGhasemi]

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?

[@hamza-alrashed]

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

[@fabianpetersen2452]

How does this work with nextjs 15 and the latest versions of react etc?

[@viniciusmassari5503]

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

[@tsjclips3815]

Please make a video on react testing using the same.

[@LuisFernando-il6tu]

Great content, please make examples but using JavaScript

[@darawan_omar]

Mr Dave Can You Give The Effect Filter Of Your OBS

[@bewildstudio]

Please, please... make a video about How to test React) you are a great teacher... do you work offline as a teacher?)

[@DaveGrayTeachesCode]

Yes, I do teach university courses.

[@skarbazalam4284]

@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.

[@waleedsharif618]

Im using yarn, are those commands same for it, like adding dev dependency ?

[@DaveGrayTeachesCode]

I should do a tutorial on yarn. You can learn more about it here: yarnpkg.com/getting-started/usage

[@oussemabouyahia474]

please Dave a video tuto for testing react with typescript

[@DaveGrayTeachesCode]

I do cover React testing library in this playlist. 😃

[@AirOfFreshBlue]

dear dave, why in nextjs 13.4 app directory we have several errors for testing aplication?

[@gargantooga]

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

[@DaveGrayTeachesCode]

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.

[@chiragchhajed8353]

Though jest is good and has been around for a time, what is your opinion on something like vitest

[@DaveGrayTeachesCode]

Vitest is also good. Getting several requests for a React + Vite + Vitest tutorial, too.

[@MDKhan-ww5tp]

Hey, can you please make a video on socket io setting up in NextJS 13 App Directory it would be great

[@noNullMoments]

codium tutorials please. thats a great tool n ure a great teacher. win || win

[@oscarjohne]

Hello, before I use this, anyone knows if the issue was fized in Nextjs 14?

[@kikaccc93]

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

[@AshishKumar-du2wk]

Hey Dave can you teach us auth0 for next js 13 ?

[@DaveGrayTeachesCode]

I could, but I prefer Kinde Auth. I think it is easier to implement, and my video for it is here: kzbin.info/www/bejne/jaWrgnqigKyIqLc

[@sushieatingcobra]

thanks

[@gorkemka4061]

thank you!

[@Sidgd1987]

Why do we have jest.setup.js?

[@waleedsharif618]

I wonder why Nextjs does not come with testing like create react app comes… it would help a lot

[@DaveGrayTeachesCode]

Maybe someday!

[@mmtt1129]

I encountered the error " ReferenceError: Can't find variable: document at render ....". I already set testEnvironment: "jest-environment-jsdom". Anybody can help me ? Thanks

[@cascadingstylesheets1890]

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

[@doniaelfouly4142]

thanks

[@nanonkay5669]

Bruh half the video was just setup and configurations. This is why no one likes to do testing 😂

[@bhasker8789]

Sir please make videos django course from beginniner to advance.

[@dios8256]

Yikes a lot of work around configuration to get this to work with nextjs!!!

[@khamzateedira9021]

Can you do it more testing with react❤❤❤

[@chetanpl]

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"

[@michalnowak2181]

thx

[@soumadip_banerjee]

❤

[@michaelscofield2469]

Omg ❤

[@jonnathanmoreno5538]

Way tooo much set up lol

[@h-zarne]

Yo! Donald Trump

[@melycasola]

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",

[@JosephGoebbelcoque]

Replace jest.setup.js with the line "import '@testing-library/jest-dom'" because extend-expect is not there anymore

[@JayFFresh]

not gonna lie, all the switching from versions makes everything so uncertain

[@DaveGrayTeachesCode]

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.

[@JayFFresh]

@@DaveGrayTeachesCode 🙏 thank you for considering this bump in the road

[@malakggh]

npm i -D @testing-library/jest-dom@5.16.5 @testing-library/react @testing-library/user-event jest jest-environment-jsdom ts-jest

[@ricardorien]

Works fine with Next 14.0.1. Thanks. Just nuke node-modules, and yarn lock before run test and install wverything again.

[@27sosite73]

npm i -D @testing-library/jest-dom @testing-library/react @testing-library/user-event jest jest-environment-jsdom ts-jest you are welcome