React Testing Library Crash Course

[@liornitzan4602]

Good introduction to React Testing Library. Very clearly explained. I do have a few remarks though: 1. It wouldn't hurt to explain that we are using Jest as our testing environment and that the functions "test" and "expect" for example are Jest functions. 2. It is recommended to call queries like getBy... etc., on the screen method imported from the testing library rather than on the return value of render. This is recommended by the official docs. 3. It is recommended to use userEvent rather than fireEvent to trigger, well, user events. 4. It would help to explain the "Arrange" - "Act" - "Assert" testing methodology. 5. Regarding getByTestId - As already mentioned in another comment, it is recommended in the official docs to only use it if there is no other way, and there usually are alternatives.

[@EverAfterBreak2]

Commeting so the algo helps this guy to get more viewers he deserves it.

[@pranav854]

Please keep posting more testing-related content. This is incredible and there isn't much testing-related videos out there!

[@codingwithdidem]

Hello, this video deserves much more attention guys!

[@shubhamranjan4596]

Yes baby

[@leelakrishnaisukapalli8431]

Yeah! You are right

[@antnam4406]

Share

[@joshferriday8966]

Dude this is an awesome video! I've been trying to wrap my head around this all day and your video was the best introduction I found :)

[@romimaximus]

yes, this is awesome, 👍, because all the videos that i found about testing, its somone adding some numbers, that has nothing to do with testing ,

[@nosmoking586]

I have many paid course that teach Unit Test on React. But this is by far the best tutorial that I have ever watched.

[@AlgorithmDoctor]

This is the best React test crash course on KZbin. Keep up the good job.

[@raulmartinezjr7708]

The best React Testing crash course :) Keep it up!

[@rohitv3955]

Your video deserves a lot more views! Damn, never been this hooked (no pun intended) on a long programming video.

[@asim-gandu-phenchod]

Bravo. I have seen a lot of your tutorials and they are compact and well explained. Thank you so much

[@calebolojo5246]

This is by far the best video on TDD. Great job!

[@kunaljain0212]

I have seen your GraphQL course, React with Typescript course, Docker Course and now this!!! Can't thank you enough for such informative videos man!

[@CoreyGumbs]

Best tutorial ive seen so far on tdd. Thank you for explaining everything

[@nardove]

Thank you very much for the tutorial, easy to follow and engaging. The only comment I have is that I got a few eslint warnings, I did manage to fix them all after I finish the video but it did confused me a bit, so explaining that possible scenario could happen at the beginning would be great

[@franklinmoon2579]

You're so good! I've been hunting for a teacher who doesn't just 'do the code' but explains the why. 10/10 Keep it up

[@deepwebtube]

Yes, great stuff!! Impressed with your simple and lucid examples.

[@sreeananthakannan]

One of the best videos to understand react unit test.......

[@mayankchauhan6680]

Brother, before your video I was kind of afraid of TDD but now I am in love with it. I really liked this way of development. Thanks Bro

[@vikas28978]

Great video. Explanation are done with appropriate details

[@2271masoud]

thanks for sharing your knowledge. 1:09:40 can be written in a simpler form : className={ counterValue >= 100 ? 'green' : counterValue

[@SyamKumarVoleti]

Thank you for the wonderful crash course. Subscribed :)

[@veremox]

very nice, man! I struggled a bit with this lib until I realized it's logic is something like cascading css lol. helped a lot! thanks

[@jamoliddinz]

this is really good. finished in one sit and learnt a lot. thank you

[@kazeemkazeem3204]

This is pure gold. Thanks for this..

[@ssaarahj]

Best hour and a half of my life! This video deserves so much more attention.

[@haruwiki]

thank you for the video! by far the best RTL tutorial imo. Can you also make a video showing testing with async actions?

[@laithacademy]

Yeh sometime in the future!

[@OSCAR-CH]

