JavaScript Testing Introduction Tutorial - Unit Tests, Integration Tests & e2e Tests

Поділитися
Вставка
  • Опубліковано 2 лют 2025

КОМЕНТАРІ • 387

  • @SubbingForFree
    @SubbingForFree 4 роки тому +272

    11:50 - unit testing
    23:10 - integration testing
    29:23 - e2e

  • @ronniesunshine1163
    @ronniesunshine1163 4 роки тому +34

    This is insanely useful. I regret not learning how to do testing 1.5 years ago. It would have saved me hours, if not days worth of time in testing manually

    • @tomervainshtein5863
      @tomervainshtein5863 4 роки тому +2

      Scratch that, think about the time you would've saved while debugging errors on the e2e layer!
      Unit testing forces you to separate your code into small chunks and test everything as soon as possible. Crazy useful skill!!

  • @phamtienthinh1795
    @phamtienthinh1795 11 місяців тому

    For someone who wants to take a look at the overview before dive in the specific part. I really appreciate the way you write your description: Extremely useful

  • @blakearcher9247
    @blakearcher9247 4 роки тому +1

    Two years and 180,000+ views later, but on the off chance you see this.. THANK YOU. I have never seen a tutorial so well put together easy to understand. As a self taught developer over the last 9 months I cannot believe I have never seen your videos before. Please keep it up!!!

  • @jonaskromwell4464
    @jonaskromwell4464 Рік тому

    Best unit testing from the ground up I've seen so far on all the world wide interwebs! Been paying for tutorials, searching high and low... Thanks for putting this together beginning with testing a most BASIC function that returns only a string concatenated value. This is what I've been looking for!!!
    The one thing I don't see anyone doing (neither professionally nor in any demonstration) is to combine debugging with unit testing functions. My biggest benefit to TDD is to setup the expectation prior to writing the function and write the function to satisfy that. That way, I am testing mostly functions only and, by the time it's completed to satisfaction, the test enforces the outputs from the function. The test is done and the function is done. I do not understand why more developers do not work this way.

  • @jinkinglee2
    @jinkinglee2 6 років тому +10

    By far the best (free) intro to testing video I've seen on the web. Thank you Max!

    • @academind
      @academind  6 років тому

      Awesome to read that Jin, thanks a lot for your great feedback!

  • @ibrahimandaw8780
    @ibrahimandaw8780 6 років тому +146

    You're awesome you always give us what we want. Thanks for sharing your knowledge Max

    • @academind
      @academind  6 років тому +9

      Thank you very much for your support Ibrahima :)

    • @80Vikram
      @80Vikram 3 роки тому +1

      BLM

  • @souravprasaddas5909
    @souravprasaddas5909 4 роки тому

    A genius instructor in the world. Now I have no fear in JavaScript. U made my development journey so simple and interesting. Thanks a lot from bottom of heart.

  • @willemvanderveen7567
    @willemvanderveen7567 4 роки тому +1

    I usually don't leave comments but this is really high quality. Thanks a lot!

  • @nat6106
    @nat6106 5 років тому +1

    Really high quality video - both the content and the form (some graphs when needed, some code when needed). Thanks!

    • @academind
      @academind  5 років тому

      So happy to read that, thank you Jack!

  • @dallasearle7394
    @dallasearle7394 4 роки тому +3

    For anyone having issues with the end to end test not completing the automated test at around the 35:00 minute part it is simply because Jest is timing out and you just need to refer to 38:29 to fix that.

  • @moatazmahmoud1397
    @moatazmahmoud1397 4 роки тому +2

    It's one of the best quick and comprehensive guides around the different levels of test automation.
    Well done mate, and please guide me if you have any similar videos in your channel that I missed.

  • @khammassihoussemeddine1193
    @khammassihoussemeddine1193 3 роки тому +1

    i wanna mention something
    there is a long while since i watched a video in your channel and wanna say that you get so much better at explaining and you feel much more confident and experienced
    keep the good work up
    Thanks for this fruitful content

  • @geraldoagohoue3132
    @geraldoagohoue3132 2 роки тому

    I can't find a better introduction course to testing. I've been struggling for far to assimilate testing. I'm currently taking a course on the topic but I still can't get the whole thing. With this video, everything I previously learned has become clearer, and now I can make a clear way to progress and fully conquer testing. Thank you so much @Maximilian

  • @borystyminski8581
    @borystyminski8581 5 років тому +5

    Great vid, thank you Max. I need to disagree with one thing tho. 32:00 - "async/await does it (then and catch) for you" async/await doesn't catch errors. You would need to additionally use `try {} catch (e) {}` and await within try block in order to catch errors from the promise.

  • @cemsaglam1696
    @cemsaglam1696 4 роки тому

    It is thanks to this video (and to a test I wrote for validateInput) that I can say, the "+text === NaN" check in the validateInput function always returns false. So if I send "isNumber: true" to the function, and as text input "12e", it would consider it as a valid age. Using "isNaN(+text)" solves that. Thank you, Max, for such a great introduction to js testing!

  • @anindyakundu6323
    @anindyakundu6323 4 роки тому +6

    This is so coherent and well structured for providing an introduction. Thanks for the awesome video.

  • @nickharalampopoulos
    @nickharalampopoulos 4 роки тому +1

    Green is a beautiful color! Thanks Max for the tutorial.

  • @_isaac_muniz_
    @_isaac_muniz_ 2 роки тому

    That was a GREAT introduction to testing man. I love how you explain things in theory and using slides before the actual practice. It gives us a better context on what we're doing. Thanks :)

  • @extraxt
    @extraxt 6 років тому +1

    Max, i'm a student of your Udemy courses. This video was great, because i didn't understand how integration tests and e2e tests works. You're always able to explain the things in a simple way. Thank you Academind.

    • @academind
      @academind  6 років тому

      Thanks so much for your wonderful feedback Rafael, happy to read that you like my explanations!

  • @hiroyukinumaguchi1984
    @hiroyukinumaguchi1984 4 роки тому

    Your explanation with specific code is very easy to understand.
    I appreciate it.

  • @zoecarlibur
    @zoecarlibur 5 років тому +3

    Thank You, I learned so much. It seems like JS testing is now one of the must haves when applying for jobs these days.

    • @academind
      @academind  5 років тому

      Thanks a lot, happy to read that the video was helpful!

  • @yveltdesamours5225
    @yveltdesamours5225 2 роки тому

    Things become so clear after having your videos. Thank you Max

  • @magpinybo7524
    @magpinybo7524 2 роки тому

    This video will still be relevant in 2030! Thanks you very much.

  • @ekaterinahorton768
    @ekaterinahorton768 5 років тому +1

    Your videos are great! Very often use them to learn/refresh/structure information. Thank you very much for your work!

    • @academind
      @academind  5 років тому

      Happy to read that Ekaterina, thank you!

  • @johnnydorelli1
    @johnnydorelli1 3 роки тому

    Great Max, maybe the best teacher existing about programming languages!

  • @rhere.general
    @rhere.general 4 роки тому

    This is a brilliant video about testing and is definitely a must for devs trying to learn to test their codes for the first time. I am super glad there is a video this clear that does not expose unnecessary complexity of other modules are not required to do testing. Its focus on testing and its conciseness made me understood the three types of testing in only one watch. Sincerely, thank you.

  • @BD90..
    @BD90.. 4 роки тому

    Great thanks Max, it helps me understand the javaScript testing better than just reading a document. Now I will go and learn more on using Mocha.

  • @nhc772
    @nhc772 4 роки тому +8

    Thank you Max! Nicely organized video. I watched it several times :)

  • @shangshi6286
    @shangshi6286 4 роки тому +1

    Hi Max, thanks for the video, at 17:00, how did the recommandations pop out automatically? what did you do there? My VSC doesn't pop out recommandations automatically.

    • @shangshi6286
      @shangshi6286 4 роки тому

      Oh I figured it out. stackoverflow.com/questions/42024526/vscode-automatic-type-acquisition-for-jest. Cheers!

  • @ALEXEIS
    @ALEXEIS 6 років тому

    I just like this dude. He's always happy. Although it pretty normal to express some happiness when making UA-cam videos, however, there's something different about his. Wish I could meet him one day.
    More power to your elbow.

    • @academind
      @academind  6 років тому

      Thanks a lot Alexeis, I would indeed say that I'm a quite happy person, cool to read that is also visible in the videos!

  • @laurelineparis5407
    @laurelineparis5407 5 років тому

    I'm really impressed each time I'm looking for new things or concept to understand and explore because I'll always find you either on udemy or youtube video answering questions I've been asking myself about some vocabulary point I did get quite well.
    For couples of weeks, I've been trying to understand :
    - testing,
    - thinking about when and where to add typescript and what to test ( as working with jest we should only assert output instead of type, which typescript should do instead I reckon )
    - that there were few kinds of testing,
    - that actually I was not grasping the difference between unit testing, functional testing, integration testing and where was E2E in all that ( ends up with E2E was actually functional testing ( and not hard-related to test one function ), unit test was actually this kind of test where you actually test one function ) , then got lost with integration test.
    Your explanation was confirming some though and also made me understand better what was integration tests : testing function with other dependencies ( == other functions ).
    Can't wait to go deeper and make it to the tests automation.
    Thanks again for your explanation

  • @thalesandrade_
    @thalesandrade_ 6 років тому +34

    Finally, I learned JS Testing

    • @tomervainshtein5863
      @tomervainshtein5863 4 роки тому +1

      Same here! The book wasn't enough thus this video is a savior!!! Thanks a lot, made it breif and clear!

  • @ba1anse
    @ba1anse 4 роки тому

    Best video on testing I've seen so far, clear and detailed. thank you so much for sharing!

  • @healthcommcore
    @healthcommcore 3 роки тому +3

    Max, can't thank you enough for your awesome videos! I learn best by clear explanation and example--your excellent teach style does both. Thank you!

  • @mostafashawki
    @mostafashawki 5 років тому

    I would say for every developer:
    "The most valuable courses you can see here on Academind"
    Thanks a lot Max :)

    • @academind
      @academind  5 років тому

      Wow, that is awesome to read Mostafa, thanks so much!

  • @davidrodriguezramirez1941
    @davidrodriguezramirez1941 2 роки тому

    Just loved it, best tutorials all over the web man

  • @alansenderovich642
    @alansenderovich642 2 роки тому

    Thanks Max, you're really the king of teaching. Thank you for so much value in your videos. Please keep it up!

  • @arianh
    @arianh 2 роки тому +1

    That's an amazing crash course about testing in JavaScript, it's so complete, I really enjoyed watching it, I've learned lots of things about testing thanks to Max, So Thank you so much, Max for this awesome crash course, You're the best💙🥰🙏🌹

  • @sandeshsmagdum
    @sandeshsmagdum 4 роки тому +2

    As usual you are the most reliable instructor to depend on. I am enjoying your videos on Udemy. Waiting for many more videos on this topic that will help me in pure TDD and inculcate TDD approach in true sense. Thanks Max 🙂

  • @yassine_klilich
    @yassine_klilich 4 роки тому

    best video i have ever seen that shows the differences between those types of testing

  • @shailysingh9436
    @shailysingh9436 4 роки тому

    21:22 - The first test success indicates a "false negative", not a "false positive". False positive means that the test is failing but is not really a valid failure (for e.g. random failures). In your example, it is a false negative - test is passing, even though there's a problem with the code.

  • @adrianbartholomew3785
    @adrianbartholomew3785 4 роки тому

    I think that this is the best instructive video I have ever watched.

  • @xkali8119
    @xkali8119 4 роки тому

    On 27:30 you can just add this. before validateInput function call, and it should work correctly

  • @sanchezcarlos1986
    @sanchezcarlos1986 5 років тому

    In React case, what should I use?
    For Unit and Integration Tests:
    - Jest + (enzyme or react-testing-library)
    For e2e tests:
    - Puppeteer or Cypress?
    Great video, thanks for sharing!

    • @apskidev
      @apskidev 5 років тому

      Yes that's sound about right. You can't test React Hooks using enzyme which is why react-testing-library is getting popular, and it's actually pretty good.

  • @elcio-dalosto
    @elcio-dalosto 11 місяців тому

    This video is from 5 years ago, but still very useful, and I think it still be for some years to come.

  • @jagmohan4505
    @jagmohan4505 3 роки тому

    Really I was wondering about how testing done and then I got this video. Thanks Sir.

  • @diyskipper
    @diyskipper 6 років тому +1

    Your channel has helped me tremendously!

    • @academind
      @academind  6 років тому

      Just awesome to read that Elem, thanks a lot for your comment!

  • @codewithnacho
    @codewithnacho 5 років тому

    This video is awesome! It perfectly shows the three most common types of testing. Thank you very much Max for sharing this!!

    • @academind
      @academind  5 років тому +1

      Happy to read that the video was helpful for you, thanks a lot for your comment!

  • @nickgreen4336
    @nickgreen4336 5 років тому +7

    Max, I guess it would be a great idea to create a full course about testing, maybe using TDD, some React testing and so on. This is a course I wanna see from you so much and I hope, that one day it will become true ;)

  • @newvocabulary
    @newvocabulary 6 років тому +252

    I'm afraid to watch this video for fear I'll have to refactor a years worth of work.

    • @alisultani1182
      @alisultani1182 6 років тому +7

      Same here

    • @mateuszgwozdz
      @mateuszgwozdz 5 років тому +5

      start with a single e2e test that actually helps you skip manual test

    • @biansoralmerol4272
      @biansoralmerol4272 5 років тому +1

      lol

    • @robertquainoo
      @robertquainoo 4 роки тому

      you can implement the tests for new functions as you keep coding and them make the changes over time when you make updates to old functions

    • @jangohemmes352
      @jangohemmes352 4 роки тому

      3 years here, haha. Like someone else pointed out: The Boy Scout Principle works wonders. Leave everything better than you found it (i.e. everywhere you visit, you create tests for it)

  • @solarkadakiadam
    @solarkadakiadam 3 роки тому

    i love you max, you're great man, i've gor your react, react native, nodejs and mern courses on udemy, and i never wanted to learn about tests but now im learning and youre great man

  • @user5871
    @user5871 4 роки тому +1

    Max's tutorials are great!
    I noticed when he hovers over a function, like "test()", he gets extra info about that function, and also extra methods. Prime example of both at 17:00. I get that for some packages, but not others. Any tips how to fix this?

  • @kaname223
    @kaname223 3 роки тому

    Excellent , what other doc/courses that you recommend for advanced unit testing ?

  • @crystalyun833
    @crystalyun833 4 роки тому +1

    You are a game changer. Keep up the good work! subscribed :)

  • @ягодник
    @ягодник 4 роки тому

    Straight into and out of the point. Thanks.

  • @EricOnYouTube
    @EricOnYouTube 4 роки тому +2

    Another amazing tut by you. Danke dir vielmals, Max. :)

  • @rhenaldkarrel
    @rhenaldkarrel 3 роки тому

    It was a very quick and understandable explanation! Anyway, now Mocha has supported assertion library too right? Correct me if I'm wrong please.

  • @Dima-jc7fx
    @Dima-jc7fx 6 років тому +3

    This is great stuff, thanks a lot! Would love to see other testing-related content from you Max :)

    • @academind
      @academind  6 років тому +2

      Thanks a lot Dmitry, I might indeed dive deeper into testing in future videos.

  • @parasarora5869
    @parasarora5869 5 років тому +10

    you made testing look so damn easy...i love it and want dive deep into testing !!...thank you very much sir
    amazing video !!!!!!!!!!!!

  • @AmitKB00
    @AmitKB00 4 роки тому

    An excellent walk through from concept to uses example. It helped me to get familiar with testing.

  • @geragamo
    @geragamo 3 роки тому

    Max, thanks for this amazing video, congratulations !

  • @godhandinfamous
    @godhandinfamous 6 років тому +10

    Thank god it arrived!

  • @dawid_dahl
    @dawid_dahl 4 роки тому

    Excellent video as usual, thank you! Most people only show unit testing and I'm like, "Yeah, but..."

  • @sprintwithcarlos
    @sprintwithcarlos 6 років тому

    This is the best testing video ever, you are a sensei

    • @academind
      @academind  6 років тому

      Thank you very very much Carlos, this honestly means a lot to me!

  • @DavinirFCamposJr
    @DavinirFCamposJr 6 років тому

    Another excellent video, as always. Thanks, Max!

    • @academind
      @academind  6 років тому

      Thanks a lot for your great feedback Davinir!

  • @emmapaul
    @emmapaul 2 роки тому

    This video is awesome in explaining how to write and run test

  • @artyte_b
    @artyte_b 4 роки тому

    @Academind How did you select at 34:14 without a mouse?

  • @gsffm9044
    @gsffm9044 3 роки тому

    Great examples. Please more about testing.

  • @joaomatos1144
    @joaomatos1144 3 роки тому

    2021: Academind still Acing with these examples :D

  • @sourishdutta9600
    @sourishdutta9600 6 років тому +12

    Thanks you so much.Make a full tutorial on that.thanx Max.

    • @academind
      @academind  6 років тому +3

      I might indeed create more content about testing in the future, but we'll see. Thank you for your comment Sourish!

    • @saimirkapaj255
      @saimirkapaj255 6 років тому

      If

    • @jincypaul05
      @jincypaul05 5 років тому +1

      @@academind Please continue the series.....

    • @walrider7374
      @walrider7374 5 років тому

      udemy :)

  • @fuanka1724
    @fuanka1724 6 років тому

    Very nice and clear. Makes want to write more unit tests. Thank you!

    • @academind
      @academind  6 років тому

      Happy to read that you like it, thank you for your comment!

  • @oscarquinteros4108
    @oscarquinteros4108 4 роки тому

    Great tutorial as always. I know this is about 2 years old but What do you think about using Cypress for Browser testing?

  • @aayushjoglekarpersonal7392
    @aayushjoglekarpersonal7392 4 роки тому

    If the Jest autocomplete is not coming up in VS Code, you can type 'npm i --save-dev @types/jest' and restart VS Code.

  • @sharmilasanu3094
    @sharmilasanu3094 4 роки тому

    Surely ..he is a great teacher

  • @sagaryadav-qn4ed
    @sagaryadav-qn4ed 6 років тому

    Thanks for the nice explanation , I am back end developer but you inspire me to learn front end technology. Great :)

    • @academind
      @academind  6 років тому

      Happy to read that Sagar, thanks a lot for your comment!

  • @jonathangreene685
    @jonathangreene685 4 роки тому

    That was an amazing video thank you so much. I loved how to showed and explained how puppeteer was working. Thank you.

  • @pashute12
    @pashute12 5 років тому

    TU (Thumbs Up, Thank You, THE Ultimate) !
    Remark to readers: This of course is only an introduction about testing and not about TEST DRIVEN development, perhaps you can add a remark at the end of the vid saying that.

  • @MrGreenpaulo
    @MrGreenpaulo 2 роки тому

    Brilliant video, thank you Max!

  • @agent4140
    @agent4140 5 років тому +3

    Wish I could like this vid 10 times

  • @fabiomendes6901
    @fabiomendes6901 4 роки тому

    Watching two years later... And awesome tutorial nowadays hahaha

  • @emredemir6637
    @emredemir6637 6 років тому

    Thanks. It is a very good and simple way of diving to the testing.

    • @academind
      @academind  6 років тому

      Thanks a lot for your great feedback Emre!

  • @bartekpa
    @bartekpa 5 років тому

    Incredibly well explained. Thanks a ton!

    • @academind
      @academind  5 років тому

      So happy to read that Bartek, thank you!

  • @noufh2770
    @noufh2770 3 роки тому

    Thanks a lot !! Can I know which app you used to test ?

  • @JulienReszka
    @JulienReszka 5 років тому +1

    33:00 my chrome test browser closes after displaying the page for a really short time. It isn't staying open like in the video, anybody having the same issue ? By the way I'm using windows 10.

    • @danielelmuneco1994
      @danielelmuneco1994 5 років тому

      Same issue here. Also when I told click element ref as 'input#age', I'm getting an error.

    • @stevehunley6776
      @stevehunley6776 5 років тому

      Was having the same issue. I added an await page.waitFor(10000) to keep the page open longer.

  • @nicholasnash6058
    @nicholasnash6058 3 роки тому

    Fantastic video still in 2022!

  • @shawnmofid7131
    @shawnmofid7131 4 роки тому

    Thank you for the great video. Can you help of point me to how I can unit test for a number of sets of inputs? Something like {{anna, 28}, {nick,55},{Sam,22}}. I think it is called Parameterized testing?

  • @michaellim1315
    @michaellim1315 4 роки тому

    I have a question about adding "--coverage" into your jest script in the package.json. Since --coverage will break down the function into each step. Is it still necessary to use integration tests then?

  • @kylerebstock1487
    @kylerebstock1487 4 роки тому

    Loved that you used puppeteer too! Cypress is a nice tool to use very similarly as well. The only thing I saw missing was integration tests for api and integrations. Would love to see that!

  • @Whyoakdbi
    @Whyoakdbi 4 роки тому

    I am very confused. I am currently writing the tests the way you do, but I mock all the dependencies, because I don't want to create tighly coupled tests. Otherwise, if I change unit implementation, I would have to check more than 2 tests.
    However, I saw some talks about TDD and how we should do testing and they tell us not to test implementation but behavior. If those functions are in a module, then should I really test them? Should I not test then only the output of the module?

  • @khalidelgazzar
    @khalidelgazzar 2 роки тому

    Great video .. very well explained.. thank you Max!

  • @thevirajshelke
    @thevirajshelke 3 роки тому

    Exactly what I was looking for! Very well explained :) Thanks a lot :)

  • @sbacon92
    @sbacon92 4 роки тому

    automation testing is done with frameworks like appium or sellenium.
    are you thinking test suite.

  • @윤안톤-q6e
    @윤안톤-q6e 6 років тому

    Thank you! I studied a lot of about Web programming with your videos. :)

    • @academind
      @academind  6 років тому

      So cool to read that, thanks a lot for your comment!

  • @imranhossain6443
    @imranhossain6443 4 роки тому

    This was really helpful. Thanks Max.

  • @hoyinleunghk
    @hoyinleunghk 2 роки тому

    Very clearly explained, thank you

  • @klilaayed6483
    @klilaayed6483 6 років тому

    Thanks max I was waiting this course

    • @academind
      @academind  6 років тому +1

      Happy to read that Klila, thank you for your comment!

  • @sudhanshudas5464
    @sudhanshudas5464 5 років тому +1

    Nice information. What about someone wants to run the test against other browser agents (Like Firefox / Safari). Puppeteer only supports chrome.

  • @haiderh1339
    @haiderh1339 5 років тому

    Which IDE and plugins are you using for IntelliSense / Autocomplete and showing library function documentation?

    • @academind
      @academind  5 років тому

      This is my VS Code setup => academind.com/learn/web-dev/visual-studio-code-introduction/#our-visual-studio-code-setup

  • @edumarcolino
    @edumarcolino 6 років тому

    Wow! Great Job!! Thank you very much for this video. Looking forward to the next one

    • @academind
      @academind  6 років тому +1

      Thanks a lot for your awesome feedback Eduardo, this really means a lot to me!