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.
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
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"));
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!!!
The first time I tried to understand TDD my brain cried, now things are clearer. try to make more videos on the subject, RUclips content is lacking about unit tests in web components. this video helped me a lot, thanks.
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.
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
The logic at approx 1:10 about the className could be solved without use of Template Strings like this: className={ counterValue >= 100 ? "green" : counterValue
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!
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.
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 ?
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.
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.
![Noob To Max With DRAGON REWORK In Blox Fruits [FULL MOVIE]](http://i.ytimg.com/vi/LnBMOinoOvA/mqdefault.jpg)
![Intro to React Testing [Jest and React Testing Library Tutorial]](/img/1.gif)
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.
Commeting so the algo helps this guy to get more viewers he deserves it.
Please keep posting more testing-related content. This is incredible and there isn't much testing-related videos out there!
Hello, this video deserves much more attention guys!
Yes baby
Yeah! You are right
Share
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 :)
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 ,
This is the best React test crash course on RUclips. Keep up the good job.
Your video deserves a lot more views! Damn, never been this hooked (no pun intended) on a long programming video.
I have many paid course that teach Unit Test on React. But this is by far the best tutorial that I have ever watched.
The best React Testing crash course :) Keep it up!
One of the best videos to understand react unit test.......
This is by far the best video on TDD. Great job!
Best tutorial ive seen so far on tdd. Thank you for explaining everything
thank you for the video! by far the best RTL tutorial imo. Can you also make a video showing testing with async actions?
Yeh sometime in the future!
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!
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
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
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"));
This is pure gold. Thanks for this..
thanks for sharing your knowledge. 1:09:40 can be written in a simpler form : className={ counterValue >= 100 ? 'green' : counterValue
Bravo. I have seen a lot of your tutorials and they are compact and well explained. Thank you so much
Awesome course!!!! Recomended 100%
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.
Yes, great stuff!! Impressed with your simple and lucid examples.
Best hour and a half of my life! This video deserves so much more attention.
Great video. Explanation are done with appropriate details
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!!!
That's some really high quality content
Thanks for the effort you've put in. Hope this video gets the attention it deserves :)
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
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
This deserves more views
this is really good. finished in one sit and learnt a lot. thank you
Thank you for the wonderful crash course. Subscribed :)
Superb video. Very clear and concise explanation.
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!!!
Thanks for this video, it really helped me, may you be blessed with peace and happiness
Man why is he Underrarted !!!Awesome teaching bro !!!Loved it !Though i came here from Net NInja .
Hey bro, awesome video! Very interesting and quickly to understand. Hope you make more videos about testing. Thanksss
Awesome video, so useful!
thank you so much for this content.
10/10 explanation
thank you for explaining RTL in such a simple way, really appreciate you efforts.
Thanks. Been looking for a good TDD crash course in React for some time now
The first time I tried to understand TDD my brain cried, now things are clearer. try to make more videos on the subject, RUclips content is lacking about unit tests in web components. this video helped me a lot, thanks.
Great explanation Laith. I know everyone has their own way of doing things, but you really explained the concepts well
This is the best video for introduction to testing
Thank you for this video. It is very informative. It really help me to understand the concepts.
Thanks for the video. A series or course on complete react testing unit, end to end, integration will be helpful for learners.
Thanks alot. This is wonderfully explained! 👍🏻
just for a correct react code
const addToCounter = () => {
setCounterValue((prev) => prev + inputValue);
};
const subtractFromCounter = () => {
setCounterValue((prev) => prev - inputValue);
};
Best react-testing tutorial.
Would appreciate tutorial on testing async functions in react...
Excellent content. Subscribed 👍
This is some quality content :)
Instead of parseInt you can just do +e.target.value to convert it to number
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.
Thanks for the tut of TDD.
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
This WAS very informative.Like and suscribed.
thanks, you put a lot of effort here, totally useful for me, great work!
Can you please make the source code available? @Laith Harb
The logic at approx 1:10 about the className could be solved without use of Template Strings like this:
className={
counterValue >= 100 ? "green" : counterValue
Mann , This was so so amazing , you earned a sub definitely , Thanks
Thank you so much, I liked your channel, immediately subscribed, notified, and like, excellent channel to learn
Thanks for this video! It helped me a lot
Excellent video, thank you!
can I check if my functional component returns Null. if yes how do I do it. I tried but found nothing.
This is so awesome dude, thanks!
Is it a good idea to hold all the buttons and input elements etc. in the global scope to keep code dry?
The is some very high quality crash course. Thank you very much for sharing knowledge with the community!
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?
This was an amazing, highly efficient crash course. Thank you so much!
except multiple bad practises.
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!
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.
Learning so much from you bro, thank you so much, second course i complete from your list n.n
Good video, thank you!
Great course !
Such a concise tutorial, thank you!
Hi, really helpful. What font are you using in the terminal and VScode?
28:50 don't tell me I was the only one that caught this moment right here lmao, I see you
thanks . but what is the different between this crash course and your ninja test crash course?
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 ?
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
Hi. I have doubt.Are you using jest library?
Nice explanation, thank you sir!
Thank you for this video, really useful and fascinating
best video around
Well done!
it's really helpful! thanks.
Superbly explained....
good stuff!
That was really good!! thanks!!
Very Well Explained!
Really helpful, thanks lots bro :)
why we are not using jest
Please make testing video like backend node express and mongo
is this an example of Integration Tests? I'm really confuse with the terms
What is with the "__test__" directory? Why not "tests" or just have it in the same directory as the component it is for?
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.
Can you please make a video of testing next.js. Thank you
Teacher thank you, awesome video.
you made my day bruh.
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.
Thank you so much !