Unit testing in JavaScript Part 6 - Red, Green, Refactor and Jest mocks

good Monday morning today we are

continuing our journey of unit testing

in JavaScript you can check out the full

episode series playlist here let’s get

going I am mpj and you are watching fun

fun function

today we’re going to do two things we’re

going to start by removing some

duplication that we have have created in

in our previous episodes and then we are

going to continue by refactoring in our

code to instead of using our custom-made

mock functions we’re going to use the

mock function library that is built into

just let’s begin by jumping into order

total here the duplication that I’m

referring to is this here this this here

is exactly the same code as this here

one great thing with unit testing or TDD

here’s the the cycle the methodology

that you get from it I talked a little

bit before about the nice red green red

green red green cycle that we get where

we just our test is red mmm that’s nasty

that’s unbreak it comes green and it

gives you this constant sense of

progression but what I’ve neglected is

that it’s not actually two steps in the

red green cycle it’s actually red green

refactor so you write a test that is R

and it’s broken because the code that

you want doesn’t even exist yet

right the code gets green and then now

only then you you factor it because now

when you have a test or test suite that

is green you can safely safely refactor

things knowing that tests all the tests

are running an or verifying that your

code works as expected even though you

refactor it by the way if you’re not

familiar with the term refactoring it

means changing stuff around so perhaps

we just make some kind of cons some

order items and we just copy this thing

make this a function that takes an order

and then um paces in here to call that

order I said okay it still works then I

ordering there oh okay that was easy

that was too easy

just I have to break this and see if

yeah that’s it’s actually that actually

was that easy okay that was actually so

easy that I hope to dwell on it for a

bit because something amazing happened

there IIST randomly shoved things around

in a function and I had five tests for

test cases that just checked that

everything worked while I was

refactoring it and we are now safe it’s

that this is why you do unit testing so

that you can do refactoring safely and

easily next up we are going to start

playing around

well the mock functions that are built

into just and as you see here we built

our own fake fetch here and we also

created our own fake process I think

that we the fake process is so simple

that we’re probably gonna leave that be

but the fake fetch might benefit a

little bit from using the mock functions

in ingest or at least it won’t hurt them

and we will learn how the muck function

just works let’s go to Google and go

just mock functions to find the

documentation mock functions just

Facebook code blue this is how you do it

you do just start filling or fraction so

let’s actually try to start

this and go to grab this down woman you

come strike fetch – and just do just dot

dot dot dot but the dogs how does this

work Blee Blee Blee Blee Bloo okay it’s

mark

return value and we wanted to return

this thing here I’m gonna copy that

pasted it and I’m going to paste in the

fake fetch here and see what happens

okay it seems like it’s it it’s still

green that’s good realize this and here

we’re going to instead of checking this

as the fake fish is cold we’re going to

with with Jess we’re going to inspect

afterwards that function call them with

the with the correct are means all

arguments and did it at the bit to do hi

so it’s expect moxa to be cold it’s not

quite to be called width to be called

width so let’s actually then need to

expand this a little bit we’re gonna

expect fake fetch to to be cold where is

that it now it’s like that expect fake

52 to be cold with I guess the Earl here

first of all hop there we go

like that did that work no expected mob

function to have been called with

undefined as argument to what it was

called with Heather’s API okay so it

actually wants the exact signature

that’s fine so you know what I’m

actually just gonna copy that because we

know that this is correct because we

were refactoring a working test so I’m

just gonna paste that in here like that

and we have a passive test let me just

fix some bit of invitation here a little

bit spacing I’ll leave it like that

I’m cool that and we can now remove the

actually we can now remove the entire

fake fetch here cuz it’s no longer being

used and I can rename the fake fetch to

to fake fetch flip and it’s still

working one really cool thing here is

that we when we have this when we were

factoring tests and we know that code is

working we can we can actually use the

working code as a test for our test

refactoring it’s kind of like this funky

dual relationship that is why we thought

it was really cool when we just could

copy this from the failing failing test

message because we knew that what what

the code was doing was correct that is

cool but I’m skeptical about another

thing which is this entire the just mock

functions like why are we why are we

using these are they actually giving us

much benefit I would say not so much in

this case I would I would say that this

this didn’t really turn out shorter than

our previous example it just it is

pretty much the same however it still

has the benefit of being a standard way

of doing more functions because what we

just did there that was just our

personal style and if we were just a

team of developers that were inventing

these things as we went along then every

every test of every model module would

probably look a little bit different big

advantage with using something that just

is that someone familiar with just will

see that okay the mocks looked like this

and they don’t need to relearn the

implementation every time that’s pretty

much and there’s also we we made use

here of mock return value which is the

most basic basic mock thingy-thingy

but there are more complicated mocking

cases for instance we can use mock

implementation once to have the function

return something just on the first call

and then you call more complementary

ones and it will return another value on

the second call

and these things are like a little bit

more verbose to implement yourself it’s

not super complicated you have to like

create an int and then increment that so

that it returns that on other calls it’s

not rocket surgery but this will be a

lot shorter still than that

implementation so whenever you make a

mocking that is slightly more slightly

more complicated then you you you could

get some benefit by by using just as

well like from probably just terseness

it standpoint let me commit to that boom

and we’re gonna call that mmm what are

we gonna call that what did we even do

let me check the death we oh yeah we

reflected this to use the just mock

functions we factored to use yes mock

functions and there we go and that is it

for today if you have any question

or confusions or like what is this or

suggestions on what you want to see next

in this series

Unit testing in JavaScript Part 6 – Red, Green, Refactor and Jest mocks