Hey bro, awesome video! Very interesting and quickly to understand. Hope you make more videos about testing. Thanksss

[@hendridgonzalez1765]

Awesome course!!!! Recomended 100%

[@zaquielrodriguezarce2500]

Awesome video, so useful! thank you so much for this content. 10/10 explanation

[@NihilismEnjoyer98]

Thanks for the effort you've put in. Hope this video gets the attention it deserves :)

[@2CPT1MP]

That's some really high quality content

[@mugiwaranoDave]

Thanks. Been looking for a good TDD crash course in React for some time now

[@chandramouli39]

Superb video. Very clear and concise explanation.

[@123thebruno]

The first time I tried to understand TDD my brain cried, now things are clearer. try to make more videos on the subject, KZbin content is lacking about unit tests in web components. this video helped me a lot, thanks.

[@adityabhadange1631]

Thanks alot. This is wonderfully explained! 👍🏻

[@viveksharma-tt5nj]

thank you for explaining RTL in such a simple way, really appreciate you efforts.

[@thulioguirellehorta1382]

This is the best approach I had about testing, you convinced me to follow the TTD way of coding because it's pretty fun. Congratulations!!!

[@sharewithamar]

Thanks for the video. A series or course on complete react testing unit, end to end, integration will be helpful for learners.

[@mahendranath2504]

Thank you so much, I liked your channel, immediately subscribed, notified, and like, excellent channel to learn

[@programmertik2046]

Man why is he Underrarted !!!Awesome teaching bro !!!Loved it !Though i came here from Net NInja .

[@tonypeirson6282]

Excellent content. Subscribed 👍

[@pottaz]

Great tutorial. Especially for someone starting out with the React ecosystem. Can you make a video using React Typescript with context API, HOC and testing? Think that will tick a lot of viewers' boxes. That will basically be the full package. The way you describe everything is very clear and straight forward. Keep up the great work!!!

[@egzonberisha9906]

This is the best video for introduction to testing

[@yaaibaadi]

Thanks for this video, it really helped me, may you be blessed with peace and happiness

[@randomcell708]

Great explanation Laith. I know everyone has their own way of doing things, but you really explained the concepts well

[@damanvir_saini]

Thank you for this video. It is very informative. It really help me to understand the concepts.

[@havefun5519]

Thanks for the tut of TDD.

[@yogajourney9519]

Every single time I need to know something, Laith Harb has an amazing and recent crash course covering exactly what I'm trying to learn.

[@MrWildmore]

thanks, you put a lot of effort here, totally useful for me, great work!

[@MinhazRaufoon1567]

This deserves more views

[@hardikganatra2453]

Mann , This was so so amazing , you earned a sub definitely , Thanks

[@꿀꿀-j6y]

Thanks for this video! It helped me a lot

[@codingpaddy9308]

Excellent video, thank you!

[@diegazo5556]

This WAS very informative.Like and suscribed.

[@MyRc16]

Learning so much from you bro, thank you so much, second course i complete from your list n.n

[@Zeuchon]

The logic at approx 1:10 about the className could be solved without use of Template Strings like this: className={ counterValue >= 100 ? "green" : counterValue

[@mohamadilhamramadhan6354]

This is so awesome dude, thanks!

[@aadil4236]

Best react-testing tutorial. Would appreciate tutorial on testing async functions in react...

[@orubenlopes]

The is some very high quality crash course. Thank you very much for sharing knowledge with the community!

[@anakgoa0655]

thank you for this tutorial bro.. it's really help me, and I hope in the furute you will make another this Test tutorial like using Jest

[@KennyCarter90]

Good video, thank you!

[@MrR0gerrabbit]

This was an amazing, highly efficient crash course. Thank you so much!

[@chilly2171]

except multiple bad practises.

[@sinanyaman2007]

This is some quality content :)

[@tealle467]

fireEvent (42:00) didn't work properly, after some research i found the solution, i imported waitFor and had to write this to make it work waitFor(() => expect(inputEl.value).toBe("5"));

