Introduction to Jest Testing | JavaScript Unit Tests

Поделиться
HTML-код
  • Опубликовано: 19 июн 2024
  • Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
    In this Introduction to Jest testing, you will learn how to write JavaScript Unit Tests and why you should write them. Jest is a popular testing framework that helps you verify your code works like you think it should.
    💖 Support me on Patreon ➜ / davegray
    ⭐ Become a full-stack web dev with Zero To Mastery Courses:
    - Complete Next.js Developer: bit.ly/CompNextJSDev
    - Advanced React: bit.ly/AdvReactDev
    - Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
    🚩 Subscribe ➜ bit.ly/3nGHmNn
    📬 Course Updates ➜ courses.davegray.codes/
    ❓ Questions - Please post them to my Discord ➜ / discord
    ☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
    👇 Follow Me On Social Media:
    GitHub: github.com/gitdagray
    Twitter: / yesdavidgray
    LinkedIn: / davidagray
    🔗 Source Code: github.com/gitdagray/jest-intro
    📺 "Testing Your Code" playlist: • Testing Your Code
    Introduction to Jest Testing | JavaScript Unit Tests
    (00:00) Intro
    (00:10) Welcome
    (00:32) Lesson Goal
    (00:51) Why Write Tests?
    (01:24) Quick Note
    (01:42) Install Node for npm
    (02:04) Checking your Node install
    (02:39) A Simple Function
    (03:15) Install Jest
    (04:24) Your First Unit Test
    (05:42) How to Run Tests
    (06:41) What is a Unit Test?
    (07:14) Testing a 2nd Function
    (12:07) Testing a 3rd Function
    (16:09) Drilling Down to a Single Responsibility
    (22:25) Generating a Coverage Report
    (24:40) Wrap up
    📚 Tutorial References:
    🔗 Jest Official Website: jestjs.io/
    🔗 Node.js & NPM: nodejs.org
    Was this tutorial about writing JavaScript Unit Testing with Jest helpful? If so, please share. Let me know your thoughts in the comments.
    #jest #testing #javascript

