This is good thanks. I appreciate how you show the intermediate errors you faced. I'd love to learn more about other matchers. Snapshots will be a bit brittle in my situation because I'm exploring big changes. Narrower expectations would allow me to reduce synthetic test failures under heavy changes. I'll check out your other vids. Thanks again.
Yes! Snapshot tests can be brittle.... I don't know if this is helpful or not, but on September 3, 2021 9:00am CST I have one of my friends coming on my Twitch Channel (twitch.tv/selfteachme) to explain testing React Hooks. 🤩
Thank you for the video! easy to follow and understand. :) I was wondering if you have plans to cover testing components that use React.Lazy and React.Suspense?
Hi! The music in the background makes it really hard to focus on learning the material. Would it possible to upload the same videos without background music? Anyway, thank you very much! :)
It's the font. I believe I'm using Dank Mono. It has different ligatures so that certain characters are rendered differently. -- For example -> gets turned into an actual arrow. Less than or equal to (=) have their own characters too.
Great video I learned a lot! One question: why do you make a separate test to check if the component mounts? do all other tests not fail anyway if the component can not mount?
Jesus // Great question! Part of testing is trying to narrow down exactly where your code is breaking down. I've found that the component mount test is an easy way to see if there's an error in the component code itself vs the component's functionality. The best real-world, use case I've found for this test: I was brought into a project that had very little, if any, tests and the app was crashing. I quickly dropped this "component mount" test on every component. Very quickly, that one test helped me identify where the problematic component was. From there, I could fix the component and expand out my test suite.
Sure! I’m using the Cobalt 2 theme and (I think) I’m using the Fira Mono font here. Recently I’ve been using Dank Mono instead. I like the ligatures in Fira but I like Dank’s italics better
thank you for this video, I did not get one thing you have very small content on tab like something , else whta if i have whole page ?? do i have to copy that in testing file ?
My VSC by default makes a save for a file after I switch to any other file. It invokes the tests to run every single time when I switch between files. Should I change those saving settings? Have you changed?
I have it set up to re-run a test anytime a file changes on save. I think the settings you have are fine unless of course it starts causing problems in your workflow. - like tests are constantly failing because you switched tabs instead of saving when you’re ready for the test to run.
Hey, I'm halfway through the video. I just have one issue with my react application. I'm using useReducer to manage my state, but I can not destruct anything from the global state in my functional component. In my test it says cannot destructor the property as it is undefined. The application runs fine in the browser but the test fails. can you tell me what I'm doing wrong..??
@@SelfTeachMe Sure, why not here's the link github.com/aadil42/wordCampEvents The name of the test file is calendar.test.js. and the application displays past and future events of the WordCamp events. Thank you so much for this I really appreciate it. It is not every day you meet nice people on the internet.
I wrote 54 tests in last month and they are still failing ..... :( This is one of the most challenging task that I have undertaken in my professional career yet
Ugh. I know that’s frustrating. When I’ve had a lot of failing tests, I’ve tried to focus on one test at a time. Sometimes (if you’re lucky) it’s one thing that’s causing everything else to fail.
@@SelfTeachMe Thankyou so much for the tip. By the way, I have been thinking to ask you a rather broad question, hope you can help me here. "How to decide what to test for a enterprise real-time webapp?" Are there any good resources, books on this topic. I find it hard to decide what and how to test
Start by thinking about how the user interacts with the app. If you can list out all the things they do or all the things they expect to see, those are the things you want to test. Start by thinking through the happy path. If everything goes smoothly, this is what should happen. Then, start thinking through the problems - if the user didn’t fill out a form field or if their verification code doesn’t match.
Sure thing! Happy to answer any other questions you might have. I know testing is hard and confusing and frustrating all wrapped into one. But, I do believe at the end of the day, it is worth it because you can have the confidence your code is working.
@@SelfTeachMe It would be great if you could do a series on Next.js in-depth with typescript ... also would be interested in React Query, React Hook Forms, Framer Motion, Vue….etc. 😇
I like the way you “teach” in your videos. Step by step. Thanks
🙌🏻 Glad you found it helpful!
This save my day at work, i learned here to write my first react test, Thank you so much.
Woo Hoo! Love hearing that!
Nice tutorial! Your positive energy makes me always want to learn more and more. Great teaching.
Thanks! Love this!
This is good thanks. I appreciate how you show the intermediate errors you faced. I'd love to learn more about other matchers. Snapshots will be a bit brittle in my situation because I'm exploring big changes. Narrower expectations would allow me to reduce synthetic test failures under heavy changes. I'll check out your other vids. Thanks again.
Yes! Snapshot tests can be brittle.... I don't know if this is helpful or not, but on September 3, 2021 9:00am CST I have one of my friends coming on my Twitch Channel (twitch.tv/selfteachme) to explain testing React Hooks. 🤩
Thank you so much. Great step-by-step tutorial.
Thank you for the video! easy to follow and understand. :)
I was wondering if you have plans to cover testing components that use React.Lazy and React.Suspense?
That's a great suggestion! I'll add it to my list.
Great video! Thank you so much! I like your positive energy 😊👌
Thanks! Appreciate that!
That was a well done tutorial. Great job.
Hey, Thank you! It's really detailed made. Maybe after this video I'll use the console.log less often :D
Haha! I still heavily rely on console.log.
Hi! The music in the background makes it really hard to focus on learning the material. Would it possible to upload the same videos without background music? Anyway, thank you very much! :)
Thanks for the feedback. I'll keep that in mind.
I haven't thought about the music till I read the comment.. anyways, great content 👌🏻
What plugin or setting is making the equal signs in your comment titles into solid bars?
It's the font. I believe I'm using Dank Mono. It has different ligatures so that certain characters are rendered differently. -- For example -> gets turned into an actual arrow. Less than or equal to (=) have their own characters too.
@@SelfTeachMe Awesome thanks for that, and thanks for the video!
Great tut! Thanks for all these errors in the video, so it was like "real life" example
Awesome! Thanks for comment!
Thank you, subbed!.. more test and testing frameworks? :P ...
Thanks! …. If you’re looking for more, check out Cypress. All the tests are run in browser, exactly as the user would see and interact with your site
Awesome, Emi!
Thanks!!
Your vscode setup looks awesome. What is the italic font family you use?
Thanks! I'm using Dank Mono: gumroad.com/l/dank-mono
Great video I learned a lot! One question: why do you make a separate test to check if the component mounts? do all other tests not fail anyway if the component can not mount?
Jesus // Great question! Part of testing is trying to narrow down exactly where your code is breaking down. I've found that the component mount test is an easy way to see if there's an error in the component code itself vs the component's functionality.
The best real-world, use case I've found for this test: I was brought into a project that had very little, if any, tests and the app was crashing. I quickly dropped this "component mount" test on every component. Very quickly, that one test helped me identify where the problematic component was. From there, I could fix the component and expand out my test suite.
@@SelfTeachMe Thanks for your response! Now it makes perfect sense.
Great tutorial. Thank you. Could you share your VS Code theme and font family :)
Sure! I’m using the Cobalt 2 theme and (I think) I’m using the Fira Mono font here. Recently I’ve been using Dank Mono instead. I like the ligatures in Fira but I like Dank’s italics better
thank you for this video, I did not get one thing you have very small content on tab like something , else whta if i have whole page ?? do i have to copy that in testing file ?
If you’re using the same implantation, you should be able to add as much content as you want. Then the same testing file should work
Great tutorial.
Thank you!
Thanks for sharing well explained
Yeah!! Glad you found it helpful.
Thanks for share your knowladge
Happy to!
My VSC by default makes a save for a file after I switch to any other file.
It invokes the tests to run every single time when I switch between files.
Should I change those saving settings? Have you changed?
BTW thanks for the video, i followed it from start to finish and got a general grasp of what is going on in testing react components. Thanks to you!!!
I have it set up to re-run a test anytime a file changes on save. I think the settings you have are fine unless of course it starts causing problems in your workflow. - like tests are constantly failing because you switched tabs instead of saving when you’re ready for the test to run.
@@SelfTeachMe Yes, this is exactly what I mean - because of that save-on-tab-switch option, tests are getting run when I don't want them to be run.
Hey, I'm halfway through the video. I just have one issue with my react application. I'm using useReducer to manage my state, but I can not destruct anything from the global state in my functional component.
In my test it says cannot destructor the property as it is undefined. The application runs fine in the browser but the test fails. can you tell me what I'm doing wrong..??
Hey Jon. Off the top of my head I’m not sure what the issue is. Can you send me a GitHub link? I’m happy to take a look.
@@SelfTeachMe Sure, why not here's the link github.com/aadil42/wordCampEvents
The name of the test file is calendar.test.js. and the application displays past and future events of the WordCamp events.
Thank you so much for this I really appreciate it. It is not every day you meet nice people on the internet.
it's been 3 days this is a kind reminder, in case you forgot about it.
Thank you.
is this hooks based or component based ?
Component based. But a testing video with hooks is a good idea.
@@SelfTeachMe I don't how to test in hooks..can you help me on that?
I wrote 54 tests in last month and they are still failing ..... :(
This is one of the most challenging task that I have undertaken in my professional career yet
Ugh. I know that’s frustrating. When I’ve had a lot of failing tests, I’ve tried to focus on one test at a time. Sometimes (if you’re lucky) it’s one thing that’s causing everything else to fail.
@@SelfTeachMe Thankyou so much for the tip. By the way, I have been thinking to ask you a rather broad question, hope you can help me here.
"How to decide what to test for a enterprise real-time webapp?"
Are there any good resources, books on this topic. I find it hard to decide what and how to test
Start by thinking about how the user interacts with the app. If you can list out all the things they do or all the things they expect to see, those are the things you want to test. Start by thinking through the happy path. If everything goes smoothly, this is what should happen. Then, start thinking through the problems - if the user didn’t fill out a form field or if their verification code doesn’t match.
@@SelfTeachMe That makes sense. I will start with use-cases and happy paths. Super thanks (Y) you are a Diva :)
Sure thing! Happy to answer any other questions you might have. I know testing is hard and confusing and frustrating all wrapped into one. But, I do believe at the end of the day, it is worth it because you can have the confidence your code is working.
You are awesome, I like your writting code
Thanks!
qağa sen nağarsan burda
I just found your channel...!
Great Videos.
Awesome! Thanks Manish! ... also have to take requests if there’s a specific topic you’d like me to cover ☺️
@@SelfTeachMe It would be great if you could do a series on Next.js in-depth with typescript ... also would be interested in React Query, React Hook Forms, Framer Motion, Vue….etc. 😇
@@manishthomas341 Yes! I can definitely cover some of those! I absolutely love React Hook forms, Next.js, and Framer Motion
@@SelfTeachMe Wow…..Amazing
if possible you can add CSS Flexbox, Grid and CSS-in-JS to the list. ✌️
@@manishthomas341 😂 will do! In the meantime Wes Bos has an excellent series (free) on flexbox and CSS grid
love you
Thanks!
It could be nice to have you in our videos! :)
Maybe one day!
github ending point not updated
Ahh! Thanks for pointing that out.
UDAJ SE ZA MENE
😁 You're too kind
These tests are useless. You should not make testing video, you are teaching the wrong way do testing