React Testing Crash Course

[@ahmedosama7632]

Great! We need more tutorials about testing, there isn't much of it on the internet

[@TraversyMedia]

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]

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]

Becoz nobody wants to waste time...

[@josephakayesi6951]

You're right. Maybe one day you'll make some for us.

[@griffinkirkland9087]

Web whale is it time wasting to test apps?

[@samanfayazi1226]

What would we do without you brad? honestly I have no clue, respect guys, for all your hard work

[@tevinmorake8924]

Thanks Brad, Mitchel. I learnt quite a lot today even though I've been testing for years. Really appreciate it guys!

[@thatCbean]

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).

[@nickschmitt8594]

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]

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.

[@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

[@dannieh9849]

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!

[@muhammed_rahif]

Exactly what I needed... perfect timing...🤩

[@dennisgonzales9521]

Same here haha

[@JohnKomarnicki]

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]

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]

@@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!

[@devorein]

Found another gem. Thank you so much, Brad and Techbase.

[@bufootballa]

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!

[@jasonpmerrigan]

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.

[@ceciliaalbero7284]

this is PURE GOLD. Best video to get into Jest. Thank you Brad and Mitchel

[@adyarabiat9394]

I miss your speech videos (non tutorial ones). I wish you get better soon Brad 🙏🏼

[@romimaximus]

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..!! 😊👍

[@kidschannel2115]

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

[@thisaintmyrealname1]

YES. Thank you. This is the other half of the knowledge that is required at jobs!

[@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

[@ansonthedev]

Perfect video! Testing is very important and I'm glad it's being covered. Thanks Techbase & Brad! :)

[@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.

[@adrienconversanodbl_g5119]

Thank you Traversy ! I enjoy both your project tutorials as well as your UDEMY courses !

[@mukul98s]

Timing can't be better. I have been looking for this and boom 💥

[@ScienceSeekho]

Great!

[@vaibhavshukla4761]

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!

[@scottwears674]

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

[@Bruno87198]

This is exactly the content that I was looking for! Thank you so much!

[@BlurryBit]

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. :)

[@ParthChokshi]

Great to see testing video. Not a lot of folks cover this much!

[@Abelfubu]

Perfect timing! I was just looking for a testing library guide with react and then this videos just came out, amazing!

[@chintansawla]

This is such a good method of teaching how to test a react app. Loved the video!

[@eliasmanzano1574]

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

[@aryansingh2105]

I learned about the Test Playground tool which is super useful. I loved E2E testing using cypress. I think unit testing part could be improved by including different ways to get and different assertions along with a small example of mocking. Mitchel is very nice instructor. He explained things very nicely. On all as always great video loved it.👌🙌

[@shivani9840]

Hey Aryan! Are you a fresher and open to opportunities in web development currently? Have you created any projects in JavaScript frameworks?

[@80Vikram]

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 :)

[@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.

[@ahmadjonabdusamadov4282]

that's it what I'm looking for these days:) thank you guys

[@FaisalMahmood91]

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.

[@FernandoPonteFilho]

Fantastic! Thanks for the content, I have your MERN eCommerce and miss a lot on good content covering tests.

[@Hi-373]

really well done, I have waited alot of tutorials and your knowledge and delivery is excellent, keep up the good work

[@moseschris9756]

This is really amazing brad, I have learnt a lot from your channel. Keep up the good work sir.

[@barteg_s]

Just in time for my end of uni project, incredible, thank you!

[@rakesh.rankawat]

This is why I like Brad more because he focus on doing more instead of just showing stuffs.

[@khoushiekram5287]

Thanks a bunch Mitchell & Brad for making this awesome video react testing tutorial for us!

[@codehan]

Finally! Please do more testing courses!

[@aronhegedus]

that helped library seems very OP, thanks for showing

[@munapadhi8723]

Your teaching is always outstanding , we are waiting your new video, thanks for your hard work keep growing 🙏

[@anilloutombam]

Perfect Timing ❤️ Was just searching damn Brad ❤️❤️

[@27sosite73]

yep, this is the best video on what to test on the internet, ty guys

[@27sosite73]

extremely thankfully for this video

[@hercules2170]

This video was super informative...Thanks a bunch Mitchel! :)

[@Cazi_Myth]

Exactly what I'm trying to learn at the moment!

[@eleah2665]

Hello Brad. Always good to see you. Still the king.

[@OTadashi162]

Awesome, this is the best testing tutorial for React i have ever watch

[@yaldakarimi3772]

Love you both, great content on both channels thank you

[@TechbaseDev]

Thanks so much 🙏

[@licokr]

Thank you very much, before watching this video, I was afraid to write test codes, and now I think I would make it well

[@avinashmurmu9070]

these are the tutorials I am looking for ❤️

[@bobkazamakis5169]

More about testing please! Great job team.

[@tevinmorake8924]

I think the comment section can agree that Mitchel has earned our subs. Thanks for featuring him Daddy Traversy!

[@TechbaseDev]

Thanks so much man!

[@codezero6023]

Wow! That’s cool! Will definitely find a use for Cyprus. I will also look at Selinium too

[@ranjanarulanandham3981]

kzbin.info/www/bejne/sISWo6aLoc-JiqM

[@jonatasdeoliveiracoelho4691]

