Unit testing in JavaScript Part 4 - Mocking basics

🔗 Watch this series from the start

🔗 Code snippets from the episode

🔗 Discuss this video on the Fun Fun Forum

🔗 Promises video

🔗 Dependency Injection basics video

🔗 The gear I use to produce the videos

🔗 Help translate the show to your language

Today, we are continuing our journey on unit testing in JavaScript. In this episode we look at doing some basic mocking of fetch.

💛 Follow on Twitch and support by becoming a Subscriber
We record the show live Mondays 7 AM PT

💛 Fun Fun Forum

💛 mpj on Twitter

💛 Wallaby (Show sponsor)

💛 CircleCI (Show sponsor)
Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:

💛 Quokka (Show sponsor)
Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer - use this link when you buy to let them know you came from here:

💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly YouTube shows on programming 🏅 thanks to its consistency and quality reaching 200,000+ developers.

🤦‍♂️ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.

Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.

📹 Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.

⏯ On Fridays, an edited version of the show is adapted for and published on YouTube.

Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Team Collaboration, Software Development, Project Management

[duncanlukkenaer]

I hate to mention it, but your beautifully drawn paper in the thumbnail has a big 3 on it instead of a 4

[ociemitchell]

Another reason to mock network calls is that real network calls might succeed too often! Mocking them allows you to cause specific errors and make sure you can handle them.

[joedunder]

Thanks for another very fine video. It's rare to see tutorials discuss how to program when you're not in the best mood, and when it's harder to build momentum, so I especially appreciate your advice in that area.

[roach_iam]

Great video man! I recently came on to a new company and I'm trying to implement tests all across the board. Your video series on testing has been really helpful. Keep up the good work!

[crowdozer]

I wonder what my coworkers would think if I carried around a pair of sunglasses like that and popped them on every time I played the devil's advocate

[olivereddy]

I love your videos so so much, not a database of tutorials. It's A SHOW!!

[sumantkanala]

+Fun Fun Function that fact at 9:10 about case-insensitivity is itself enough to make this video laudable!

[no_I_dont_my_real_name_on_yt]

I really enjoyed the 'group meeting' you had at 22:40. It helped me understand the thought process and reasoning behind why you used fetch as an argument to the orderTotal function. Great job!

[mugiwaranoadi]

33 min long video is online since 8 minutes and already has 6 likes. Your community really trusts you. Oh wait, did he say „Deutschland“? *pressinglikebutton* ;-)

[CrapE_DM]

Are you slowly turning into the joker?

[sjaustirni]

An over 30 minutes episode of FunFunFunction this Monday! What have I pleased the gods with to be given so much goodness at once? :D

[hyfydistro]

What extensions you use for your text editor that shows the results or something fetched (or more)?? That is so handy...!

[ki]

Thanks for explaining mock functions in layman terms, you are doing a great job MPJ!

[ProgramArtist]

I've noticed you don't write the tests in the standard "arrange/act/assert" or "given/when/then" way where you separate the preparation, the call you actually test and the checks.

For me separating them really helps:
1) It helps to see that the "when" part, the actual thing we test is a single thing and not multiple things
2) It helps to build a clear logical path which is easier to understand when someone else reads it. For example in the new test you've written the expect appears really fast before the reader even understood what's going on.
3) It helps to see all the necessary parts needed for the test and see if something is actually not needed and redundant
4) It helps identifying duplication. If after like 5 tests you see the preparation for the tests is the same, maybe you can extract it to a "beforeEach()" or a "before()"

Also what's your opinion on splitting the "given/when/then" parts to a nested flow with mocha?
Doing a tree of "describe()" with "before()" and testing multiple things after them in "it()", so the result tree will look something like this:

descirbe(orderTotal - calling with items) {
before() { do the call to order total }
it(should call fetch) { check it called fetch }
it(should call fetch with correct url) { check it called fetch with correct url }
describe(fetch fails) {
before() { fail the fetch mock }
it(should fail) { check the final result is a failure }
}
describe(fetch succeeds) {
before() { return a result from fetch }
it(should return correct result) { check the final result is as expected }
}
}

[dilski]

This series is very useful. I'm building my first node app for a group project at university and have been banging on about unit tests since the start!

[re.liable]

"I just want to start writing code right away" I'm very much like that as well. One thing that helped me a lot is making my commits atomic. That forces me to do one thing at a time, otherwise my commits would get messy.

Another is making an outline of what I want to do. This gives me the same satisfaction of "writing code right away". However this also allows me to rearrange things as needed, if it makes more sense in my Git history. And a side effect is I get to write the commit messages ahead of time haha

[brandonyee]

does anyone know the extension he's using to show the live result/output text and also how sometimes shows that a variable is not defined?

[re.liable]

I understand the purpose of making the fetching function a parameter, but that will never not feel weird to me. This is an example of dependency injection right?

[TravelAddict]

I love all your videos! Thank you so much for sharing your knowledge in an absolute not boring way! Keep doing it please!

[psugasti]

What about testing jest with mongo db and express...Do you think you could do a video of that?