[@TylerpFarris]

Such a concise tutorial, thank you!

[@amiturfnd]

Really helpful, thanks lots bro :)

[@nicolaslp4630]

Nice explanation, thank you sir!

[@panicogalactico7379]

That was really good!! thanks!!

[@romanprokopets3693]

Thank you for this video, really useful and fascinating

[@kenlee2284]

it's really helpful! thanks.

[@emirsalihovic6616]

Well done!

[@cristhianjhlcom]

Hello, this video help me to understand a way better about testing with reactjs, thanks alot. I will subscribe :D

[@ahmedtohamy3258]

Great course !

[@miltonlopezmontero5440]

Teacher thank you, awesome video.

[@namesare4fools]

awesome video !!!! Subbed

[@rabinarayansahoo8695]

Superbly explained....

[@billgilmore8063]

this is a really good lesson thanks

[@niravpanchal6254]

Very Well Explained!

[@floppy_keyboard]

The lack of consistency on using double quotes, single quotes, semi colons, and no semi colons is driving me crazy. It's a good tutorial though, thank you!

[@NarcisMM]

This was a great video! Very informative and well explained. I learned quite a bit outside of just the react testing library, by virtue of how you coded the counter. I'll be sure to check out your other react videos after this.

[@josericardotrevino4984]

Amazing Tutorial!

[@MrNimbus3000]

Very correct and verbouse guide. This is exactly what i have looked for. A great thanks! You are master of explanation! Like, subscribe, arigato.

[@rezabozorgi311]

thank you. In some cases we need state and props to be here in our tests. for that cases which way should we supposed to pass?

[@polebk193]

good stuff!

[@vivarantx]

subscribed....great content

[@uguremirmustafaoglu40]

Is it a good idea to hold all the buttons and input elements etc. in the global scope to keep code dry?

[@benyamin4634]

thanks . but what is the different between this crash course and your ninja test crash course?

[@cliffordowusuamponsah9532]

Can you please make the source code available? @Laith Harb

[@thesanju95]

Hi, really helpful. What font are you using in the terminal and VScode?

[@sunnypark2597]

Thank you so much !

[@swistek00]

just for a correct react code const addToCounter = () => { setCounterValue((prev) => prev + inputValue); }; const subtractFromCounter = () => { setCounterValue((prev) => prev - inputValue); };

[@claudio513]

Hi, I'm kina new to the TDD and i m trying to follow along. Not a blocking problem but i was wondering if there was an addon or something is missing in my configuration because when i geto to (26:60) component.G intellisense doesnt recognize all the available query. thanks in advance for you re time

[@nrbrtbns]

Thanks for that video! Very helpful to a React testing newbie like me. Regarding the test for the title color (red/green): Isn't there an option to check the "real" color of the title instead of checking the class name? To me, the class name is an implementation detail. It is not guaranteed that a class name "green" will be mapped to a green title.

[@QuGhZx]

Thank you! I've noticed that the `instanceof Window` check fails when running `npm run test` when compared to running in the browser. It seems like the test script is passing a window object that is not an instance of the Window interface. This has forced me into the inconvenience of updating my type checks and doing unnecessary type casting.

[@sairaj5660]

Thank you so much ❤️

[@gian5138]

Instead of parseInt you can just do +e.target.value to convert it to number

[@nanonkay5669]

28:50 don't tell me I was the only one that caught this moment right here lmao, I see you

[@ginn1349]

It's really helpful. You earned a sub from me.

[@siva1033]

can I check if my functional component returns Null. if yes how do I do it. I tried but found nothing.

[@IkraamDev]

When you build the React project with create-react-app, are the data-testid’s removed?

[@laithacademy]

No, it doesn't, there is a way to do it, but it can get messy

[@lsagar]

@@laithacademy so do you ship the code to production with data-testid ?? Is it a good practice??