React Testing for Beginners: Start Here!

Ready to master React testing? This tutorial covers the essentials of React Testing Library with Vitest / Jest. Get hands-on and start writing better tests today!
🚀 Want to take your skills to the next level?
- Check out my full course "React Testing Mastery": bit.ly/3IBuILB
- Subscribe for more videos like this: goo.gl/6PYaGF
✋ Stay connected:
- Twitter: / moshhamedani
- Facebook: / programmingwithmosh
- Instagram: / codewithmosh.official
- LinkedIn: / codewithmosh
👉 Related tutorials:
- JavaScript Unit Testing Tutorial: • JavaScript Unit Testin...
- React Tutorial for Beginners: • React Tutorial for Beg...
- TypeScript Tutorial for Beginners: • TypeScript Tutorial fo...
👉 Full courses:
- React Testing Mastery: codewithmosh.com/p/react-test...
- React 18 for Beginners: codewithmosh.com/p/ultimate-r...
- React 18- Intermediate Topics: codewithmosh.com/p/ultimate-r...
- Mastering JavaScript Unit Testing: codewithmosh.com/p/mastering-...
- The Ultimate TypeScript Course: codewithmosh.com/p/the-ultima...
📖 TABLE OF CONTENT
0:00:00 - Introduction
0:01:21 - Prerequisites
0:03:00 - Course Structure
0:04:46 - How to Take this Course
0:06:37 - Setting Up the Development Environment
0:07:36 - Setting Up the Starter Project
0:13:31 - Setting Up Vitest
0:17:19 - Setting Up React Testing Library
0:20:24 - Testing React Components
0:21:15 - What to Test
0:24:31 - Testing Rendering
0:33:12 - Simplifying Test Setup
0:36:16 - Exercise: Testing UserAccount
0:41:52 - Announcement
0:42:41 - Testing Lists
0:48:46 - Exercise: Testing ProductImageGallery
0:53:08 - Testing User Interactions
01:02:04 - Exercise: Testing ExpandableText
01:13:17 - Simplifying Tests
#react #reactjs #testing

[@programmingwithmosh]

- Want to learn more? Get the full course: codewithmosh.com/p/react-testing-mastery - Subscribe for more videos like this: goo.gl/6PYaGF

[@dodownthing]

Not able to buy this course from above link . The page shows " This product is not available. Contact the school owner for more information." Please check .

[@user-yz2mv8kn4x]

same here@@dodownthing

[@HeyMr.OO7]

Chutiya course 😂😂😂

[@JayCraft-mf2pt]

@programmingwithmosh please I couldn't download the Python & SQL cheat sheets. It's given a response of the security certificate expiring 165days ago. It advised not to go further as it's unsafe for my PII in my device. Please help

[@programmingwithmosh]

@@JayCraft-mf2pt I’m sorry to hear that! I took a note and will fix it tomorrow morning.

[@invertedcoder]

Mosh has got some insane skilles

[@tonishant]

One of the best tutor on YT.

[@bcb3548]

Was looking up Vitest yesterday and Mosh drops this! Couldn't have been more auspicious.

[@pandalife1313]

This is the first video that explains everything about React Testing indetails and in a clear format. Thank you so much Mosh

[@mohammadyusuf4371]

I am learning a lot from your videos and glad to have the membership 🙏 Thanks Mosh for being there!

[@user-ks7py9ob9h]

The method of instruction is fantastic. Many thanks, Mosh 💌

[@SaadxBaig]

Can’t wait to learn more about testing in react Mosh! The best teacher out there

[@ky8designs]

Thank you Mosh for your efforts, I loved programming because of you.

[@adamadiengba6928]

Good job again Mosh. So, Modern Angular testing course would be appreciated.

[@davidomiunu782]

Perfect timing. I’m excited about this video

[@catalinionescu5658]

Best course on react testing on YT. Thanks Mosh!

[@JIPP71984]

Looking forward to completing this one Would love a spring boot course from you one day.

[@KzCorp-jt4te]

Wow... this tutorial was amazing. One of the best on testing that I have seen.

[@juanmacias5922]

