Testing a Next.js App with React Testing Library & Jest

Подписаться 319 тыс.

Просмотров 25 тыс.

50% 1

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Testing a Next.js App with React Testing Library & Jest requires writing unit tests and integration tests. We will look at unit testing vs integration testing and how to do both in Next.js with React Testing Library and Jest.
⭐ 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
🔗 Starter Source Code: github.com/gitdagray/next-tes...
🔗 Completed Source Code: github.com/gitdagray/next-tes...
📺 "Testing Your Code" playlist: • Testing Your Code
Testing a Next.js App with React Testing Library & Jest
(00:00) Intro
(00:14) Welcome
(00:39) Recommended Prerequisites
(01:04) Lesson Goals
(01:24) Starter Code
(02:27) Example App Preview
(02:47) Unit vs Integration vs E2E Tests
(04:50) Testing Library Query Types
(06:06) _tests_ folder organization
(06:47) Nav component
(07:14) Header component unit tests
(08:59) TodoItem component unit tests
(14:18) TodoList component unit tests
(17:15) AddTodo component unit tests
(21:12) App Integration Tests
(29:14) Notes about Next.js 13
📚 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 Testing a Next.js app with Jest and React Testing Library helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #app #testing

Опубликовано:

8 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 39

@diegopalacios68 10 месяцев назад

Thanks, Dave! I truly appreciate your method of walking us through each pre-existing file rather than writing them from scratch. It's a direct and effective way to learn. Keep up the fantastic work, your teaching style is incredibly helpful!

@ryanwoods3333 10 месяцев назад

brilliant! very happy to see more unit testing content.

@froggerabc 7 месяцев назад

every so often you come across a vid that hits the nail on the head and gives you exactly what you want. This is one. Thank you!

@codernerd7076 10 месяцев назад

It's like we got more Next.js with Dave this week

@farahrayis5928 10 месяцев назад

Great video, looking forward to the next part of your testing series :) Thanks

@kamal1002 10 месяцев назад

Got this when needed ! 😇 Thank you Dave Sir !

@Santon-Motho 10 месяцев назад

Dave Gray, you absolute legend! 😁

@yuliasereda5671 8 месяцев назад

Thanks, Dave!! You make very profeccional videos as a teacher and as a coder))

@MOJICA7257 10 месяцев назад

Thanks Dave! Cheers 🎉🎉🎉

@user-fm7df4dl7w 8 месяцев назад

explaining is way better than the official docs. Thanks for the video :)

@irinsajan2870 10 месяцев назад

You helped me build my knowledge in React/Next. And I was struggling to start with react testing and here you are to help me through! Thank you for this series. Expecting more on testing. It would be great if you can also help with E-to-E with Cypress like you mentioned in the video.

@mohamedmohi595 10 месяцев назад

Thanx Dave 😊 🙏

@iamprincemuel 10 месяцев назад

Superb 🙌

@DanielMolnar_Tuzla 10 месяцев назад

I would really like to se more tests with mocking API part, maybe router also. It's something I intend to cover these days in my app. Hope to se more materials soon. Stay well

@sushieatingcobra 3 месяца назад

thanks

@eshw23 7 месяцев назад

Thank you save. A tutorial on Cypress testing would be amazing to.

@jco199 7 месяцев назад

Hi Dave, great videos as always. I'm currently going through all of your next.js videos tutorials. I've noticed that In the todo notes app previously in next-js-course/next11 it seems that react hooks and states are only used in the AddTodo component instead of passing on setTodos from the home component. I am not sure what are the effects from this choice. Does jest testing require that the setTodo state being passed down? I am a little confused by the added complexity and why the same approach is not used in both projects. sorry if it is a silly question.

@tonskreee6213 8 месяцев назад

Great Video. Im wondering if you can also demo on how to test Server components?

@rolf-s 9 месяцев назад

E2E testing with cypress in next.js would be cool! 😊

@RichReflectionz 10 месяцев назад

Still need to get into testing, haven't done any since learning how to program as a frontend less than 1 year in, I thought typescript helps keep code safe... but am wrong haha

@michalnowak2181 9 месяцев назад

thx

@qitpess2660 8 месяцев назад

21:58 - "When the parent component has 'use client' then all of its children will be client components" As the docs say, it's not true. The client component can have server components inside

@kevin-ru6oe 5 месяцев назад

21:13 Isn't recommended to have several assertions in the same test? There you could assert the mock to be called and the input to be empty

@patrickjreid 6 месяцев назад

This series of videos have been amazing. I am curious though, Why bother testing in Typescript? It feels like Typescript is its own kind of test and when combining it with jest you are just adding unnecessary complexity.

@abdullahalsiam105 7 месяцев назад

incredible ! by the way what's your vs code icon theme?

@desafiosdev 6 месяцев назад

The icon theme is vscode-icons

@emibademi1 26 дней назад

How to test a server action after form submission ?

@ghostnote9714 6 месяцев назад

Nice video! Quick thought though… Aren’t the integration tests showcased at the end enough to cover all use cases of the app? Therefore, the unit tests don’t provide any value and it’s just a duplication of tests at that point?

@abrahamidowu3837 10 месяцев назад

Thank you for everything you do, Sir. I am determined to become a frontend developer but I am confused about🎉 the pathway to follow. There are countless of tools programmers suggest we learn. Through your videos I am already learning HTML, CSS and JavaScript, and I know there are more. Sir, can you please give me the pathway you believe is right to become a frontend developer?

@DaveGrayTeachesCode 10 месяцев назад

Link at the top of the description for this video to my free Web Dev Roadmap for Beginners.

@davithchhung7577 10 месяцев назад

Hi Dave, Should we use NextJs just for front end developement?

@DaveGrayTeachesCode 10 месяцев назад

You can. If you work through the Next.js course on my channel, you will also see that it offers backend route handlers.

@enubiakjoseph4290 Месяц назад

Thanks dave, but how do i get to ask you questions on your discord, and i really love your videos, but then how do we test a particular function that involves the redux, maybe you can do a video on that using next js, typescript and redux

@DaveGrayTeachesCode Месяц назад

You post questions in the appropriate channel on Discord where I and others can help. It is fairly active. I don't check every day but I do when I can.

@enubiakjoseph4290 Месяц назад

@@DaveGrayTeachesCode okay dave, thank you so much, but one of the questions i'd like to ask is how i can implement testing an application that utilizes redux, this is because my test keeps failing because the function i'm trying to test contains redux state

@TravinskiyVladislav 10 месяцев назад

Like that

@DunckingTest 7 месяцев назад

Can i request a video ? if yes, how do i login to nextauth magic email with playwright

@johndowland4623 4 месяца назад

2006 todo app: js code alone, run the app, oh there's a bug, no user cared, fixed it [total time of development 2 hours] 2024 todo app: typescript, eslint, jest, unit test, integration test, e2e test [total time of development 2 weeks] we're regressing. dear recruiters of my ass, leave these sort of stuff to fang companies and don't waste our balls please