JavaScript Testing Basics with Jest

An overview of unit testing with Jest, covering the main features it offers. This includes: initial setup and writing of first tests, watch mode usage, common expect statement matchers in use, test filters, coverage reports, and snapshots.
This video is also part of a playlist of Jest content:
• Jest
00:00 - What we'll cover
03:06 - Project setup and watch mode
05:45 - Creating tests
10:55 - Red, Green example
13:43 - Expect statements
25:17 - Add test script and git
27:08 - Coverage
36:43 - Test run control utility methods
40:08 - Test filters
41:27 - What files coverage includes by default
46:07 - Snapshots
53:12 - Wrap-up
Follow Jimmy Cleveland's doings:
twitter: / jimmydcleveland
blog: blog.jimmydc.com/
#jest #testing

[@Andrea-Giachetto]

The quality of your videos is amazing! With this pace, you will be the next big tech channel :)

[@SwashbucklingwithCode]

That is very kind, thank you.

[@christiantirado6568]

Love this video man! Very informative and explained in a way that's concise and easy to digest :)

[@mpcabete]

first video of yours that I saw. Subscribed! I am exited to see the rest of them

[@pedro.britto]

It's really pleasant to hear you explaining things. It's pretty nice to follow. Thanks!

[@SwashbucklingwithCode]

Well, thank you kindly.

[@srenschmidt5451]

Awesome video and great content quality! Love it :-D

[@testquality1900]

Jimmy! Thank you for this great video. Software Testing is undervalued but when done iteratively, it helps produce major testing criteria and also reduces issues by focusing on defects or unpleasant delays early in the Software Delivery Life Cycle. Along with a right Test Management tool, it may help to reduce a lot of time and effort to perform the many tasks involved in testing either with Jest, JUnit or any other Testrunners.

[@ferhatsunaycansev106]

the best video ever about JEST.

[@vikram87in]

A beautiful video. Thanks

[@kostiantynkuzmenko4435]

Great video, thank you

[@pedrodiogenes8725]

Thank you Kyanu Reeves

[@amphibia95]

Fantastic video, thank you so much.

[@SwashbucklingwithCode]

I'm happy you found it useful.

[@Scetils]

Pretty late to the party but in terms of not having to reopen the Coverage Report each time you run tests. If you open the coverage index.html file with the VCCode LiveServer extension it will listen for changes and refresh. You'd have to open it initially but it will update in the browser when the file changes. Awesome video. About to work my way through the rest of the playlist :)

[@SwashbucklingwithCode]

Interesting, thank you for the suggestion.

[@simpleprogramming4671]

I love your channel man. very useful stuff here

[@SwashbucklingwithCode]

Very glad to hear it, thank you.

[@raymundenso]

Love the video!

[@havefun5519]

Thanks for the video. Hope more advance video such as a real react app with Unit test

[@hyfydistro]

Testing is so underrated! It doesn't get that much attention than it should. 😭 People don't usually pick it up until they fully utilise the programming language either. I'm just picking up Jest now. I wasn't advised when to pick it up in my earlier time learning to program. Thank you for putting this video up. ❤ Much appreciated!

[@SwashbucklingwithCode]

Definitely. I heard a bunch about testing a couple years back before I had ever done any, and I always thought it would be a lot more complicated than it is. I'm a big advocate of it now.

[@ahmedmaaz4390]

I am picking it up now. Any suggestions.

[@reanibutani9555]

I love how you teach I subscribed

[@technoutopia4687]

You're the best. Love coverage

[@SwashbucklingwithCode]

It is quite the eye opener. And thank you.

[@technoutopia4687]

@@SwashbucklingwithCode love the visuals

[@gregorychamekh8143]

cool tips! TY

[@jeffz7310]

thank you

[@antonielmagalhaes2272]

Really nice video dude

[@SwashbucklingwithCode]

You have my gratitude. If there is anything in particular you liked, feel free to let me know so I keep it in mind for future vids.

[@abhaythakur8572]

Loved that intro at 3:02

[@SwashbucklingwithCode]

Thank you, it took way too long to make.

[@samueltorres2485]

Awesome video! In the future could you do a jest series where you go through building a real world app using TDD with Jest and some form of Javascript (node, react) etc...? Just a thought. Thanks again

[@ksorv]

Thanks man :cheers:

[@SwashbucklingwithCode]

No problem, hope it's useful.

[@ksorv]

@@SwashbucklingwithCode Hell yeah it is : )