This was such a great tutorial! I've been wondering how TDD would work with UI, and this helped me understand how I could go about it, thanks!

[@AnuragArwalkar]

Thanks a lot, Mosh, for your detailed programming videos

[@jlimsy1]

The only course on React testing that I managed to complete without hitting unsolvable bugs left and right

[@DigitalCreator5]

Hurray 🎉 thanks mosh 😂

[@roelaneroy2588]

Thank you, Mosh! for this great tutorial. For sure, the full course on this is third course I'm going to buy from you. 🏆🏆

[@programmingwithmosh]

Awesome, thank you for your support!

[@cameronerasmus633]

Hi Mosh! First off - I just want to thank you for your incredible lessons. You have a gift, very few people can explain anything code as well as you do. I'm a high school science teacher myself, so I understand how much work it takes. I came across your courses for the first time in early 2022. A few dozen hours of Mosh that lead to a few dozen projects, that finally lead to my first job as an engineer! You sparked a passion inside of me that I never new I had - I will be forever grateful. Thank you, Mosh. Would you ever consider doing a course on microservices? Maybe using the MERN stack. I would buy that course a dozen times over and recommend it to every human being I know - coder or otherwise!

[@programmingwithmosh]

Thank you for your kind words. Microservices is one of those overrated technologies I’m reluctant to teach as it educates bad habits. The hype is already over and more and more people are getting back to monolith.

[@SkillsMatterTouhidSayed]

Hi mosh, Is any chances to have a Springboot course?

[@cywiz]

Please update react native and nodejs course..... Or please let us know if backend does not have any breaking changes... And......lots of 💕 love, for being there for every self taught programmers

[@webmobile21]

updated react native course that includes testing title as well

[@exposetheworldfacts]

❤❤My dear Mosh I am too much inspired by your methodology of teaching. I love it! Please make a complete tutorial on Flutter and also on Django framework

[@JOJO_THE_PROGRAMMER]

Awesome course Mosh

[@nurudeenhamzah5011]

Quality videos from Mosh, expect no less ❤

[@maicaotri3668]

Thanks a lot, good for understanding

[@jessewakukha1196]

Nice one mosh...from Nairobi kenya

[@madinafest]

Also following from Nairobi, Kenya. 🔥⚡💥

[@Noor-e-islam587]

You are unique sir

[@ko9]

Will this be just as applicable for a NextJS project, or are there significant differences in testing NextJS apps?

[@programmingwithmosh]

For the most part, yes! The knowledge you learn in the course can be applied to a Next.js project because you’re still dealing with React components. But routing in Next.js is different from what we’ve covered in the course.

[@dedstronk]

@@programmingwithmoshwhy not also add section for nextjs since you also teached or make a course for testing nextjs application since its rare to find some?

[@programmingwithmosh]

My goal is to teach you to fish rather than feed you fish. With the materials I put together in this course, you won’t need me in the future and can figure out the rest on your own.

[@ibrahimolammy471]

Thanks Mosh for these tutorials, you're indeed a great tutor. I'd like to know if you have the intention of creating a PHP course.

[@orisfinatech705]

Thanks for this amazing course. I would love to ask, as a beginner should I focus on writing test cases before code or write my code and then write test cases to see if my code passes those test cases

[@deepakjha4138]

great tutorial

[@shakyadissanayaka]

Thank you very much sir

[@UniqueEdit243]

Our legend comes back again. ❤❤

[@mutabazi250-hj1jb]

Cool👍keep it up bro

[@SteveNewman1955]

hi mosh , is there any chance to have a series on spring and microservices i really love the way you teaching and i cant understand the other instructors ... recently i finished your java series and i really love it l'm looking for job in backend development really really appreciate that if you help me .... thanks ❤

[@programmingwithmosh]

Thank you very much! I have spring on my list but I’m not sure where I’ll be work on it as there are many other topics that students have requested more.

[@user-ll4qy6cg9i]

Should we test hooks and and context alone or only in the components where they are used?

[@fireheart__7]

Awesome!! ❤

[@Followme841]

Mosh, can you please add ( the dom ) in your java script course with some best practice exercises and also ( async await ) please❤