Thank you very much, Mitchel! I learnt a lot with your good explanations.

[@TechbaseDev]

Thanks Jonatas, appreciate it a lot!

[@King-Gilamashur2758]

When you did the cypress bit with testing playground I think testing finally clicked for me.

[@Human_Evolution-]

Using hotkeys to clear the test output is nice for testing. If you have a macro keyboard, you can make a clear button, it's super handy! CLEAR TERMINAL: press Ctrl + Shift + P key together

[@1TaylorUK]

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.

[@ExplorationAT]

nice instructor, the project is absolutely enormous for a 1hr tutorial, was overkill for my CPU

[@chetanjain4616]

I have a suggestion please, either use full screen of browser or code editor at time, because Mitchel here has his browser, editor and terminal all open in same screen and I understand that he has a wide monitor so its not that difficult for him to keep track of whats where but my eyes are hurting looking at the screen even in full screen in KZbin. So If possible can you do something about that? Great Course BTW!

[@2u841r]

Thank you channel owner and Guest Teacher.

[@nothjg]

thanks for this I was exactly looking for this

[@zaqisilverano]

Great!! This video really help me understanding testing!

[@michajaron6236]

Doing my first testing tomorrow right in time😄

[@Vickishh]

Thank you, I never knew testing could be this fun😁

[@27sosite73]

Many people have different preferences when it comes to file structure, but I believe it should be organized by features rather than adhering to the 'smart and dumb' methodology. The 'Tao of React' book explains this concept effectively.

[@davidkezi6086]

Thanks for this. I loved it ❤️ Learnt a thing or two

[@TechbaseDev]

Thanks so much David!

[@TimWinfred]

For accessibility, your form inputs should ALWAYS have labels.

[@TechbaseDev]

Agreed! I wish all UI/UX-designers would take that in consideration as well.

[@michaelask9018]

Good content - I would recommend making the application screen smaller so we could actually read all of the code - but again, very nice presentation

[@slowprogrammer]

Desperately needed such a content ❤️❤️☺️

[@dsqaurecoding]

Once again you read my mind, I just need this course 😲

[@frankiefab]

Just came at the right time. Thank you

[@omarsaulmoralesibarra117]

Awesome testing course 🔥🔥

[@Ts-yy2jn]

Perfect! ❤️ More React stuff 😍

[@asaganda1]

Good tutorial and lessons/theory on testing. At the 33:48 mark, I had trouble with Cypress version 12.8.1 when it came to detecting the custom test we wrote. Cypress doesn't detect the file because you have to add ".cy.js" to the end of the file instead of just ".js"

[@rohittendulkar4958]

Thanks. This comment helped me out a lot. Which testing type did you choose?

[@anvarsaidov8964]

Thank you Brad for getting Justin Timberlake's cousin put together and awesome tutorial!

[@ichankabir6936]

Thanks man, I was about to start learning react testing and I found your tutorial

[@MrBumbo90]

Great tutorial. Thanks for the effort!

[@anaelennaemeka4078]

Fantastic, now I have a basic understanding of React testing.

[@veeresh4441]

Shit , everytime I think of learning, I see Brad posting it . Last week I thought of learning typescript, Brad posted a related video.

[@josephinegeoghegan2913]

This looks so cool, I really want to do it. I'm having a lot of issues with the setup, because some of it is deprecated.

[@phsaurav]

Thank you. Great! direct on point type video on testing in react.

[@shivani9840]

Hey Saurav! Have you ever taken the help of any tutorial to do a project? Would you be interested exploring opportunities in web development?

[@0xyz]

Great tutorial, Techbase should please increase size of vscode editor to full width or 80% of the screen and should be on the left side. Its difficult to watch the current way it is

[@sensational3771]

thank you my favorite coder , nice

[@luisdwq123]

Great tutorial!! I have a suggestion though, the editor font size could be smaller, the way it is now its hard to read the code in its entirety because its too zoom in :)

[@aadil4236]

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.

[@GewoonWijnand]

Great video man! Thanks

[@TechbaseDev]

Thanks bro!

[@mahdipakravan676]

Special thanks Brad & mitchel 🎇💪

[@susmitobhattacharyya1668]

Brad & Techbase thank you so much ! Can we have some good content on enzyme also please?

[@HoneyLemonNuin]

Thank you so much. This is very helpful. I have learn a lot from this video.

[@Туран141]

Great video! Thank you for your work

[@WaterJay]

extremely informative, thanks mate

[@huuthongle8768]

were you able to sign in?

[@detectiveburkanov]

good content except for one thing: one half of screen has browser with tiny form with 90% empty unused space, other half is zoomed in snapped in half code with terminal which leaves even smaller window for code

[@PeterMumford]

I can't get the repo to run. It appears to be completely stuck in dependency conflicts. The breaking error is "Module not found: Can't resolve '../aws-exports'" . But aws-exports in not a dependency. It appears to be a container. There are open issues on the repo regarding this same problem.

[@fixitm365]

I'm faced with the same issue. Have you found a solution yet?

[@CalebAlldrin1]

same

[@littlebonanzaz]

You are the greatest this was needed

[@lucky6672]

You are back! Let's gooo!!!

[@hoseinabolhasani]

awsome content 🥂