Introduction to Testing: Concepts for Beginners - React.js Testing Tutorial #1

[@ronodipbasak4524]

Hell!!! I've been looking to learn automated testing....... It's like Bruno knows what I want to learn right now. Thanks Bruno!! You're the best tech youtuber! Ever!

[@BrunoAntunesPT]

WOOWW!!!! Thank you for your kind words Ronodip =D

[@davidhuamacctochate1913]

Thanks Bruno, this is a theme that i was looking for.

[@BrunoAntunesPT]

Awesome David!

[@ricardocosta4663]

The best portuguese tech youtuber strikes again :). This is such a difficult and important topic for me, but beacuse ins't "cool" I find little resources, besides easy ones. I hope you can help me to improve the quality of my projects :). Best regards.

[@BrunoAntunesPT]

Wow, thank you Ricardo!

[@ricardocosta4663]

@@BrunoAntunesPT Yes is very sad, but your teachings are great, and you work with technologys that I love, hope one day will be a full react/next já developer, for now I’m a react native/laravel developer.

[@BrunoAntunesPT]

Thank you Ricardo 😍 In case you are already doing react native, the transition to react and nextjs should be pretty easy for you 😊 To be fair, I don't know how Portugal is right now in hiring processes and those things. But... Theoretically speaking everyone should have no fear hiring you to do a nextjs project if you have react native and laravel experience - at least I would hire a profile like yours any day of the week 😍

[@gambit3904]

Keep'em coming, friend! Really like react, but I look forward for the next.js videos :D

[@BrunoAntunesPT]

Thank youuu!!!! We will touch next.js testing as the last 2 or 3 videos in this series =D

[@DEV_XO]

Nice, saving it for later mate! Hope we can see the full serie soon or later!

[@monicaarnon6237]

This series is so incredibly helpful! Thank you so, so much for sharing your knowledge. What a fantastic teacher you are. I know I'll be returning to these videos again and again like a favorite book. I would love to ask a question about test "location" if you will, as I shift more to a perspective of testing from my user's point of view as you recommend. I have several components in my Next JS app, all of which are involved in the create flow of a widget and I want to write a happy path test for that flow. These components are located in ./components, do not know about each other individually, and are direct children of an index page in ./pages. I started out with my old pattern of creating a test for ./components/ComponentA/ComponentA.test.js (ie "create a test file for pretty much every single component") and in that test I have a describe("When a new widget is being created"). But I quickly realized, Wait a second... if I'm testing the "create a new widget" flow, I'm going to end up writing that same describe statement in ComponentB and then ComponentC, both of which are involved, but neither of which are available directly in ComponentA. And that seems kind of... wrong. And spaghetti-like. I don't think I want my future teammates to have to find "When a new widget is being created" tests all over the darn place. Right? So if I'm on the right track here, would the recommendation be - for an integration test such as this - to instead create it at ./pages/widget/index.test.js? It seems to make more sense since all the components involved are available there. Which then leads me to think that tests at the component level could be much more granular - true unit tests if you will. I'd be very grateful to hear your feedback about this if you have the time. 🙏🏻

[@braydoncoyer174]

Super helpful! Can’t wait for the videos related to testing Next.js - there’s a big void when it comes to testing with Next!

[@BrunoAntunesPT]

Thank you =D I completely agree, there's a huge void in Next.js content related to tests. Sadly for you, those will be the last 2/3 videos on the series =D

[@evaraymond1664]

Excited for this series. Great job and thank you.

[@BrunoAntunesPT]

Thank you Eva 😍

[@fardeenpanjwani9724]

Love this video ❤️. Really looking forward to the series!

[@BrunoAntunesPT]

Thank you Fardeen 😊🙏

[@vidumini23]

Woow Bruno. Great Explanation. Thank you.. Your contents are great and supportive as always.

[@BrunoAntunesPT]

Thank you my friend! =D

[@purdeychambraud4620]

So cool to make a new serie about tests ! Many thanks Bruno 🎉🙌🥳

[@BrunoAntunesPT]

😍😍😍 You are very welcome my friend 😊 If you need something specific regarding testing let me know, because I'm actively recording videos for this series 😊 I finished recording video 4, now I have to edit it 😅😊

[@purdeychambraud4620]

@@BrunoAntunesPT many thanks for your message ! I am pretty sure I'll have all the info in your course from what I've seen from the first video! And I really liked the comparison you've made with the car industry to help us understand the difference between tests type, really relevant ! 👌

[@BrunoAntunesPT]

I'm glad you liked the comparison 😊 it took me quite a while to come up with that one 😅😅 when I'm learning I'm always making those comparisons from abstract computer science topics to real world stuff I can visualize, like cars, bikes, banks etc 😅. I thought I was alone on that, but the more I speak with other developers the more I understand they also benefit from those comparisons to real world stuff they already understand and can visualize 😅❤️