[@programmingwithmosh]

Great suggestion!

[@user-ll4qy6cg9i]

Hi Mosh would it be possible you could show how you would test your ErrorPage in this project? I have the same structure on my ErrorPage and i got this error, Error: useRouteError must be used within a data router, I guess it is since i use createBrowserRouter and i'm not sure how to mock it.

[@mylesgideonprospero]

I am trying to comprehend how do people write test modules without knowing the production code beforehand when they do Test Driven Development approach Nonetheless, thank you for providing this and the timing is crazy since I only started looking into testing recently. Out of thousands of tutorial videos, I will always pick your videos. I appreciate your well-thought out content as always ~

[@efraim-andrade]

Great video 👏, what vscode theme is this ?

[@valenciawalker6498]

Thank you

[@josephajibodu2377]

The Legend 🚀

[@AnonymousCoder7]

Hey Mosh Any plans on system design course or Machine learning course .. these topics would be great to make a course on... Thoughts ??!

[@programmingwithmosh]

I was thinking of it for a while but got distracted with a million things! Thanks for the reminder. I’ll see what I can do, but no promises! ;)

[@HeyMr.OO7]

@@programmingwithmosh I really believe you could do a great course on Cloud computing, ML, System Design or may be iOS development. Pls give a small reply if you read this 🙌🏻

[@AnonymousCoder7]

​@@programmingwithmoshyeahh mosh .. I think he is correct... We're friends Pls consider above topics if you can manage .. wud be great.. pls like/reply if you read this 💙

[@RKSharma019]

​@@programmingwithmosh Hey Mosh these are really great courses ... will you pls. Consider ??! 👍🏻

[@natalias.2267]

Hi, do you accept cards from any country? I have problems with payment

[@HeyMr.OO7]

Hey Mosh, Should I buy your Rect 16 course instead of 18 ? Coz that's lot cheaper for me at this beginner stage . I just wanna learn the react ⏳🤔🤔

[@programmingwithmosh]

I wouldn’t recommend that as so much has changed since then!

[@webmobile21]

is vitest applicable for react native

[@devoni_com]

Hello sir, I want to learn and participate in your courses, but I have a question: Can a person who does not know anything about programming follow this course that you will offer? Will I be ready for the job market and have sufficient experience?

[@dakshkumar4032]

amazing

[@user-cn9oo5uw6f]

Will you put this course on Udemy ? My company provided me a udemy business acct n I would like to take advantage of tht

[@bleir82]

