React Testing for Beginners: Start Here!
Вставка
- Опубліковано 8 чер 2024
- 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
- Want to learn more? Get the full course: codewithmosh.com/p/react-testing-mastery
- Subscribe for more videos like this: goo.gl/6PYaGF
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 .
same here@@vinitgirde
Chutiya course 😂😂😂
@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
@@JayCraft-mf2pt I’m sorry to hear that! I took a note and will fix it tomorrow morning.
Mosh has got some insane skilles
Was looking up Vitest yesterday and Mosh drops this! Couldn't have been more auspicious.
One of the best tutor on YT.
The method of instruction is fantastic. Many thanks, Mosh 💌
Can’t wait to learn more about testing in react Mosh! The best teacher out there
This is the first video that explains everything about React Testing indetails and in a clear format. Thank you so much Mosh
Perfect timing. I’m excited about this video
I am learning a lot from your videos and glad to have the membership 🙏 Thanks Mosh for being there!
Thank you Mosh for your efforts, I loved programming because of you.
Good job again Mosh. So, Modern Angular testing course would be appreciated.
Thanks a lot, Mosh, for your detailed programming videos
🤩Thanks Mosh for this course, love the polish and teaching style. Running thru this now.
Best course on react testing on YT. Thanks Mosh!
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!
Looking forward to completing this one
Would love a spring boot course from you one day.
The only course on React testing that I managed to complete without hitting unsolvable bugs left and right
Wow... this tutorial was amazing. One of the best on testing that I have seen.
Awesome course Mosh
Quality videos from Mosh, expect no less ❤
Thanks a lot, good for understanding
Hurray 🎉 thanks mosh 😂
Thank you, Mosh! for this great tutorial. For sure, the full course on this is third course I'm going to buy from you. 🏆🏆
Awesome, thank you for your support!
Hi mosh,
Is any chances to have a Springboot course?
❤❤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
Most underrated skill that only professional devs can appreciate. Thanks Mosh :)
Great resource!
You are unique sir
great tutorial
Thank you very much sir
Our legend comes back again. ❤❤
Awesome!! ❤
Nice one mosh...from Nairobi kenya
Also following from Nairobi, Kenya. 🔥⚡💥
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!
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.
Will this be just as applicable for a NextJS project, or are there significant differences in testing NextJS apps?
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.
@@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?
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.
Thank you
you are just amazing..
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
Cool👍keep it up bro
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.
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
updated react native course that includes testing title as well
Should we test hooks and and context alone or only in the components where they are used?
😍Eyval Mosh, In Course Awliee;
Great video 👏, what vscode theme is this ?
The Legend 🚀
Finally 🙌
Hey mosh, nice tute, btw, but in my components in describe block, only 1 it block/test runs at a time, if i have 2 valid tests, at a time only 1 will run, multiple tests are not running, i mean they can run but will fail only 1 test at a time passes, the comonent uses context based dark/light theme switching ? any suggestions here, what m doing wrong ?
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 ~
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 ❤
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.
amazing
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.
Hello Sir. Nice being here
Well be back Mr Mosh, after sometime
i love it
Hi, do you accept cards from any country? I have problems with payment
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
Thank you, Can we have video for Building Large language model for beginners ?
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 ⏳🤔🤔
I wouldn’t recommend that as so much has changed since then!
Hey Mosh Any plans on system design course or Machine learning course .. these topics would be great to make a course on... Thoughts ??!
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! ;)
@@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 🙌🏻
@@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 💙
@@programmingwithmosh Hey Mosh these are really great courses ... will you pls. Consider ??! 👍🏻
Mosh, can you please add ( the dom ) in your java script course with some best practice exercises and also ( async await ) please❤
Great suggestion!
mosh please make a course on go and rust
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?
please make ts node backend series mosh
Will you put this course on Udemy ? My company provided me a udemy business acct n I would like to take advantage of tht
is vitest applicable for react native
Mosh please make tutorial on flutter
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
How could i access my base_url from my config.json file?
Mosh, we need tutorial on GraphQL
Sir i am fig fan of you. I want to purchase your pro course.
Why we need so many library to use? react-testing library, jsdom and jest-dom
My teacher, makes a testing course with jest and react native testing library, please 🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻
❤❤❤❤❤
❤❤❤
Can we download the course after purchasing from mosh site ?
Anyone has experienced this?
You can download individual videos.
Mosh please Upload zero to mastery Full Stack development
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
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
vscode theme?
what theme are you using?
It's oh lucy.
Hello mosh we need update on your .net course
is this course is on Udemy ?
Mosh why you dont give online courses for react native mobile app development ,, there are a lot of complications just to implement the environment 😞
I want you to update your node js series course because your node course is out of date.
Can be also used for React Native?
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.
@@programmingwithmosh Thanks Mosh!
@@programmingwithmosh That's amazing, I was watching the UA-cam 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.
I am unable to buy this course. Encountering fallowing error: "This product is not available. Contact the school owner for more information."
Sorry! That was a temporary issue. It's fixed now. Try again and let me know if it's still happening on your end.
20:21
Do php please🥺
how many times , did you repeat that you have 20 years experience in software
Going one course to another....
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.
Thank you so much for your support and lovely words! 🙏
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.
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?
We need a spring boot course
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 😁
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.
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.