[@curiousprogrammer90]

Looking forward! Some more advanced use cases would be welcome! :)

[@BrunoAntunesPT]

I'll give you a lot of my own mistakes during this series, so you can avoid repeating them. Like I did with the Axios example :)

[@mario1231321]

I wish I’d met your channel a few hours ago. Good content and clean speech, keep it up.

[@tomlikeabomb6706]

Really looking forward to this!

[@BrunoAntunesPT]

Thank you :)

[@rofazayn]

Love your videos Bruno!

[@BrunoAntunesPT]

Thank you my friend!

[@sergiob3698]

Hi Bruno, long time no see. Im glad to new video series. You always share very good concepts!

[@BrunoAntunesPT]

Thank you very much Sergio 😍😍

[@bernardamofah4524]

Been waiting for this series

[@BrunoAntunesPT]

I guarantee the wait will be worth it ;)

[@DanhWasHere]

Excited for this series! Great examples of real-life cases where too-specific tests are unproductive and so far this is the best description of what the difference is between the levels of tests and how important they are -most people just read from a standard definitions, and don't give their opinions about what ratios of testing should be

[@BrunoAntunesPT]

Thank you very much Danh - I will give my opinion and stories about common mistakes during this series. And.... Trust me, I have a fair share of common mistakes I did myself, like the axios one I explained in this video =D

[@_sumitdey.exe1]

back with a bang 🔥

[@BrunoAntunesPT]

=D Thank you Sumit!

[@_sumitdey.exe1]

@@BrunoAntunesPT to be honest, I always feel that testing is not that much necessary.. manual testing during developing the project is enough... I know I am wrong but I have not found enough motivation to learn testing. Hopefully after this series, I will never skip the testing part of my projects Thanks

[@BrunoAntunesPT]

From my experience that depends on 3 main things (probably more, but it's still 10am in the UK, so my brain is not at 100% functional yet 😂😂) : - Team size - 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? 😅😅😅

[@_sumitdey.exe1]

😲 You never disappoints.. thank you

[@stanleychukwu7424]

@@BrunoAntunesPT wow!!!! nice response!

[@sumukhakb2701]

Thanks for finally making this series. 😁😁😁

[@BrunoAntunesPT]

Hope you enjoyed it!

[@j.p.8595]

great content mate, definitely gained insight with this one

[@brucewayne4160]

Best teacher ever.

[@BrunoAntunesPT]

😅😅😅 Thank you Bruce ❤️

[@suktheman]

positive vibe, super informative! no reason not to push like button! thank you for the quality video!

[@reasonforge9997]

For some kinds of tasks I think many unit tests make tons of sense and in those cases it usually makes sense to write the unit tests before you write the unit that satisfies them. However for web applications this is not usually the case since much of the code is about interfacing with other components including client, server, database, and even humans through the UI. Since this is a Jest course I can understand the bias toward integration rather than unit tests. But still when I go to work on a side project I have where I am doing calculations for indicators that make trading decisions in currency markets I find it very important to write many unit tests to make sure the math is right and to write the tests first which helps me design the API that delivers the calculations (as opposed to writing the API and then later figuring out its hard to use when I try to test it).

[@BrunoAntunesPT]

100% agree with you 🙂 there is a time and place for both. In the scenarios you described I would also add a ton of unit tests 🙂 but in front end apps I tend to do lots more integration than units 🙂

[@LucianoSoares85]

Hey Bruno, great video as always.

[@BrunoAntunesPT]

Muito obrigado Luciano :)

[@romanprokopets3693]

Thanks for the idea of creating such a useful content) I’ve followed you since next.js playlist. Go on please)

[@BrunoAntunesPT]

Thank you very very much Roman 😍😍😍❤️

[@oleksandr5128]

I am looking forward to learning a lot of new stuff!

[@BrunoAntunesPT]

That's Great! Thank you Oleksandr =D

[@BrunoPereira-mo6kg]

Hey Bruno, thank you a lot! Looking forward to see how to test nextjs static and server side props 😁

[@BrunoAntunesPT]

Obrigado Bruno =D

[@elhamkiyani733]

Bruno I really really enjoy your video your explanation! thanks

[@BrunoAntunesPT]

Thank you 🤗

[@tomihq]