[@internalinjectiontrulyhere770]

Good jester

[@adithyakiransekar]

Great video, how does snapshot testing compare with using chromatic? Is there a use case to use both?

[@SwashbucklingwithCode]

Great question. I do believe there is a use-case for both, since you can get really quick feedback from snapshot tests locally, and depending on what you are testing they can catch different things. But I also think it's totally fine to just use Chromatic because it is such a great tool with a lot less noise compared to snapshots.

[@gaddp]

You are my new Jesus

[@ayodejijoseph6864]

Great video dude, love how you teach, would love you to set it up from scratch in your future video, am an SDET need to work more closely in supporting my devs in writing unit test and integration test, so need to bump up my understanding on this tool. Love Jest, can you also make video on Axios?

[@SwashbucklingwithCode]

Thank you. This video was from scratch from my perspective, as it started with an empty project and installing anything needed. What did you have in mind? On the Axios video question: what are you looking to see that is outside the minimal documentation examples here: axios-http.com/docs/example Anything in particular?

[@ayodejijoseph6864]

@@SwashbucklingwithCode Nothing in particular thought there might be tricks to that too. Have looked the video again and saw it was from scratch only didn't see when you installing it. Thank you for the reply 🙏

[@SwashbucklingwithCode]

@@ayodejijoseph6864 All good, and on the Axios front there's probably some things I could think of I was just curious if you had specifics in mind.

[@Goku19881]

Thank yo for this video. Very useful. Do you have a config file to enable ESM?

[@SwashbucklingwithCode]

You can set `"type": "module"` in your `package.json` to use ESM natively, but if you need to support older versions of node and browsers you'll have to set up a bundler, which I have some Webpack and Parcel videos for.

[@Goku19881]

@@SwashbucklingwithCode Thank you. It worked!

[@9gager87]

Which camera and microphone are you using? The quality is awesome

[@SwashbucklingwithCode]

Thanks, that is lovely to hear. Camera: Fuji XT-3 Mic: Shure SM58, running through a cloudlifter, dbx 286s preamp into the Scarlett 2i4 for conversion to digital. It took a long time to get it all figured out and at this level.

[@9gager87]

@@SwashbucklingwithCode thank you for the detailed reply! And if I can ask, what recording software is this? Is it OBS?

[@SwashbucklingwithCode]

@@9gager87 Yes, it is OBS which is the easiest to get into but I'd like to explore other options now. The camera runs into a dedicated recording card from AVerMedia as well, because originally I didn't do that and the quality was lower.

[@9gager87]

@@SwashbucklingwithCode awesome, thanks for your reply. You are doing God's work.

[@harilovableterror]

Hey Swash, Followed your jest videos for creating my unit test coverage and it was very helpful. When I tried to run the same npm test in looper for CI, I am getting message - Ran all test suites but still not exiting from the test and next job is the pipeline is not kicked off. can you help mw with this.

[@SwashbucklingwithCode]

It sounds like you might now have a separate command for running tests without watch mode. If so, there are a few ways to accomplish that but I usually make a `ci:test` script in `package.json` with the `--ci` flag set and no `--watch` flag. If it isn't that, I don't know what else it would be off the top of my head.

[@AbdurrahmanHafez]

Perfect🚀 one of the best Could you please tell me the name of your font ?

[@SwashbucklingwithCode]

Thank you. The font is Cartograph Mono.

[@santhoshraghavpidathala3701]

Could you please make a video on promises , async and generators by taking real time example or REST API . Without using setTimeOut.. functions etc

[@SwashbucklingwithCode]

So to be clear: you want to see examples of promises (async await included) using real APIs, not the common examples that show setTimeout or other asynchronous JS examples, right?

[@santhoshraghavpidathala3701]

@@SwashbucklingwithCode Yes Please . Its a heart ❤ topic in javascript interviews.

[@SwashbucklingwithCode]

@@santhoshraghavpidathala3701 Ok, I'll brew something up. Thanks for the suggestion.

[@MoraisSanFoo]

Nice, but what about mocking function, modules, etc.?

[@tylerjohns]

woofs

[@SwashbucklingwithCode]

indeed.

[@shrrutisuranje1865]

Why didn't you use describe?

[@amannegi8256]

WOW .........." Keanu Reeves " ..........teaching us code WOWWW..

[@ph662]

John Frusciante's younger brother

[@SwashbucklingwithCode]

That is a new one.