Комментарии • 76

  • @sandroffdsantos
    @sandroffdsantos 10 месяцев назад +20

    Been using Jest testing for web applications for almost 6 months and one thing that i´ve noticed on the web was the lack of a well structured tutorial about software testing and more specifically Jest Testing.
    So thank you Dave for the amazing content.
    Looking forward for a further chapters of this educational content.

    • @evanilsonp.8183
      @evanilsonp.8183 3 месяца назад

      How do I use jest with my crud methods?

    • @evanilsonp.8183
      @evanilsonp.8183 3 месяца назад

      Basically I want to test my crud methods

  • @code_magpie
    @code_magpie 10 месяцев назад +1

    Thank you so much. I have no words to appreciate the way you teach.
    word.toLowerCase().split('').reverse().join('') won't include the commas. So we won't need the replaceAll part. I know you know this, but you just came up with a quick solution. Mentioned it for the viewers.

  • @chiragchhajed8353
    @chiragchhajed8353 10 месяцев назад +18

    Wow, I can't express how excited I am to see you've started a testing tutorial series! 🙌 I've been looking forward to learning more about testing for quite a while, and your videos are just what I needed.

  • @ahmad-murery
    @ahmad-murery 10 месяцев назад +8

    Hello my friend,
    I don't do testing very often due to very strict deadlines, but it's always good to do so,
    8:30 since we're passing an empty string to the join method no commas will be created, on the other hand, passing nothing(undefined) will add commas,
    Thanks Dave!

  • @ichiroutakashima4503
    @ichiroutakashima4503 10 месяцев назад

    Seriously, Dave! Thank you so much for doing this! Your channel as really helped me grow and progress within my journey! I've been trying to find some content creator that would create content solely for JEST! Thank you so much!

  • @OpossumPiper
    @OpossumPiper 9 месяцев назад

    Awesome intro to unit testing with jest. We use jest extensively at my job. This is a great way to get back to basics, understand how jest integrates with npm, and how to use it to write better code!

  • @TonyStark90743
    @TonyStark90743 10 месяцев назад +2

    Much needed video , please cover unit testing , integration testing, End to end testing , React test library , Cypress

  • @mrbilchalan
    @mrbilchalan 10 месяцев назад +1

    pls, continue this. thank you again, Dave.

  • @md-abid-hussain
    @md-abid-hussain 10 месяцев назад +1

    Didn't see that comming.
    Excited for this series

  • @omidoyinayodeji9338
    @omidoyinayodeji9338 10 месяцев назад

    Oh thank you for this series. I can't wait for you to get to the advanced testing such as making network requests, redux , axios interceptors and others.....I'm watching every testing video you are making....

  • @ojotimmy6002
    @ojotimmy6002 10 месяцев назад

    Thank you for the amazing content Dave. The timing is perfect.

  • @calebmbugua745
    @calebmbugua745 10 месяцев назад +1

    Thanks Dave💯 Pure Gold!

  • @viditgoel2909
    @viditgoel2909 9 месяцев назад

    Thanks a lot for starting this series ❤, I can't thank you enough for this series as there almost no good tutorials around testing for web devs,
    I don't know much about testing yet, but it would be helpful if you could also teach e2e testing, basically enough about testing that is expected from a web developer.

  • @imigi427
    @imigi427 10 месяцев назад

    Amazing, I need to wrote whole bunch of test in work. Really appreciate your work

  • @mrpaulishaili
    @mrpaulishaili 10 месяцев назад

    So excited! Thank you sir! Will definitely be sharing on my LinkedIn once done with mine!

  • @rdubb77
    @rdubb77 28 дней назад

    Great video, I like how you use non trival examples and work in clean code principles.

  • @kostiantynkarzhanov9216
    @kostiantynkarzhanov9216 6 месяцев назад

    Fantastic tutorial! Thank you so much! 💛

  • @fares.abuali
    @fares.abuali 10 месяцев назад +1

    Great topic 🎉
    Thanks Dave

  • @alirezagarshasbi6557
    @alirezagarshasbi6557 10 месяцев назад

    I just started testing for an e-commerce web app created with next js and typescript
    i had hard time configuring jest and typescript for unit and component testing
    but setup cypress pretty easily
    i hope this video help me understand jest and testing better
    thank you Dave for great content

  • @frankkim9178
    @frankkim9178 10 месяцев назад

    I am so happy that you started doing the test series!! Could I request a content about call by reference vs call by value vs call by sharing? It's quite confusing since it works differently in other languages.

  • @frankkim9178
    @frankkim9178 10 месяцев назад

    Cannot wait to see the content about cypress vs jest, and when we need to use them. Lovely.

  • @juanmacias5922
    @juanmacias5922 9 месяцев назад

    This was amazing, thank you so much!

  • @cirolandia007
    @cirolandia007 6 месяцев назад

    Excellent video, thank you very much!!!

  • @LorenzoJimenez
    @LorenzoJimenez 10 месяцев назад

    Real nice! Thanks. I will add the tests when the strings are null or undefined.

  • @a_maxed_out_handle_of_30_chars
    @a_maxed_out_handle_of_30_chars 10 месяцев назад +1

    thank you, simple and to the point :)

  • @MichaelShingo
    @MichaelShingo 4 месяца назад

    nice intro to jest thank you, excited to integrate this into my Next.js app

  • @akindipejohn2595
    @akindipejohn2595 10 месяцев назад

    Really appreciate your work 🙌

  • @crixcodex
    @crixcodex 10 месяцев назад

    Thanks Dave, you've really helped on my Javascript journey i do really appreciate... I wish you could talk about getting a job, cause i feel I've been writing codes for myself, but all same thanks alot

  • @_isaac_muniz_
    @_isaac_muniz_ 9 месяцев назад

    That was a good simple intro. Thank you.

  • @volodyslove
    @volodyslove 5 месяцев назад

    Nice explanation, thank you 😁

  • @abc_noob
    @abc_noob 10 месяцев назад +8

    Nice thumbnail 😂

  • @fedirouatbi4908
    @fedirouatbi4908 10 месяцев назад

    Thanks for this great lesson hope we see react and typeScript tests soon

  • @bugraotken
    @bugraotken 10 месяцев назад

    I have just finished a 3 hours long Cypress tutorial with E2E and Component testing. Let's see what Jest brings us =)) Thank you Dave!

  • @TechDecryptor
    @TechDecryptor 10 месяцев назад

    Really waiting for the videos

  • @stevieholland3579
    @stevieholland3579 10 месяцев назад +2

    I am sure you get a million requests for topics, but could you please do a data structures and algos course? Basic linked lists, trees and graphs, big O, recursion etc. Your explanations are so in depth and helpful. I would love to see a dsa playlist at some point. Forgive me if you have this and I just have not found it yet.

  • @shubhamgupta-bl1tr
    @shubhamgupta-bl1tr 10 месяцев назад +2

    Sir please make a video on how to test the react component which includes redux, custom hooks with mock api...I mean to test complex react components

  • @user-sb9ve6zd6p
    @user-sb9ve6zd6p 10 месяцев назад

    Thanks Dave, very clear explanation, I hope you'll continue this theme and also cover RTL.

  • @abdullahsevmez42
    @abdullahsevmez42 10 месяцев назад

    thanks dave :) You're great! Will u continue this series. And will it come with nextjs or react. It would be perfect.

  • @user-ek9fn6gv4j
    @user-ek9fn6gv4j 10 месяцев назад +1

    Hello Dave, thank you for providing such amazing content. I have recently begun learning how to write tests for web applications and have started using Vitest as my testing framework. Do you think this is a good choice for testing?

  • @joker-wr8pt
    @joker-wr8pt 10 месяцев назад +3

    I've a request sir please teach us how to test the api via jest I did the testing via jest for my express api but still have some confusion in stubs and mocks especially how we can test the api in the mvc structure like where our controller is interacting with services huge request

  • @hohugo2292
    @hohugo2292 10 месяцев назад

    looking forward the next, please update Dave, please!

  • @doniaelfouly4142
    @doniaelfouly4142 5 месяцев назад

    thanks

  • @michalnowak2181
    @michalnowak2181 8 месяцев назад

    thx

  • @MrZiyak99
    @MrZiyak99 10 месяцев назад

    was really hoping this would be with nodes new internal testing library since it's gonna be available out of experimental with node 20

  • @Mike-jq7os
    @Mike-jq7os 10 месяцев назад

    please please please, we need a full course

  • @ayesigwar
    @ayesigwar 10 месяцев назад +1

    Thanks Dave. Do you plan to do any DevOps videos for aws in future?

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  10 месяцев назад +1

      I'm definitely interested in doing that. I haven't had many requests for it, but it might still be good.

  • @leojohn6702
    @leojohn6702 10 месяцев назад

    Is this a new playlist? Will you create more about it?

  • @Viralplace
    @Viralplace 7 месяцев назад

    But is possibile to show the output on the browser? Like Jasmine?

  • @rpf23543
    @rpf23543 10 месяцев назад

    Thanks, awesome tutorial! To me one of the issues ist the frontend, responsiveness and such things. That cannot be done with jest, right? Selenium or others?

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  10 месяцев назад +1

      You're welcome! Yes, you're looking at the UI there. Possible automation but devs also use tools like Browserstack to visually look at different devices, too.

  • @abhishekjindal8610
    @abhishekjindal8610 10 месяцев назад

    Hey @Dave,
    Could you please create one Next.Js 13 Project using material UI on server side including the state management(redux for example) in Next app ?

  • @bensalemadel8940
    @bensalemadel8940 4 месяца назад

    you don't need replaceAll(',','') already join with empty string will concat all string with an empty string

  • @messiisthebest
    @messiisthebest 4 месяца назад +1

    thanks , now i am pro unit tester😂😂

  • @esrafilelahi5733
    @esrafilelahi5733 10 месяцев назад

    in react? cypress, react-testing-library???

  • @sanjaymishra-ec9lw
    @sanjaymishra-ec9lw 10 месяцев назад

    Sir I have learned HTML ,CSS and Java Script please suggest me what I will have to read to become frontend developer.

  • @evanilsonp.8183
    @evanilsonp.8183 3 месяца назад

    I mean, i just want to test my crud methods and i can't find how to do that

  • @vidhya821
    @vidhya821 8 месяцев назад

    for coverage, even if I dont write a test for reverseString, it still shows a 100% coverage

  • @borooLIVE
    @borooLIVE 10 месяцев назад +1

    boss!

  • @phsopher
    @phsopher 10 месяцев назад

    Thanks for the tutorial. Why is this so slow though? It seems every new test adds about a second despite functions being super simple. In a large codebase this would be a nightmare. I don't really have experience testing JS but with Python (pytest) this would take milliseconds.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  10 месяцев назад

      Welcome - several reasons for the first run slowness here: www.google.com/search?q=why+is+jest+slow

  • @fancyaristocrat7450
    @fancyaristocrat7450 10 месяцев назад

    Perfect thumbnail 🤣

  • @jesuswalks1101
    @jesuswalks1101 10 месяцев назад

    I can't focus on programming becouse i think only about money and how powerful it will make me! How to forget about a lot of money and start focusing on work?

  • @iBen-ry6pj
    @iBen-ry6pj 5 месяцев назад

    I don't understand how testing libraries work behind the scenes so am like...... What's the point? How about just auto generating all possible inputs and supply to a function and watch the output/returned value? This jest testing appears to run a test using just one value so I don't see the point. But before I blab plenty of nonsense, let me research more about it. Thanks though!

  • @Mike-jq7os
    @Mike-jq7os 10 месяцев назад

    To avoid wrong autocompletion, you can press the escape key and continue typing

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  10 месяцев назад

      Thanks - yeah, I kept forgetting it was going to autocomplete what I didn't want. I don't always look while I'm typing lol.

  • @abhinavtiwari89
    @abhinavtiwari89 2 месяца назад

    Thumbnail 😂😂

  • @TuTAH_1
    @TuTAH_1 4 месяца назад

    You would better not have names collisions (like sum is both function and file name) in toutorial purposes - it will mix up newbies

  • @fikreteliyev2266
    @fikreteliyev2266 10 месяцев назад

    Please vitest

  • @aussiebeermoney1167
    @aussiebeermoney1167 10 месяцев назад

    only girlymen write tests to check their code

  • @JayFFresh
    @JayFFresh 9 месяцев назад

    'Hellert ,
    Im here revising the video before beginning the testing with typescript video