Very good explanation. I've never understood testing concepts as easily as you shared them with us. One thing I don't really understand is the benefits of mocking. What's the reason for mocking a functionality that can be changed in the future? How can I notice if the test continues to pass but the mocked function has changed its functionality? Like this: Function A returns some data as this {ok: boolean, user: {id: number}} Let's say that Function B made a mock of function A at day 1. Function B: if the data is ok, the response of function A will be as {ok: boolean, user: {id: number}}} so function B response return {validUser: true, user: USER RETURNED BY FUNCTION A} But what happens if Function A at day 2 doesn't return anymore {ok: boolean, user: {id: number}} and now it's returning {ok: boolean}? How can I notice this from Function B tests that required function A to return the response to the client? I don't know if I explained it well. P.S: I don't have a good level of english :( Kudos, and great video.

[@khatunashaveshova742]

Thanks Bruno. Great and useful tutorials !

[@BrunoAntunesPT]

Thank you Kathuna 😊😊

[@sinaebr7337]

wooow after more than one year :))) finally! hooraaa

[@BrunoAntunesPT]

I know!! It took me quite a while to have at least 5 or 6 weeks where I'll be 100% sure I can produce videos =D

[@CodaJohnPaul]

Agree with everyone else, thank God for you Bruno! :)

[@BrunoAntunesPT]

Thank you 😍😍

[@mihirsuchak5659]

Thank you for this course, excited :) Not sure whether you are gonna add it still requesting if not and if possible for you to add 1) testing with context 2) testing with redux 3) axios mock root level best setup and it’s tests The main thing is here how all these things work together, how we can do it’s setup and some sample tests will work. Thank you

[@BrunoAntunesPT]

Thank you mate ❤️ Your number 3 request, will be released Monday, I'm now starting to edit it during my lunch time 😅 Number 1 and 2 are very very similar, I'll cover number 1 later in the series with a video only about context 😊

[@mihirsuchak5659]

@@BrunoAntunesPT didn’t expect this prompt reply, thank you so much, you’re very generous person, I appreciate your efforts, have a great weekend and looking forward to those videos :)

[@BrunoAntunesPT]

@@mihirsuchak5659 thank you once again 😊🙏 Enjoy your weekend as well my friend 😊

[@mikhailstepanishchev283]

Cool, thanks !

[@mohammadfarhadi9407]

This course is awesome. Please update it bro. I love your accent.

[@BrunoAntunesPT]

Thank you very much. Sadly at the moment I've been busy with lots of other things and KZbin has been in the back seat. I plan to one day come back, I just don't know when I'll be back =)

[@mohammadfarhadi9407]

​@@BrunoAntunesPT Nice, I hope you are doing well and I wish the best for you. Thank you again for these great courses. We are waiting

[@andrejnsimoes]

Great topic! Will you pick mswjs? :) Thanks for your time

[@BrunoAntunesPT]

Thank you 😊 yes I'll use msw to test our http calls 😊

[@mrluckyuncle]

Adoro o seu canal. A informação é muito útil, e a sua apresentação é carismática. Tem planos de fazer um vídeo sobre vitest? Espero que esteja tudo bem enquanto tento usar o meu português.

[@rodbravo_]

Awesome!

[@BrunoAntunesPT]

Thank you! Cheers!

[@eidiazcas]

I didn't know Paul Stanley had programming skills too, cool

[@BrunoAntunesPT]

Paul Stanley from the band "kiss"? 😂😂🤣🤣🤣

[@eidiazcas]

@@BrunoAntunesPT one of the best groups ever, yes

[@BrunoAntunesPT]

Strongly agree - I think (and I guess I'm not alone) that the 70/80/90s were the best times regarding music 😊

[@mattcardoso1503]

Great advices!

[@stanleychukwu7424]

thank you super much!!!!

[@BrunoAntunesPT]

Thank you 😍😍

[@zourdy697]

for react application, it is better for using unit-testing only for logic and automated-test for ui components

[@BrunoAntunesPT]

Most of the times I find integration testing "better" than unit tests - of course there's a place and time for everything :)

[@zourdy697]

@@BrunoAntunesPT agreed bruno, have a great day m8!

[@diamondserg-43]

Бруно, спасибо за обучающее видео Привет из России)

[@bhushanbadhe7773]

Do you have any playground for mock jest function like testing playground testing?

[@BrunoAntunesPT]

What do you mean? 🙂

[@bhushanbadhe7773]

@@BrunoAntunesPT You show that how to create test cases by inspecting elements in playground Like that do you have any tool to create mock function

[@bhushanbadhe7773]

@@BrunoAntunesPT I'm working on a project of react using Microfrontends I'm not able to render modalcreateaccount component

[@BrunoAntunesPT]

As far as I am aware there's no tool like that 🙂

[@bhushanbadhe7773]

@@BrunoAntunesPT Ok thank you 😊❤ But your tutorials are great to learn react testing. It's my bad luck they gave me task to complete it within 3 hrs and I'm beginner in reactjs 😁😁😅😅

[@bhushanbadhe7773]

How I can test modal pop-up is opened/closed using unit test?

[@BrunoAntunesPT]

They have an example in their docs 🙂 testing-library.com/docs/example-react-modal/

[@bhushanbadhe7773]

@@BrunoAntunesPT thank you bruno