Next.js with React Testing Library, Jest, TypeScript

⭐ Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

(00:00) Intro
(00:11) Welcome
(00:35) Lesson Goals
(02:50) Add dependencies
(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:

#nextjs #react #testing

[johnbeckham]

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

[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

[nishant]

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

[farazk]

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

[alirezagarshasbi]

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❤

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

[danieljing]

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

[ryanwoods]

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

[justAbeautifulSoul]

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

[farahrayis]

Looking forward to more videos on testing, thanks Dave.

[tomasgilamoedo]

Great tutorial Dave! highly appreciated

[Stefoux]

Thank you so much for this helpful video ! 😊❤

[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!

[raymondmichael]

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

[seanfang]

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

[FreeDeveloper]

17:06 Or instead of downgrade the dependency you can:
install this: npm i -D @types/jest

[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!

[noormuhammad]

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?

[HHB]

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.