React Async Testing using React Testing Library for Beginners: React.js Testing Tutorial #4

[@ricardocosta4663]

I'm very sad that this kind of videos don't have more views (at the moment 373 views, 6 days after being release). This is such an important topic, and one that I have dificulty in. I hope you continue this series, because it's helping me a lot. Thank you Bruno for time and effort to make such quality videos :).

[@BrunoAntunesPT]

Thank you very much for your support Ricardo ❤️❤️ it means a lot to me ❤️❤️ Well... There are multiple reasons for the low numbers, but I was expecting that more or less for this testing series😅 Usually I do videos not for the views, but about topics I think are important to share..... but of course having nice numbers motivates you more than lower numbers, I'll not deny that 😅 I think, as you said, probably not everyone thinks testing is an important topic Two: people don't like me or the way I present stuff, which is very possible 😂🤣 Three, it's August, and the last thing people want to do on holidays is listening to my annoying voice 😂😅 Fourth, I know my thumbnails are very bad 😅😅 I have to improve them

[@c-far7050]

@@BrunoAntunesPT hi bruno. Of all the reasons.. second is absolutely wrong. Thankyou so much for the awesome content. Stay blessed.

[@sangtv_AK]

This series is amazing. Thank you for sharing your knowledge.

[@BrunoAntunesPT]

I'm very happy to read your comment 😊 thank you ❤️

[@khalilchermiti6200]

great video Bruno 👏, I'm going to watch the whole playlist to solidify my knowledge with react testing.

[@danieljing9319]

this series of video should be seen by more people. very helpful!

[@washingtoncampos6862]

hello bruno, i don't know if you remember me but i was following you since the beginner of your channel, it's always great to see awesome people like you doing this amazing content, keep up the great work man.

[@BrunoAntunesPT]

Of course I remember you Washington 😍😍 I have to thank you for all the support you gave me during this last year and a bit ❤️❤️ I really really appreciate all the support my friend ❤️❤️

[@BrainwavesPotential]

Man, this series is truly awesome. Thank you for taking the time to share some of your knowledge with us!

[@mooder3247]

So nice waiting for more content about nextjs😍

[@BrunoAntunesPT]

Thank you ❤️😍 the last few testing videos in this series will be dedicated to nextjs getServerSideProps and GetStaticProps 😊

[@alpsavasdev]

Love your passion and talent in teaching. I really appreciate your tutorials, they are quite insightful.

[@sayedalimousavi6091]

Liked your cool videos and subscirbed to your awesome channel. Keep up the good work, sir. Thanks alot.

[@zakariaamagdy2941]

You are awesome Bruno. loved your teaching style

[@albertszymanski7177]

Excellent series. Besides the content which is awesome, you seem to be a very amiable and cheerful person, which makes watching and learning even more enjoyable.

[@vittoriomorellini1939]

Very good Bruno. Video fantastic

[@miw879]

This issss soooooooo excellent!!! ❤❤❤❤❤❤❤❤ thank you so much for such an awesome tutorial

[@dhahn123]

obrigado Bruno! can you do a series on redux testing w/ react native testing library?

[@ismoilshokirov]

God bless you, Mr. Bruno, thank you for sharing your knowledge)) I have a small question: Should I use NextJS in projects where I don't care about the SEO part? Ex. for admin panels Because I feel more comfortable with NextJS. Also, I think NextJS apps run much faster than regular "create-react-app"

[@BrunoAntunesPT]

Thank you 😍 Of course, nextjs is not only SEO 🙂 nextjs will give you bundles per route, you'll have the next js image component and many many other benefits 🙂

[@b1chler]

Hey! Thanks for the great tutorial! Do u also use storybook for testing?

[@BrunoAntunesPT]

Thank you very much Manuel ❤️❤️ I use storybook and I use my Demo components that I show on storybook to render them on my tests. Basically what I show on storybook will have tests, because they are the same "container" If you have lots of questions about it, I can create a simple repository when I'm back in London showing how to do it 😊

[@b1chler]

@@BrunoAntunesPT would be cool to see! Also, do u think it makes more sense to import the storybook component in your jest tests? what are the long term benefits/drawbacks? Thanks!

[@BrunoAntunesPT]

Like everything in life, nothing is perfect, so it depends on what you value the most and also what you want to avoid while developing 😊 everybody and every team is different, so what might be amazing for me, might be something very annoying for you, or someone in your team 😊 Basically I only do it when I'm creating component libraries or components to be reused quite a lot across one or multiple apps 😊 if it's a component with a sole purpose, usually I don't do it - that being said, sometimes if the component is very complex it might make sense, because it works as documentation to the next developer touching that component having the component with all the use cases in storybook 😊 The benefit is that your demos are always tested. You change the demo and your tests will fail (if you break what you were testing) - it also allows you to write the demo and testing container in one go, avoid duplication - - - now... depending on your goals this can be amazing, the best thing ever or Very VERY frustrating, depends on the perspective you look into it 😅😅 I can discuss this deeper if you want 😊

