React Testing Crash Course

  Рет қаралды 314,190

Traversy Media

Traversy Media

Күн бұрын

Learn about testing in React including unit, e2e and integration testing with React Testing Library, Jest & Cypress
Techbase KZfaq Channel:
/ @techbasedev
Starter Repo:
github.com/MitchelSt/react-te...
Final Repo:
github.com/MitchelSt/react-te...
Timestamps:
0:00 - Brad Intro
0:55 - Mitchel Intro
1:24 - Why should you test?
1:58 - What to test?
5:48 - Demo app setup
11:06 - Unit tests
25:11 - Integration tests
28:07 - End-to-End tests
55:56 - Wrap up

Пікірлер: 369
@ahmedosama7632
@ahmedosama7632 2 жыл бұрын
Great! We need more tutorials about testing, there isn't much of it on the internet
@TraversyMedia
@TraversyMedia 2 жыл бұрын
I agree. I always found it difficult to try and teach testing because it's hard to do it in a "real world" way. I think Mitchel did an excellent job though
@RogerThat902
@RogerThat902 2 жыл бұрын
Agreed. It's arguably the biggest "woah, I have no idea what I should be doing" I found on a new job. And I'd argue it's maybe the one thing that can separate you from other candidates and make you stand out on jobs. If you are good at testing it will make you seem like a boss from day 1. I know that sounds silly but being good at it really is super valuable.
@be_real_truth_matters
@be_real_truth_matters 2 жыл бұрын
Becoz nobody wants to waste time...
@josephakayesi6951
@josephakayesi6951 2 жыл бұрын
You're right. Maybe one day you'll make some for us.
@griffinkirkland9087
@griffinkirkland9087 Жыл бұрын
Web whale is it time wasting to test apps?
@tevinmorake8924
@tevinmorake8924 2 жыл бұрын
Thanks Brad, Mitchel. I learnt quite a lot today even though I've been testing for years. Really appreciate it guys!
@bufootballa
@bufootballa 2 жыл бұрын
This video was simply INCREDIBLE! Do yourself a favor and watch from start to finish. You won't regret it and will definitely add some items to your skillset, especially the amazing Cypress automated tests! It was so much simpler than I imagined to get automated E2E tests setup and running! Thanks Brad and Mitchel!
@samanfayazi1226
@samanfayazi1226 2 жыл бұрын
What would we do without you brad? honestly I have no clue, respect guys, for all your hard work
@ansonthedev
@ansonthedev 2 жыл бұрын
Perfect video! Testing is very important and I'm glad it's being covered. Thanks Techbase & Brad! :)
@adrienconversanodbl_g5119
@adrienconversanodbl_g5119 2 жыл бұрын
Thank you Traversy ! I enjoy both your project tutorials as well as your UDEMY courses !
@ceciliaalbero7284
@ceciliaalbero7284 2 жыл бұрын
this is PURE GOLD. Best video to get into Jest. Thank you Brad and Mitchel
@devorein
@devorein 2 жыл бұрын
Found another gem. Thank you so much, Brad and Techbase.
@Abelfubu
@Abelfubu 2 жыл бұрын
Perfect timing! I was just looking for a testing library guide with react and then this videos just came out, amazing!
@romimaximus
@romimaximus 2 жыл бұрын
Awesome !! yeahhh "testing" !! we really needed a tutorial like this !! thankx Brad and Mitchel !! you dont know how much this helped me and many others Devs out there..!! 😊👍
@mohamedfouedslama3412
@mohamedfouedslama3412 Жыл бұрын
That is one awesome tutorial right there ! honestly great job Mitchel and thank you for this detailed how to test. keep up the hard work.
@hsingh110
@hsingh110 Жыл бұрын
A great video on testing, I have been looking for something like this for days and it really covered everything I needed for my current project. The only suggestion I have is being mindful of your IDE placement, as at times I couldnt see the full code, so had to replay several times in certain parts of the video. Thank you for the great content Mitchel and Brad
@Hi-373
@Hi-373 2 жыл бұрын
really well done, I have waited alot of tutorials and your knowledge and delivery is excellent, keep up the good work
@Bruno87198
@Bruno87198 2 жыл бұрын
This is exactly the content that I was looking for! Thank you so much!
@moseschris9756
@moseschris9756 Жыл бұрын
This is really amazing brad, I have learnt a lot from your channel. Keep up the good work sir.
@khoushiekram5287
@khoushiekram5287 2 жыл бұрын
Thanks a bunch Mitchell & Brad for making this awesome video react testing tutorial for us!
@muhammed_rahif
@muhammed_rahif 2 жыл бұрын
Exactly what I needed... perfect timing...🤩
@dennisgonzales9521
@dennisgonzales9521 2 жыл бұрын
Same here haha
@ParthChokshi
@ParthChokshi 2 жыл бұрын
Great to see testing video. Not a lot of folks cover this much!
@barteg_s
@barteg_s 2 жыл бұрын
Just in time for my end of uni project, incredible, thank you!
@chintansawla
@chintansawla 2 жыл бұрын
This is such a good method of teaching how to test a react app. Loved the video!
@hercules2170
@hercules2170 2 жыл бұрын
This video was super informative...Thanks a bunch Mitchel! :)
@mukul98s
@mukul98s 2 жыл бұрын
Timing can't be better. I have been looking for this and boom 💥
@FaisalMahmood91
@FaisalMahmood91 2 жыл бұрын
Thank you that was great! I was also able to enable typescript in both the unit and e2e testing files which made things a bit more clear having types/suggestions/warnings etc.
@scottwears674
@scottwears674 2 жыл бұрын
I think these videos are incredible, Brad is known as the father of web tutorials and it's lovely to see people who have probably gain some knowledge from him create videos for the channel and for Brad to alway big up his friends
@thisaintmyrealname1
@thisaintmyrealname1 2 жыл бұрын
YES. Thank you. This is the other half of the knowledge that is required at jobs!
@ahmadjonabdusamadov4282
@ahmadjonabdusamadov4282 2 жыл бұрын
that's it what I'm looking for these days:) thank you guys
@BlurryBit
@BlurryBit 2 жыл бұрын
Exactly what I was looking for ( i kw there are lots of others on YT, but not as a single video...) :D :D Awesome stuffs man. Will be very helpful. Please keep up the good works. :)
@nickschmitt8594
@nickschmitt8594 2 жыл бұрын
End-to-end testing with Cypress is amazing, but it'll miss out on the tiny details that unit testing will cover. That's why the whole pyramid is essential. Great video!
@sethwhitaker5567
@sethwhitaker5567 2 жыл бұрын
Yeah that's what I'm thinking as well. I am new to testing, but it seems like unit tests help locate precisely where bugs are in your code, integration tests help determine whether the components of your app interact together properly, and end-to-end tests help check whether workflows are behaving as expected in a more realistic user situation. All seem necessary, or at least beneficial.
@bobkazamakis5169
@bobkazamakis5169 2 жыл бұрын
More about testing please! Great job team.
@makombi32
@makombi32 Жыл бұрын
Great tutorial, went from knowing nothing about automatic testing to slowly but surely implementing it in my own projects in just about 60 minutes.
@anilloutombam
@anilloutombam 2 жыл бұрын
Perfect Timing ❤️ Was just searching damn Brad ❤️❤️
@FernandoPonteFilho
@FernandoPonteFilho 2 жыл бұрын
Fantastic! Thanks for the content, I have your MERN eCommerce and miss a lot on good content covering tests.
@eliasmanzano1574
@eliasmanzano1574 2 жыл бұрын
I did not see the video was yours and when I listen to the intro music I was like...hell yeah! Muchas Gracias señor Brad
@dannieh9849
@dannieh9849 2 жыл бұрын
Hi! Really useful video. One suggested improvement is that, because of heavy indentation, maybe you could split the editor with a horizontal line instead of vertical? It's really hard to follow when you're scrolling left to right. At almost no point was it possible to read an entire instruction without you doing that. Thanks and keep doing what you're doing!
@avinashmurmu9070
@avinashmurmu9070 2 жыл бұрын
these are the tutorials I am looking for ❤️
@munapadhi8723
@munapadhi8723 2 жыл бұрын
Your teaching is always outstanding , we are waiting your new video, thanks for your hard work keep growing 🙏
@80Vikram
@80Vikram 2 жыл бұрын
thanks a ton to both of you, god bless you both. Code without test cases is like driving without seat belts on, it upto you which one you prefer :)
@OTadashi162
@OTadashi162 2 жыл бұрын
Awesome, this is the best testing tutorial for React i have ever watch
@eleah2665
@eleah2665 2 жыл бұрын
Hello Brad. Always good to see you. Still the king.
@Advanced21thHuman
@Advanced21thHuman 2 жыл бұрын
Exactly what I'm trying to learn at the moment!
@adyarabiat9394
@adyarabiat9394 2 жыл бұрын
I miss your speech videos (non tutorial ones). I wish you get better soon Brad 🙏🏼
@JohnKomarnicki
@JohnKomarnicki 2 жыл бұрын
Always a pleasure to see your promoting other content creators! Testing is not talked about as much, glad to see this covered in this guest video! Great video, Mitchel!
@TechbaseDev
@TechbaseDev 2 жыл бұрын
Thanks John! And yes, the fact that Brad gives other content creators these kind of chances says a lot about him as a person 🐐
@JohnKomarnicki
@JohnKomarnicki 2 жыл бұрын
@@TechbaseDev He really is the 🐐. I can relate, as i had the opportunity a few months back to create a video for his audience. He helps out others more than i think he knows. Good luck in the future, will definitely stay updated with your channel!
@kidschannel2115
@kidschannel2115 2 жыл бұрын
thanks for this course,this is the best and reliable channel to learn new techs, btw plz be noted "yarn install && yarn dev" command is replaced with "yarn add add yarn dev". for them who struggled at this point
@zaqisilverano
@zaqisilverano 2 жыл бұрын
Great!! This video really help me understanding testing!
@alexotoous
@alexotoous Жыл бұрын
I have watched and taken countless testing courses but no one has ever explained the rationale behind testing better than this. Great Job 4:20/58:35
@aronhegedus
@aronhegedus 2 жыл бұрын
that helped library seems very OP, thanks for showing
@Vickishh
@Vickishh 11 ай бұрын
Thank you, I never knew testing could be this fun😁
@dsqaurecoding
@dsqaurecoding 2 жыл бұрын
Once again you read my mind, I just need this course 😲
@jonatasdeoliveiracoelho4691
@jonatasdeoliveiracoelho4691 2 жыл бұрын
Thank you very much, Mitchel! I learnt a lot with your good explanations.
@TechbaseDev
@TechbaseDev 2 жыл бұрын
Thanks Jonatas, appreciate it a lot!
@licokr
@licokr 2 жыл бұрын
Thank you very much, before watching this video, I was afraid to write test codes, and now I think I would make it well
@frankiefab
@frankiefab 2 жыл бұрын
Just came at the right time. Thank you
@nothjg
@nothjg 2 жыл бұрын
thanks for this I was exactly looking for this
@ichankabir6936
@ichankabir6936 2 жыл бұрын
Thanks man, I was about to start learning react testing and I found your tutorial
@slowprogrammer
@slowprogrammer 2 жыл бұрын
Desperately needed such a content ❤️❤️☺️
@jasonpmerrigan
@jasonpmerrigan 2 жыл бұрын
Great video, thank you very much. Just one small bit of feedback/improvement, I find its always best to have the full code editor on the screen, not having to scroll left and right. Other than that, everything was great, thank you both.
@yaldakarimi3772
@yaldakarimi3772 2 жыл бұрын
Love you both, great content on both channels thank you
@TechbaseDev
@TechbaseDev 2 жыл бұрын
Thanks so much 🙏
@omarsaulmoralesibarra117
@omarsaulmoralesibarra117 2 жыл бұрын
Awesome testing course 🔥🔥
@27sosite73
@27sosite73 7 ай бұрын
yep, this is the best video on what to test on the internet, ty guys
@27sosite73
@27sosite73 7 ай бұрын
extremely thankfully for this video
@davidkezi6086
@davidkezi6086 2 жыл бұрын
Thanks for this. I loved it ❤️ Learnt a thing or two
@TechbaseDev
@TechbaseDev 2 жыл бұрын
Thanks so much David!
@techniker8745
@techniker8745 Жыл бұрын
Great vid, learnt a lot
@user-gw4df2de3k
@user-gw4df2de3k Жыл бұрын
Great video! Thank you for your work
@Ts-yy2jn
@Ts-yy2jn 2 жыл бұрын
Perfect! ❤️ More React stuff 😍
@codezero6023
@codezero6023 2 жыл бұрын
Wow! That’s cool! Will definitely find a use for Cyprus. I will also look at Selinium too
@ranjanarulanandham3981
@ranjanarulanandham3981 2 жыл бұрын
kzfaq.info/get/bejne/sLljpdaG0dC6hHU.html
@HoneyLemonNuin
@HoneyLemonNuin Жыл бұрын
Thank you so much. This is very helpful. I have learn a lot from this video.
@thatCbean
@thatCbean 2 жыл бұрын
First of all, great video, it is very educational and easy to listen to. I would like to say a couple things however: Firstly, you said that integration tests are more than just combining unit tests, but I feel like you didn't really cover the whole idea of what the difference is and why you need both. For those reading this in the future, a unit test tests a single component and is very useful to find problems with specific parts of your program. The purpose of an integration test is to test if the components correctly function when put together. They basically test the connection between components. If you rely solely on integration tests you may find errors, but it will be harder to see in which component they might be whereas unit tests generally point you right to the faulty component. Unit tests are also really useful for boundary testing: Testing cases near branching points in the code, and other edge cases. EDIT: In other words, for important parts of your code you would want both unit and integration tests. In this case I would have used unit tests to see if the buttons work correctly and to see if the text boxes take their inputs correctly, and an integration test to see if clicking the pay button actually correctly registers the inputs of the fields and passes them on to the next component, instead of just combining the unit tests. Secondly, I feel like your code editor is a bit too small, you can't really see the code, even though that should be the focus of the video. EDIT 2: At 42:55 you also say that there is only one text box so just targeting "textbox" is fine. That is of course only the case if no other textbox will be added later. If you only have one test like this it would be easy to edit, but if you write a lot of tests like this adding components to pages can get very tedious very quickly because of the amount of tests you will have to edit, on top of the new tests you already have to write. EDIT 3: At about 45:00 you say "use as small of a value as possible", but I would personally argue that this way, you do not test larger values which are much more important. I would say a better option would be to reset the database before and/or after your tests, and to at least test larger values in your integration tests (especially very large values).
@gomesdev
@gomesdev 2 жыл бұрын
Thanks for the video, we helpful me so much!
@huseynfy
@huseynfy 2 жыл бұрын
Thank you so much for this great video!
@anaelennaemeka4078
@anaelennaemeka4078 Жыл бұрын
Fantastic, now I have a basic understanding of React testing.
@vaibhavshukla4761
@vaibhavshukla4761 2 жыл бұрын
I am praying for you to have your all problems solved and all mighty to give you strength to fight you problems. please be strong!
@king-manu2758
@king-manu2758 2 жыл бұрын
When you did the cypress bit with testing playground I think testing finally clicked for me.
@Middollo
@Middollo 2 жыл бұрын
Thank you for this amazing video!
@moiserwibutso4899
@moiserwibutso4899 2 жыл бұрын
Thanks a lot for this amazing tutorial.
@priyangpatel8135
@priyangpatel8135 2 жыл бұрын
Thanks a lot man we need testing tutorials
@phsaurav
@phsaurav 2 жыл бұрын
Thank you. Great! direct on point type video on testing in react.
@shivani9840
@shivani9840 2 жыл бұрын
Hey Saurav! Have you ever taken the help of any tutorial to do a project? Would you be interested exploring opportunities in web development?
@erwin7427
@erwin7427 2 жыл бұрын
More of these, please!!
@user-gu8np4
@user-gu8np4 2 жыл бұрын
Thanks! It is a great overview
@GewoonWijnand
@GewoonWijnand 2 жыл бұрын
Great video man! Thanks
@TechbaseDev
@TechbaseDev 2 жыл бұрын
Thanks bro!
@littlebonanzaz
@littlebonanzaz 2 жыл бұрын
You are the greatest this was needed
@ExplorationAT
@ExplorationAT 2 жыл бұрын
nice instructor, the project is absolutely enormous for a 1hr tutorial, was overkill for my CPU
@WaterJay
@WaterJay Жыл бұрын
extremely informative, thanks mate
@huuthongle8768
@huuthongle8768 Жыл бұрын
were you able to sign in?
@ScienceSeekho
@ScienceSeekho Жыл бұрын
Great!
@dvvinodkumar6672
@dvvinodkumar6672 Жыл бұрын
it's really a interesting video and very helpful and very easy way of testing especially for a beginner.
@jamesarnold22
@jamesarnold22 2 жыл бұрын
I'm struggling to find elements in the DOM when using React & Styled Components - did you have a work around for this? Fantastic well structured tutorial, thanks.
@alqam2011
@alqam2011 Жыл бұрын
Thank you so much, informative!
@tomfeller7833
@tomfeller7833 2 жыл бұрын
Thank you very much for this awesome video
@rakesh.rankawat
@rakesh.rankawat 2 жыл бұрын
This is why I like Brad more because he focus on doing more instead of just showing stuffs.
@sensational3771
@sensational3771 2 жыл бұрын
thank you my favorite coder , nice
@vali558
@vali558 Жыл бұрын
perfect tutorial, right to the point.
@michajaron6236
@michajaron6236 2 жыл бұрын
Doing my first testing tomorrow right in time😄
@lucky6672
@lucky6672 2 жыл бұрын
You are back! Let's gooo!!!
@miladsakhaei
@miladsakhaei Жыл бұрын
Thank you so much! really helpful!
@rockNbrain
@rockNbrain 2 жыл бұрын
Great job! Tks
@ajeethkumarr6744
@ajeethkumarr6744 2 жыл бұрын
Hey Brad I am doing your udemy mern Ecommerce project, in fetching data from react chapter I got stuck on http-error 431 , what should I do to get rid of this?
@hoseinabolhasani
@hoseinabolhasani 2 жыл бұрын
awsome content 🥂
@sabuj9381
@sabuj9381 Жыл бұрын
Thank you, it helped me a lot
@josephakayesi6951
@josephakayesi6951 2 жыл бұрын
So yeah!😃 Great tutorial!
@1TaylorUK
@1TaylorUK 2 жыл бұрын
Really helpful video as always. For future reference, I really struggle to follow along and understand the code because it was half the width of the screen.
@veeresh4441
@veeresh4441 2 жыл бұрын
Shit , everytime I think of learning, I see Brad posting it . Last week I thought of learning typescript, Brad posted a related video.
@medAmineRg
@medAmineRg 10 ай бұрын
great stuff 👏👏👏
@aadil4236
@aadil4236 2 жыл бұрын
Hey brad how are you doing? Thanks, for this great tutorial. I would love a tutorial series about the implementation of the front-end with React and typescript. It's so confusing. I can make sense of the types in typescript alone, but when it comes to React with typescript (with all the ReactNodeElemeents and stuff it doesn't make sense. A recommendation to some course on youtube or book will do as well, but I prefer to learn from you it's easy and concise) Sorry for this long ass comment.
React Router v6 Major Changes
13:12
Traversy Media
Рет қаралды 129 М.
When To Unit, E2E, And Integration Test
14:58
ThePrimeTime
Рет қаралды 90 М.
Final muy increíble 😱
00:46
Juan De Dios Pantoja 2
Рет қаралды 53 МЛН
A clash of kindness and indifference #shorts
00:17
Fabiosa Best Lifehacks
Рет қаралды 37 МЛН
Vivaan  Tanya once again pranked Papa 🤣😇🤣
00:10
seema lamba
Рет қаралды 34 МЛН
JAVA Group 12 Seminar
44:43
ChamiViews
Рет қаралды 10
Testing In React Tutorial - Jest and React Testing Library
21:28
Remix Crash Course | Full Stack React
1:04:49
Traversy Media
Рет қаралды 122 М.
Test-Driven Development // Fun TDD Introduction with JavaScript
12:55
5 Pro-Level React Do's & Don'ts
30:06
Traversy Media
Рет қаралды 174 М.
Stop Writing So Many Tests
10:02
Web Dev Simplified
Рет қаралды 83 М.
The Importance of Specialization in Coding
7:13
Traversy Media
Рет қаралды 194 М.
Should You Test As A Web Developer?
11:00
Traversy Media
Рет қаралды 28 М.
Тестирование React приложения
1:03:02
Михаил Непомнящий
Рет қаралды 62 М.
Why Vitest Is Better Than Jest
13:13
Web Dev Simplified
Рет қаралды 130 М.
1$ vs 500$ ВИРТУАЛЬНАЯ РЕАЛЬНОСТЬ !
23:20
GoldenBurst
Рет қаралды 1,6 МЛН
Первый обзор Galaxy Z Fold 6
12:23
Rozetked
Рет қаралды 383 М.
Simple maintenance. #leddisplay #ledscreen #ledwall #ledmodule #ledinstallation
0:19
LED Screen Factory-EagerLED
Рет қаралды 29 МЛН
КРУТОЙ ТЕЛЕФОН
0:16
KINO KAIF
Рет қаралды 4,8 МЛН
Самый дорогой кабель Apple
0:37
Romancev768
Рет қаралды 331 М.
ИГРОВОВЫЙ НОУТ ASUS ЗА 57 тысяч
25:33
Ремонтяш
Рет қаралды 349 М.