Hi! I want to try this but during running npm start I have error "TypeError: this.spawn is not a function" this I think is from concurrently :( I have tried on node 20.10 and newest one 22.1

[@Cloudscloud7300]

Thank you, Can we have video for Building Large language model for beginners ?

[@mutabazi250-hj1jb]

Well be back Mr Mosh, after sometime

[@sukreth1413]

Hi can you make video about how to print first n perfect number in python I searched in internet and chatgpt it has no correct solution only printing first 8 perfect numbers

[@Ninjacode554]

My teacher, makes a testing course with jest and react native testing library, please 🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻

[@jayanthkumar6859]

mosh please make a course on go and rust

[@thaifred]

How could i access my base_url from my config.json file?

[@mehdiskan]

😍Eyval Mosh, In Course Awliee;

[@Nyanda_Jr]

Hello Sir. Nice being here

[@moewai6256]

Why we need so many library to use? react-testing library, jsdom and jest-dom

[@burhaanhassan5498]

I am more interested to see how you implemented the frontend, that can teach us a lot also it summarise the most important skills of react js. Please if you can share with us. sure, we can Colone the repo and see how it's build but Wanna see you doing it

[@programmingwithmosh]

The project has a GitHub repo. I explained that at the beginning. Feel free to clone the project and study it. If you learn better by videos, I've covered all the tools and techniques used in this project (except auth) in my React Intermediate course: codewithmosh.com/p/ultimate-react-part2

[@rakeshmaurya5148]

Sir i am fig fan of you. I want to purchase your pro course.

[@MohammadMansourBone]

Finally 🙌

[@ar-swe]

please make ts node backend series mosh

[@ShakkeerTheCoder]

Mosh, we need tutorial on GraphQL

[@kamauwaweru4991]

i love it

[@mehakgrover2174]

Mosh please make tutorial on flutter

[@azharqureshi9814]

Can we download the course after purchasing from mosh site ? Anyone has experienced this?

[@programmingwithmosh]

You can download individual videos.

[@oussemabouyahia474]

how many times , did you repeat that you have 20 years experience in software

[@rashidkhanjamali4358]

Mosh please Upload zero to mastery Full Stack development

[@arikmosfor4907]

what theme are you using?

[@gaurav455]

It's oh lucy.

[@SANTOSHYADAV-fx6fu]

is this course is on Udemy ?

[@hzakaria5338]

Mosh why you dont give online courses for react native mobile app development ,, there are a lot of complications just to implement the environment 😞

[@user-fb1vi6pn3w]

Hello mosh we need update on your .net course

[@ed-vm1gb]

vscode theme?

[@sahandmahdavi6134]

Can be also used for React Native?

[@programmingwithmosh]

Yes! Most of the techniques and best practices you learn in the course can be applied to React Native projects. You just need to install React Native Testing Library, instead of React Testing Library.

[@sahandmahdavi6134]

@@programmingwithmosh Thanks Mosh!

[@sahandmahdavi6134]

@@programmingwithmosh That's amazing, I was watching the KZbin 1H introduction and it seemed to be practical. On the other side I think if you can give us a course of Vue.js, would be helpful TBH.

[@LemonGaming43021]

I want you to update your node js series course because your node course is out of date.

[@minimalsforlife740]

❤❤❤

[@raghavenderkuppireddy7158]

❤❤❤❤❤

[@dimarialara5752]

Do php please🥺

[@durgaprasad-vm4mh]

I am unable to buy this course. Encountering fallowing error: "This product is not available. Contact the school owner for more information."

[@programmingwithmosh]

Sorry! That was a temporary issue. It's fixed now. Try again and let me know if it's still happening on your end.

[@doict7788]

Going one course to another....

[@christopheradolphe]

That's exactly the course I was looking for. I bought it because I really like your teaching style and I know it's worth every dollar. I have never been disappointed with any of the courses, so thank you @programmingwithmosh for creating such great content.

[@programmingwithmosh]

Thank you so much for your support and lovely words! 🙏

[@christopheradolphe]

You are welcome@@programmingwithmosh My goal this year is to improve my React skills and I'm sure that by the end of this course that goal will be achieved.

[@artsycoder533]

Nice tutorial! Im following along and im getting a failing test when testing for the absence of the edit button if the user is not an admin. it("should not render edit button if user is not admin", () => { const user: User = { id: 1, name: "My Name" }; render(); const button = screen.queryByRole("button"); expect(button).not.toBeInTheDocument(); }); its still finding the edit button: expected document not to contain element, found Edit instead ive added console logs in the UserAccount component to see the value of isAdmin as well as if the button is being rendered and both are logging false: console.log("user.isAdmin:", user.isAdmin); console.log("Button rendered:", user.isAdmin && Edit); when i run screen.debug() i do see that the edit button is in fact not there in the 3rd test case, i just do not understand why the test is failing? User Profile Name: My Name has anyone ran into this?

[@thaifred]

Hi Mosh, i discovered when i test with react query this import in the testfile fails import { QueryClient, QueryClientProvider } from '@tanstack/react-query'. but this work import { QueryClient, QueryClientProvider } from 'react-query', do you have any ideas why? I using the latest version "@tanstack/react-query": "^5.24.2". And how come u use version 3? Thanks in advance 😁

[@programmingwithmosh]

If you’re talking about the project I’ve used in the course, the correct installed package is react-query. But I think they renamed it to @tanstack/react-query in a newer version. Check the package.json to see what is installed.

[@thaifred]

Solved it, since i installed "@tanstack/react-query": "^5.24.2". it didn't update react-query since i guess that version where not part of the tanstack, so by unistall react query it worked. Leave it here as ref if somebody else get the same issue, thanks for an great tutorial i taking the full course.

[@devbyali]

We need a spring boot course