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 ,

[@AlgorithmDoctor]

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

[@rohitv3955]

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

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

[@raulmartinezjr7708]

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

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

[@calebolojo5246]

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

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

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

[@sreeananthakannan]

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

[@asim-gandu-phenchod]

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

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

[@CoreyGumbs]

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

[@hendridgonzalez1765]

Awesome course!!!! Recomended 100%

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

[@kazeemkazeem3204]

This is pure gold. Thanks for this..

[@2271masoud]

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

[@havefun5519]

Thanks for the tut of TDD.

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

[@jamoliddinz]

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

[@mugiwaranoDave]

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

[@vikas28978]

Great video. Explanation are done with appropriate details

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

[@ssaarahj]

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

[@deepwebtube]

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

[@MinhazRaufoon1567]

This deserves more views

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

[@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"));

[@2CPT1MP]

That's some really high quality content

[@sharewithamar]

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

[@OSCAR-CH]

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

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

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

[@NihilismEnjoyer98]

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

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

[@aadil4236]

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

[@SyamKumarVoleti]

Thank you for the wonderful crash course. Subscribed :)

[@chandramouli39]

Superb video. Very clear and concise explanation.

[@uguremirmustafaoglu40]

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

[@randomcell708]

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

[@siva1033]

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

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

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

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

[@cliffordowusuamponsah9532]

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

[@zaquielrodriguezarce2500]

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

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

[@viveksharma-tt5nj]

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

[@programmertik2046]

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

[@tonypeirson6282]

Excellent content. Subscribed 👍

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

[@manjunathdevendran1516]

So far its intersting. Question: if your functional component does not import React component, test fails with Reference Error. Why does a functional component need React import though it's not used ?

[@thesanju95]

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

[@swistek00]

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

[@diegazo5556]

This WAS very informative.Like and suscribed.

[@benyamin4634]

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

[@sinanyaman2007]

This is some quality content :)

[@MrWildmore]

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

[@gian5138]

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

[@mohamadilhamramadhan6354]

This is so awesome dude, thanks!

[@adityabhadange1631]

Thanks alot. This is wonderfully explained! 👍🏻

[@mahendranath2504]

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

[@BonBonInoc]

is this an example of Integration Tests? I'm really confuse with the terms

[@gmmkeshav]

why we are not using jest

[@codingpaddy9308]

Excellent video, thank you!

[@꿀꿀-j6y]

Thanks for this video! It helped me a lot

[@arcan762]

What is with the "__test__" directory? Why not "tests" or just have it in the same directory as the component it is for?

[@pottaz]

Think it is less likely for you to reference those test files if it is using "__" in front of the test folder. Also when looking at the folders you can easily differentiate what is part of the component and what is part of the tests for the component.

[@damanvir_saini]

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

[@hardikganatra2453]

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

[@orubenlopes]

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

[@MyRc16]

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

[@ahadalichowdhury24423]

Please make testing video like backend node express and mongo

[@ahmedtohamy3258]

Great course !

[@reikoleci4303]

best video around

[@KennyCarter90]

Good video, thank you!

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

[@vinodailawadi1475]

Hi. I have doubt.Are you using jest library?

[@LPeraltaV]

Hi, thanks for this video, so much value in here! I would like to ask how can I test a component that receives props/is connected, I just keep in getting that the app should be wrapped in a provider which it already is, so I don't know how to simulate that behavior. Thanks in advance.

[@emirsalihovic6616]

Well done!

[@TylerpFarris]

Such a concise tutorial, thank you!

[@filippetkovski9957]

Can you please make a video of testing next.js. Thank you

[@panicogalactico7379]

That was really good!! thanks!!

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

[@polebk193]

good stuff!

[@rabinarayansahoo8695]

Superbly explained....

[@MrR0gerrabbit]

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

[@chilly2171]

except multiple bad practises.

[@amiturfnd]

Really helpful, thanks lots bro :)

[@abhishekvenu]

Hey, This is the best video, Can you please add async call using fetch or axios, Redux, Middleware and testing static images or logos

[@codekat153]

Great video! However, there is a faint ringing in the background that made it hard to listen and I ended up actually using subtitles instead of listening for the second half of the video.

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

[@nanonkay5669]

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

[@szymonpopielarz7701]

test for react with redux app maybe for next tutorial?

[@dayumnson9769]

Will there also be testing for the nuxtjs app or should one just try to follow and mimic the steps mentioned here in react for nuxtjs?

[@laithacademy]

No, I'll make one for Nuxt as well. Sorry for the delays. These videos take a very long time to make and couple that with a full-time job, I can only realistically pump out one a week.

[@dayumnson9769]

no worries, was just slightly confused why there is a react testing video after the nuxtjs course. REALLY happy that you will cover testing for the nuxt app! (So I will stop looking around in youtube and wait for your video) Thanks for your efforts!!

[@niravpanchal6254]

Very Well Explained!

[@nicolaslp4630]

Nice explanation, thank you sir!