[@leoamato6113]

Soooo good 👍🏻

[@keiji0075]

I have a question . if active = true the useState will change bigenough state ,then reRender again. then active will be true again , and component will render again and again. not stop is it right?

[@SerhiiNesterov]

amazing !

[@janpawedwa4590]

At 16:48 you mention that after the test will run, the component gets destroyed? Why? Does every test "throw out" the tested component when it is finished with the testing?

[@BrunoAntunesPT]

After your test finishes, the component will be unmounted Observation: A new component will be mounted for each test so you have a fresh instance per test you run. Otherwise the next test would start where the old one left off, which would be a nightmare to maintain 😅 Now... Because you changed the state of an unmounted component react shows you that error, because that means you have code running even after the component was destroyed - a very common source is a setTimeout or a very slow API call 🙂

[@janpawedwa4590]

​@@BrunoAntunesPT Thanks for answering! Makes total sense to start with a fresh component for each test, I don't know why I assumed otherwise. I am looking forward to more videos in this series, especially the nextjs one!

[@BrunoAntunesPT]

@@janpawedwa4590 I'm happy I could help 🙂 I'm literally now passing my videos from the SD to the computer so I can start to edit 🙂 Monday morning you'll have a video on how to test forms and the video after that one will be nextjs 😍

[@Kei-iz6uv]

Thanks!

[@BrunoAntunesPT]

Thank you Kei ❤️

[@benevans1377]

Hey Bruno, off topic question but I couldn't find the answer online: how do you make a database connection on the nextjs startup function without creating a whole new custom server (which loses benefits like ssr) or having a custom server but keeping those benefits the next js startup function has?

[@BrunoAntunesPT]

(if I understood your question correctly) this is what you are looking for: github.com/vercel/next.js/blob/canary/examples/with-mysql/lib/db.ts Let me know if I understood correctly what you wanted 😅😊

[@benevans1377]

@@BrunoAntunesPT yeah that's fantastic thanks i read through the docs and there's a postgres package that's like that, the only thing is I can't use an orm but that's not too bad, thanks :)

[@BrunoAntunesPT]

You can use ORMs like prisma or typeorm if you want 😊 or you mean, you can't use as a rule at your company? 😅

[@benevans1377]

@@BrunoAntunesPT The with-mysql example uses a module called 'serverless-mysql', can you use the module with ORMs? it seems like you can only pass connection strings to them :(

[@BrunoAntunesPT]

They also have examples using prisma, an ORM, over here: github.com/vercel/next.js/tree/canary/examples/with-prisma At the time I just gave you one of the examples they have in their repository, but that examples folder has examples for pretty much everything 😅😊

[@usmanshahid8529]

Bro i did not understand why we use to test something ,like in your case you are testing the button which increments and decrements ,but this button is working fine then why there is need to test that button ?? Can you explain bro

[@BrunoAntunesPT]

I'm assuming your question is about automated testing in general and not something specific to this video, right? If I'm wrong, please do let me know =) I'll try to answer why do we need tests and why they are important in this comment. From my experience tests are very very important because of 3 main factors (there are more): - Team size (big team) - project complexity (not project size in files, but how complex are the requirements, meaning your components have tons of edge cases to handle) - for how many years will that project run and on that time what will be the team rotation All those factors justify tests in order to give current devs in the project and new devs in the project the confidence to be productive. If you are alone or with a couple of other developers that know every single line of code in the project, I can understand your sentiment, even tho, in the long run manually testing will be more expensive than making the computer run the tests for you automatically 😊 Like any other investment, you pay upfront and then collect the dividends in the future. If you are not investing much or the project is not worth it, then the dividends you'll receive are not that high, I admit that😊 Now image that you join a new project that you don't know, the project is very very complex with lots of edge cases, how do you know all the use cases to manually test? It's pretty much impossible to have confidence in your changes for the next 3 or 4 months until you are familiar with the project, but even at that time, every change you do, you have to manual test the project, which can account to few hours a week of manual testing alone, right? In my projects I have some people putting code in production in their first day. I can affirm that without tests that would be almost impossible, because myself or the new devs wouldn't have the confidence for that brave decision 😊 automated tests give us the confidence that all the old stuff is not broken by the new change. On top of that, nobody needs to memorize all the edge cases to tests, the tests know and do those edge case testing 😊" Does this help? 😅😅😅

[@usmanshahid8529]

@@BrunoAntunesPT Thanks bruno that helps alot ,my question was general ❤️👋

[@BrunoAntunesPT]

That's awesome 😍😍 if you have any other question, let me know 😉

[@usmanshahid8529]

@@BrunoAntunesPT sure bruno ♥️