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

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

👇 Follow Me On Social Media:

(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

📚 Tutorial References:

#nextjs #app #testing

[diegopalacios]

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!

[froggerabc]

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!

[ryanwoods]

brilliant! very happy to see more unit testing content.

[farahrayis]

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

[codernerd]

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

[irinsajan]

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.

[yuliasereda]

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

[kamal]

Got this when needed ! 😇
Thank you Dave Sir !

[fmdfdlw]

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

[DanielMolnar_Tuzla]

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

[tonskreee]

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

[jco]

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.

[eshw]

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

[RichReflectionz]

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

[ghostnote]

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?

[kevin-ruoe]

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

[rolf-s]

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

[emibademi]

How to test a server action after form submission ?

[qitpess]

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

[patrickjreid]

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.