Introduction To Testing In JavaScript With Jest

Sdílet
Vložit
  • čas přidán 28. 08. 2024
  • Testing is one of those things that people either love or hate. Usually testing is something that is hated, until you work on a project with good tests and you realize how amazing they are. In this video I am going to show you how to get started with testing in JavaScript using Jest. I will talk about the code you need in order to write tests, as well as show you some pitfalls of testing. At the end of the video I will breakdown the importance of testing and some best practices you can adhere to in order to make your tests amazing.
    📚 Materials/References:
    Spread Operator Video: • Why Is Array/Object De...
    Reference Vs Value Video: • Reference Vs Value In ...
    🧠 Concepts Covered:
    - How to install Jest
    - What unit testing is
    - Why testing is important
    - How to write unit tests with Jest
    - The importance of test coverage
    🌎 Find Me Here:
    My Courses: courses.webdev...
    Patreon: / webdevsimplified
    Twitter: / devsimplified
    Discord: / discord
    GitHub: github.com/Web...
    CodePen: codepen.io/Web...
    #Jest #WDS #UnitTest

Komentáře • 377

  • @deansprivatearchive
    @deansprivatearchive Před 3 lety +101

    This is a developer that truly knows what he's talking about, nonstop, in facts, and fast - short and simple, bite-sized tips to all development. Master branch, honestly.

    •  Před 3 lety +1

      Nope, he's a normal dev just like us. He just has the power of editing. He got a video on that.

    • @deansprivatearchive
      @deansprivatearchive Před 3 lety +7

      ​@ I know, that's not what I'm saying - No matter how much debugging he cuts out, the coding and aesthetics themselves are made by a developer that truly knows what he's talking about.

    • @juanbomfim22
      @juanbomfim22 Před 3 lety +4

      @@deansprivatearchive I agree. And what reinforces it is his incredible diction

    • @gainz6180
      @gainz6180 Před rokem

      @whats the name/link of that video?

  • @drchrisntsako1339
    @drchrisntsako1339 Před rokem +34

    I'm someone who don't comment on videos but whenever I search for a video and see yours, I always choose you. you are the best man

  • @tracynnnn
    @tracynnnn Před 2 lety +97

    Notes
    - test script: "jest --coverage" will detail what's being tested and what's not
    - Unit tests test the smallest part of your code
    - toBe() vs toEqual()

  • @fragileglass9622
    @fragileglass9622 Před 5 lety +121

    That's awesome. I was just searching on Udemy for a Jest testing course when this popped up. Weird. I'd would really like to see more testing or production deployment ready based courses. Best practices for making app's well tested and properly staged for active use and deploy. It's a topic that is missed very often.

    • @WebDevSimplified
      @WebDevSimplified  Před 5 lety +42

      I agree. I want to try to cover more testing related information on this channel since I find it quite enjoyable.

    • @nerdiloo9863
      @nerdiloo9863 Před 4 lety +6

      AI : You're welcome. Human.

    • @BjornBrasse
      @BjornBrasse Před 3 lety +3

      Please add more video's on testing. Perhaps a course specifically on this subject. I'm sure many people are interested!!

    • @Misfittykitty
      @Misfittykitty Před 2 lety

      @@BjornBrasse I agree--I would 100% sign up for a full course on this by Kyle. I loved his React course, and recommend it!

  • @mauricioviera6
    @mauricioviera6 Před 4 lety +15

    Thanks. I'm going through a job interview and they asked me to run unit tests, so this is really helpful as a start. Really appreciate it

  • @hetroxity
    @hetroxity Před rokem +1

    Kyle bro .. i love how you talk smoothly and going step by step without hurry..

  • @tech3425
    @tech3425 Před rokem +16

    It would be nice to have a Jest course for typescript and Express/React. Really helps us understand how to setup testing for our project

  • @JamesQQuick
    @JamesQQuick Před 3 lety +6

    Using this as a first intro to jest for me. Thanks Kyle!!

    • @ANDREPEIXOTO1
      @ANDREPEIXOTO1 Před 3 lety +1

      Me too. Thanks, Kyle! I'll have a technical interview covering jest and this video was helpful. Now I'm going to dive deeper into it.

  • @calebsirma3867
    @calebsirma3867 Před 7 měsíci +1

    Never found a guy so smooth in explanation in 14 minutes.

  • @highestaccomplisher
    @highestaccomplisher Před 3 lety +1

    OMG. I am a Manual Testing upping my technical skills to become an Automated Tester and it is the first video I see (after months of seriously researching a lower than beginner level tutorial) that really help me write my first Javascript testing script in 5min. Thank you so much.

  • @AnishSana
    @AnishSana Před 4 lety +20

    This was such a clear and concise explanation; thank you!

  • @PGBlanks
    @PGBlanks Před 3 lety +10

    I was broken after they introduced this to me at bootcamp, but you helped explain it very clearly! Thank you.

    • @aktp4796
      @aktp4796 Před 3 lety +3

      At least they introduced it to you.. I’m a recent bootcamp grad currently job searching and getting back to these necessary fundamentals after realizing how ill prepared I am.

    • @daurham
      @daurham Před 3 lety

      Bro SAME

    • @daurham
      @daurham Před 3 lety +2

      Looking at the mess and I’m thinking “sooo theyre functions..? But how.. & wtf is toBe”
      😂

  • @JohnMitchellCalif
    @JohnMitchellCalif Před rokem +3

    I'm a testing expert, and I congratulate you. Your explanation is very clear and understandable! Subscribed.

    • @user-rz7xz4wf8p
      @user-rz7xz4wf8p Před 9 měsíci

      so why the expert like you is watching tutorial for beginners?

  • @FirstLast-gk6lg
    @FirstLast-gk6lg Před 3 lety +4

    Came here for a refresher, last time i wrote tests was in school and i really enjoyed them then so excited to refresh my knowledge

  • @michaelhuskey2608
    @michaelhuskey2608 Před 2 lety +6

    Definitely would be interested in more testing videos. A topic I only really became aware of when I started looking at job postings and my home made projects started getting more complex. Appreciate what you do!

  • @jthomasaurus
    @jthomasaurus Před 4 lety +25

    I am very interested in more testing videos. This was a great intro for me, and I’m at that point in my self-teaching to start getting into testing my code! Look forward to more.

    • @WebDevSimplified
      @WebDevSimplified  Před 4 lety +5

      Thank you! I would definitely recommend getting stated practicing testing since I found it was a skill that took a ton of practice for me to get good at.

  • @bama2619
    @bama2619 Před 7 měsíci +1

    The video was in the search and I chose your video. I see your 4 years old video and think that you were tired at that time. In latest videos you are more energetic.). Great videos, Kyle. Thank you.

  • @utkarshsingh.12
    @utkarshsingh.12 Před rokem

    Within 14 minutes, this guy made you learn testing even if you know nothing about it. Thanks!!!

  • @hugoperez1318
    @hugoperez1318 Před 3 lety +8

    This was very well explained and demonstrated, great job Kyle! I think a lot of us would like at least another video going deeper into testing, explaining better practices, and whatnot. Great video, though.

  • @avidadedanton
    @avidadedanton Před 3 lety +1

    Thanks! really nice video!
    *adds Test Driven Development to resume*

  • @vibonacci
    @vibonacci Před 4 lety +2

    I'd definitely would like a video that writes a full test suite on a small but real-life project that shows how to write proper unit tests beyond the common a + b examples.

    • @WebDevSimplified
      @WebDevSimplified  Před 4 lety +2

      I really want to do this, but I need to find the right project first. Most of my CZcams videos are not large enough to make a full video out of testing them.

    • @vibonacci
      @vibonacci Před 4 lety +2

      @@WebDevSimplified Ok. But maybe just a project where you test some very common use cases like logging in / auth, CRUD operations on a 'User' or 'Company'. Simple stuff that is very often done.

  • @hamed4451
    @hamed4451 Před 4 lety +59

    That's great kayl ... why you didnt continue this series?😟
    Can you create " test(with jest) in react " tutorial series?

  • @yesweet
    @yesweet Před 4 lety +10

    You are lucky if you have someone like WDS besides you, and we are lucky as we have WDS on CZcams👏

    • @WebDevSimplified
      @WebDevSimplified  Před 4 lety +11

      Thank you. I am planning to stick around for the long haul, so you don't have to worry about me leaving your side.

  • @FED_workerz
    @FED_workerz Před 7 měsíci

    Iam watching many testing tutorial but i don't understand then i see your your testing tutorial video then i watch i understand sir teaching is good 😊

  • @DRocksRecords
    @DRocksRecords Před 4 lety +1

    Dude! Test seemed like a mile away before I watch this... I get just enough of it to start trying on my own very nice... thanks

  •  Před 4 lety +6

    Amazing tutorial! I was afraid of start studying this topic because it seemed so hard. Now, this video gives me a more clear idea. Thanks!

  • @DavidLeDuc1
    @DavidLeDuc1 Před 3 lety +12

    This is a really great intro to testing using Jest. It would good to see more testing videos, possibly ones that cover plain vanilla (no framework) javascript and testing functions that manipulate DOM.

  • @AlexTechie
    @AlexTechie Před 4 lety +5

    Great video! I've known about testing for a while, but I (personally) can't think of a place I'd use it. I know that's a me-issue; not knocking testing. Hopefully, in your next video on testing, you do can walk us through some real world use cases. Keep up the good work! 👍

    • @WebDevSimplified
      @WebDevSimplified  Před 4 lety +6

      Testing us useful anywhere you have logic in your code. Literally anything in your code can be tested and you should definitley test the critical parts of your code

  • @nataliadziedzic9278
    @nataliadziedzic9278 Před 3 lety +2

    Thanks for this video. If you are thinking about continuing this series then I think tutorial on testing in React would be a great help for newbies ;)

  • @joshr.2600
    @joshr.2600 Před rokem

    I've watched plural sight for 1 hour.
    And YOU have explained this 10x better in 13 mins.
    U have my like n sub. If u have a paid channel. I'm ready

  • @RogerThat902
    @RogerThat902 Před 5 lety +1

    Yes, would like more testing-related videos. That was great. I think my biggest issue is knowing what exactly to prioritize when testing because as you said, you can test almost everything, even though you probably never will.

    • @WebDevSimplified
      @WebDevSimplified  Před 5 lety +2

      I would say you should prioritize the core business logic of your code. Essentially whatever code is the most essential to your project should be tested first.

  • @martinag6607
    @martinag6607 Před 2 lety +1

    Thanks man!! Super easier to have the --coverage, super helpfull, and well explained!! Much appreciated!

  • @cengiz-ilhan
    @cengiz-ilhan Před 2 lety

    he is teaching everything simple. AWESOME

  • @kakitayuri
    @kakitayuri Před 3 lety +2

    Really really good stuff dude! Coming from nearly a decade of professional Android development, moving to web work, I was hoping to find a succinct explanation about quick setup and coverage. Definitely a thumbs up and a sub from me. I know you're focusing on newer devs a lot, but even at the senior level needing a quick intro, very helpful stuff!

  • @deepumon.d3148
    @deepumon.d3148 Před 5 měsíci

    Bro Thanks for this amazing video. Actually, I have to write JEST code in our organization. Your video helps me a lot. Please do more videos about JEST.

  • @AlexGrigoreDEV
    @AlexGrigoreDEV Před 7 měsíci

    Very helpful, even though there's a lot more to know about JEST, it's a well rounded primer. Thank you!

  • @xenialxerous2441
    @xenialxerous2441 Před 3 lety +2

    Hey Kyle! I know it's a bit late to post a question/comment for this video(considering the date of publish for the video) nevertheless, I have been watching your tuts and coding videos and I genuinely enjoy watching your videos and learn a ton of new things and concepts. I particularly love the specific topics like regex, testing, solid principles etc that you cover, which frankly I didn't came across on most other coding pros' channels. I love these indepth programming topics by the way and hence, it automatically draws me to your channel every now and then. Main question I had was, "what could be the main difference between a normal software(app) testing and the full on Pentesting?".. Generally, I am aware of the definitions and the underlying principles but, I am quite assured that, your answer would defnitely shed some more light on the topics and help me go further in these topics. Thanks for everything, and love you!

  • @okopyl
    @okopyl Před rokem +2

    Could you please record a video on how to test React's components?
    And also it would be cool if you could make a video o how to install Jest to Vite's project. I did it, but it was quite a headache - no tutorials were working, I had to google a lot of errors and fix them by myself...

  • @daviddada7771
    @daviddada7771 Před 2 lety

    You're really simplifying web development
    Thanks so much for this video

  • @shashantr.9380
    @shashantr.9380 Před 11 měsíci

    I really appreciate your dedication and hardwork that went into your video titled 404 Not Found (Coming Soon).

  • @masihkarimi5952
    @masihkarimi5952 Před rokem

    Wow, that was amazing, I've got the complete concept of how the test case should look and work, Thanks for the great content Man !!

  • @spongebobsquarepants4576
    @spongebobsquarepants4576 Před měsícem

    Very good and simple explanation. Thank you!

  • @aimablebancunguye9617

    Wow! you are super great, i was struggling searching for jest course. thank you for your video.

  • @sessionswithtemitope
    @sessionswithtemitope Před 3 lety +1

    Thank you, your explanation is really simple. I hope more testing video comes up

  • @marsdwarf
    @marsdwarf Před 11 měsíci

    Fantastic tutorial, I love that it's short. Thanks!

  • @NiceChange
    @NiceChange Před rokem

    i know this was posted a while ago.. but wow.
    creating test made so easy..Huge thanks!!!!

  • @Cloud-577
    @Cloud-577 Před 4 lety +1

    Thank you for making this video! I have been curious about automated tests but didn't know where to start. I'm highly interested in a test series💕

  • @rakanes
    @rakanes Před 3 lety

    More!! Need a whole series, and also enzyme + jest please!

  • @vanlifecara
    @vanlifecara Před rokem

    I'm in QA and just learning JavaScript but need to learn Jest for work, this was very helpful

  • @maxiequa567
    @maxiequa567 Před 4 lety +2

    And now we understand Jest, thank you Kyle! +1 for more testing videos.

    • @WebDevSimplified
      @WebDevSimplified  Před 4 lety +2

      I'm really glad you enjoyed it. I can't wait to make more testing video.

    • @maxiequa567
      @maxiequa567 Před 4 lety

      @@WebDevSimplified You really do simplify development for the web! Have already learned so many new and practical nuggets of wisdom. Where do you/have you gained your knowledge from? Are there any resources (other than your awesome videos) you would suggest ?

    • @WebDevSimplified
      @WebDevSimplified  Před 4 lety +1

      @@maxiequa567 I learned nearly everything I know about web development from CZcams videos, personal projects, and my job. I also read a lot of blogs/articles for more concept based things like writing clean code and testing.

    • @maxiequa567
      @maxiequa567 Před 4 lety

      @@WebDevSimplified Amazing. Do you have any blog recommendations?

    • @WebDevSimplified
      @WebDevSimplified  Před 4 lety +2

      @@maxiequa567 Not really. I usually just google search for what I am looking for and read whatever blog comes up.

  • @MM-hs9vp
    @MM-hs9vp Před 3 lety

    I was thinking about unit test is so hard for me before I did it, This video makes me feel easily to against testing.Thank you !

  • @nagasaran3856
    @nagasaran3856 Před 4 lety

    Good clarity is maintained throughout the video

  • @alexeymalakhov5244
    @alexeymalakhov5244 Před 10 měsíci

    Damn, it looks exactly like a postman sandbox! Clean and functional! I like this kind of automation

  • @ValchyGaming
    @ValchyGaming Před 2 lety

    This video makes me feel productive

  • @space_monkey125
    @space_monkey125 Před 3 lety +2

    This is an awesome tutorial would want to see more testing tutorials

  • @vanessabano7180
    @vanessabano7180 Před 2 lety

    This was great! Yes, definitely more testing in JavaScript with next videos please!

  • @mohamedelidrissi2839
    @mohamedelidrissi2839 Před 4 lety +1

    Just came across this channel, not disappointed!

    • @WebDevSimplified
      @WebDevSimplified  Před 4 lety +1

      Thank you! I hope you enjoy the rest of my content just as much.

  • @TremaineBuchanan
    @TremaineBuchanan Před 4 lety +1

    Great video! Was very helpful in starting my journey in writing tests for my code.

  • @davitdarsalia7641
    @davitdarsalia7641 Před 3 lety

    Watching in 2021 , The most useful tutorial , Thanks man!

  • @JohnAussieMate
    @JohnAussieMate Před 4 lety +1

    Thanks Kyle,
    You are really helpful with your videos, great content, well paced and I love the simplicity of how you make something complicated look simplified.
    And yes, I would love more videos on testing, I believe it to be necessary and a must for every developer out there.
    Thanks again mate!

  • @isabellebidou
    @isabellebidou Před 3 lety +2

    you are so inspiring and such a great teacher! thank you for your hard work

  • @FelipeBarbosaGoogle
    @FelipeBarbosaGoogle Před rokem

    Amazing job for beginners like me, thanks.

  • @semtristan3170
    @semtristan3170 Před 2 lety

    Thank you for this!! I had a complete brain fart, I subscribed because I will be back!!

  • @wepranaga
    @wepranaga Před 3 lety

    this guy is always make things easier

  • @Jonathan_Henderson
    @Jonathan_Henderson Před 3 lety +1

    Great content as always Kyle!

  • @31grimey
    @31grimey Před 4 lety +2

    Amazing video Kyle. Can you do a video about testing React with Enzyme?

  • @hamzahahmad1670
    @hamzahahmad1670 Před 4 lety +9

    Quality content, as usual. Thank you.
    If possible, it would be great to see some React testing as well.

  • @supriyantapoddar6129
    @supriyantapoddar6129 Před 5 lety

    Want more advance testing videos. Your videos help us a lot. Thanks a ton!

    • @WebDevSimplified
      @WebDevSimplified  Před 5 lety +1

      Thanks! I hope to explore more testing videos in the future for sure.

  • @mikmikmikmijtheshy8577

    You just saved my life!! Thank you!!

  • @maheshr5282
    @maheshr5282 Před 2 lety

    The explanation was clear and upto the point. Thank you so much for the video.

  • @phamlam4738
    @phamlam4738 Před 2 lety

    Thank you very much for this short video. looking forward to see more from you

  • @nerdiloo9863
    @nerdiloo9863 Před 4 lety

    I admit I don't unit test much but I'll give this a go - i like the console and html output

  • @filemomb984
    @filemomb984 Před 4 lety +1

    Man, thank you a lot, yours tutorials are incredible!! Congrats!!

  • @Cadambank
    @Cadambank Před 2 lety

    I would also like to see more about testing.

  • @mohammedalmukhtar8949
    @mohammedalmukhtar8949 Před 5 lety +25

    test('Kyle is the best instructor', () => {
    expect(heDoesWell(videoContent, materialCoverage)).toStrictEqual(true)
    })

  • @pastorfred2543
    @pastorfred2543 Před 5 lety

    I liked the video before watching because I trust Sir Kyle will deliver for sure.. Anyone else?

  • @rafay9254
    @rafay9254 Před 4 lety +1

    Thank you! I love the way you explain everything

  • @SohailKhan-gu2du
    @SohailKhan-gu2du Před 3 lety

    Thanks man ❤️.. Helped a lot... Please create testing videos for entire react and node-express application with best practices ❤️... Lots of love brother.. Great work ❤️

  • @MG-bm5oj
    @MG-bm5oj Před 4 lety

    Nowday testing is crucial. You cannot get a job if you don't know about it. I would suggest to make more videos like this but on complex projects to have a better idea of how useful it is. If it can be with react would be great.
    Thanks for you videos

  • @harag9
    @harag9 Před 4 lety +2

    Interesting topic, would love to see more on this - e.g. the 3 functions you tested all returned a value, but what about those that don't. How can you test them when you can't expect a value returned?

    • @WebDevSimplified
      @WebDevSimplified  Před 4 lety

      Great question. There are assertions you can write for ensuring certain functions are called in your code. jestjs.io/docs/en/expect#tohavebeencalled

  • @metagamingOficial
    @metagamingOficial Před 4 lety +1

    Thanks Kyle, that was a nice start =)

  • @kostiantynkarzhanov9216

    Thank you! Very clear and concise explanation! 💛

  • @alpachino468
    @alpachino468 Před 2 lety

    I wish I had even just a fraction of your skill and knowledge...

  • @RayPereda68
    @RayPereda68 Před 4 lety

    Helpful video. Please create more testing videos. In particular, snapshot-based testing would be of interest.

  • @AnnieTaylorChen
    @AnnieTaylorChen Před 4 lety

    It feels such a sense of achievement when everything is green. My problem is sometimes I write wrong testing code.... lol. I already got asked about this as a junior developer in interview! It will be such a nice skill to have. I should practice more!

    • @WebDevSimplified
      @WebDevSimplified  Před 4 lety +1

      That is the hardest part about testing. Knowing what to write tests for and how to properly test is a skill that can only really be learned through lots of practice and mistakes. Luckily when you start working on larger projects it will become more apparent where tests should be and testing will become easier.

  • @ahnaffaiyaz1892
    @ahnaffaiyaz1892 Před 2 lety

    Great explanation, thank you very much.

  • @GusNando
    @GusNando Před 2 lety

    Thanks kyle, 😁 easy to understand for beginner like me

  • @KINGQABIL
    @KINGQABIL Před 2 lety

    Thanks, man Your explanation is another level bro

  • @schoolboost
    @schoolboost Před 3 lety

    I would love to see more testing Videos

  • @divyanthj
    @divyanthj Před rokem

    This covers the basics but how do you test an existing react app? How does one figure out WHAT to test in a react app?

  • @Any_key404
    @Any_key404 Před 5 lety

    I just recently learned unit testing with Jasmine, I’m glad to see someone teaching this as I had to basically accidentally bump into it myself.

    • @WebDevSimplified
      @WebDevSimplified  Před 5 lety +1

      Nice! I am hoping to include some more testing into my future videos since I find it enjoyable.

  • @stith_pragya
    @stith_pragya Před rokem +1

    Thanks Bro for the video...........🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻

  • @alistokes2308
    @alistokes2308 Před 3 lety

    Thank you for the info! This was really concise, and perfectly helped me figure out this stuff.

  • @stanleyagwu4818
    @stanleyagwu4818 Před 3 lety

    Thanks so much. You are, and have been doing a great job for us! More grace!!!

  • @MoMoneyMoritz
    @MoMoneyMoritz Před 2 lety

    Thanks man, this was very helpful :)

  • @sarfarazsheikh7378
    @sarfarazsheikh7378 Před 2 lety +1

    Thank You Very Much Sir

  • @Zen-lz1hc
    @Zen-lz1hc Před 2 lety

    Like
    Cool simple introduction to Jest
    Thank You :)

  • @98f5
    @98f5 Před 2 lety

    i'd love for someone to make an updated video using jest-mock and the new types. to use jest without ts-jest in ts.

  • @Pareshbpatel
    @Pareshbpatel Před 2 lety

    Excellent Tutorial on testing JS with Jest. Thanks, Kyle.
    {2021-11-08}

  • @codewithhyder1553
    @codewithhyder1553 Před rokem

    great brother , it helped me 100%