1
00:00:06,510 --> 00:00:09,300
- In a web application,
you typically have lots

2
00:00:09,300 --> 00:00:11,760
of functions and objects,
which call each other.

3
00:00:11,760 --> 00:00:15,090
For example, function one
might call function two

4
00:00:15,090 --> 00:00:16,770
to get back a result.

5
00:00:16,770 --> 00:00:19,050
Object one might invoke methods

6
00:00:19,050 --> 00:00:21,470
on object two to do some work.

7
00:00:21,470 --> 00:00:24,900
How do we deal with that when
it comes to unit testing?

8
00:00:24,900 --> 00:00:27,210
And because with unit
testing, we're trying to focus

9
00:00:27,210 --> 00:00:30,510
on the behavior of a single
function or a single object,

10
00:00:30,510 --> 00:00:33,172
we want to mask off any
of its dependencies.

11
00:00:33,172 --> 00:00:36,480
How can we test one function or an object

12
00:00:36,480 --> 00:00:40,260
if it depends on others which
have their own intricacies?

13
00:00:40,260 --> 00:00:43,050
And the answer is mocking.

14
00:00:43,050 --> 00:00:45,390
Jest has its own mock mechanism.

15
00:00:45,390 --> 00:00:47,970
It has the concept of a mock function.

16
00:00:47,970 --> 00:00:50,820
So an artificial replacement
for another function

17
00:00:50,820 --> 00:00:52,980
that you don't really want to call.

18
00:00:52,980 --> 00:00:55,080
So in your unit tests,

19
00:00:55,080 --> 00:00:58,920
what you can do is you can use Jest dot FN

20
00:00:58,920 --> 00:01:00,990
to create a mock function.

21
00:01:00,990 --> 00:01:03,450
You can then call that
mock function like so,

22
00:01:03,450 --> 00:01:06,450
so Jest will generate a mock function,

23
00:01:06,450 --> 00:01:07,890
an artificial function,

24
00:01:07,890 --> 00:01:10,540
which you can then invoke
and it can return a result.

25
00:01:11,520 --> 00:01:14,192
So let's see a simple
example of how that works.

26
00:01:14,192 --> 00:01:17,730
In my demo folder, I've
got some simple code

27
00:01:17,730 --> 00:01:19,410
in operations JS.

28
00:01:19,410 --> 00:01:22,350
A function F one that doesn't
really do anything much,

29
00:01:22,350 --> 00:01:24,930
a function F two that
takes some parameters,

30
00:01:24,930 --> 00:01:27,780
so when you call that function,
you pass in parameters,

31
00:01:27,780 --> 00:01:29,700
a function F three, that returns a value.

32
00:01:29,700 --> 00:01:31,200
Okay? So that's kinda like a full set

33
00:01:31,200 --> 00:01:32,670
of different functions there,

34
00:01:32,670 --> 00:01:34,800
no parameters, no return value.

35
00:01:34,800 --> 00:01:37,080
Parameters, no return value,

36
00:01:37,080 --> 00:01:39,450
return value, no parameters.

37
00:01:39,450 --> 00:01:41,670
So that code is in operations JS.

38
00:01:41,670 --> 00:01:43,170
If you look in the code folder

39
00:01:43,170 --> 00:01:45,900
you'll see here operations JS.

40
00:01:45,900 --> 00:01:48,060
That's the code that I've just shown you.

41
00:01:48,060 --> 00:01:50,250
What we'll do now is we'll see
how to mock those functions

42
00:01:50,250 --> 00:01:51,450
in our tests.

43
00:01:51,450 --> 00:01:53,580
So I've got some test
code here that shows how

44
00:01:53,580 --> 00:01:57,240
to create mocks as a
replacement for those functions.

45
00:01:57,240 --> 00:01:59,280
Okay. So first of all then.

46
00:01:59,280 --> 00:02:02,520
The first test I'm gonna show
you is really just showing how

47
00:02:02,520 --> 00:02:03,353
to create a mock function

48
00:02:03,353 --> 00:02:06,300
and how to invoke it, just
to get used to the idea.

49
00:02:06,300 --> 00:02:09,150
So in this test, I create a mock function.

50
00:02:09,150 --> 00:02:10,740
I've called it mock F one.

51
00:02:10,740 --> 00:02:12,960
It doesn't matter what I
call this variable here.

52
00:02:12,960 --> 00:02:15,840
It's just basically a pointer
to that mock function.

53
00:02:15,840 --> 00:02:17,700
I'll call it mock F one.

54
00:02:17,700 --> 00:02:20,940
When I call it, I haven't
really told Jest anything

55
00:02:20,940 --> 00:02:22,500
about this mock function.

56
00:02:22,500 --> 00:02:24,960
So what Jest will do when you invoke it,

57
00:02:24,960 --> 00:02:26,940
it'll return undefined.

58
00:02:26,940 --> 00:02:27,773
You can check here.

59
00:02:27,773 --> 00:02:29,349
When I assert the result,

60
00:02:29,349 --> 00:02:31,800
I find that the result
is actually undefined.

61
00:02:31,800 --> 00:02:32,633
Oh, and by the way,

62
00:02:32,633 --> 00:02:37,633
also you can check was this
mock function invoked once.

63
00:02:37,860 --> 00:02:42,120
Okay? So mock functions
remember information about how

64
00:02:42,120 --> 00:02:45,330
many times they were called,
what parameters were passed in,

65
00:02:45,330 --> 00:02:46,163
and such like.

66
00:02:46,163 --> 00:02:47,700
So it'll remember,

67
00:02:47,700 --> 00:02:52,080
this mock function will remember
that it's been called once.

68
00:02:52,080 --> 00:02:54,120
Okay? And if I pass the new parameters

69
00:02:54,120 --> 00:02:55,440
into the mock function,

70
00:02:55,440 --> 00:02:58,260
the mock function would know
what parameters were passed in.

71
00:02:58,260 --> 00:03:01,440
So the mock function remembers
how you've interacted

72
00:03:01,440 --> 00:03:04,050
with it, which you can then
check afterwards to see

73
00:03:04,050 --> 00:03:05,496
if it was correct.

74
00:03:05,496 --> 00:03:09,060
By default, unless you specify otherwise,

75
00:03:09,060 --> 00:03:11,520
when you call a mock function,
it returns undefined.

76
00:03:11,520 --> 00:03:14,190
How could it possibly know
what to return otherwise?

77
00:03:14,190 --> 00:03:15,090
It's just a mock.

78
00:03:15,090 --> 00:03:18,600
So by default, unless
you set it up otherwise,

79
00:03:18,600 --> 00:03:20,762
a mock function will
always return undefined

80
00:03:20,762 --> 00:03:22,233
as you've seen here.

81
00:03:23,520 --> 00:03:25,170
Right. Let's have a
look at another example.

82
00:03:25,170 --> 00:03:26,880
This is a little bit more interesting.

83
00:03:26,880 --> 00:03:30,090
This shows how you can pass
parameters into a mock function.

84
00:03:30,090 --> 00:03:31,650
So I've created a mock function,

85
00:03:31,650 --> 00:03:33,360
I've called it mock F two.

86
00:03:33,360 --> 00:03:34,860
When I call the function now,

87
00:03:34,860 --> 00:03:36,930
I've passed in some parameters,

88
00:03:36,930 --> 00:03:39,330
maybe to simulate some behavior

89
00:03:39,330 --> 00:03:41,580
and it'll give me back a result.

90
00:03:41,580 --> 00:03:43,674
And then I can have some assertions.

91
00:03:43,674 --> 00:03:45,180
I've got three assertions here,

92
00:03:45,180 --> 00:03:47,070
but it's the second one
I'll concentrate on.

93
00:03:47,070 --> 00:03:48,432
So first of all, I can assert

94
00:03:48,432 --> 00:03:51,749
that the mock function
has been called once.

95
00:03:51,749 --> 00:03:54,270
Yes, of course it has.

96
00:03:54,270 --> 00:03:56,857
I can check that the
mock function was called

97
00:03:56,857 --> 00:03:58,830
with these parameters.

98
00:03:58,830 --> 00:04:01,977
Was this mock function
invoked with these parameters?

99
00:04:01,977 --> 00:04:05,670
Yes, it was. And what's the return value?

100
00:04:05,670 --> 00:04:07,950
Well, the return value will be undefined

101
00:04:07,950 --> 00:04:09,829
because we haven't given it any more clue

102
00:04:09,829 --> 00:04:11,283
about what to return.

103
00:04:12,240 --> 00:04:14,220
If you want to tell a mock function

104
00:04:14,220 --> 00:04:17,850
what to return to simulate a
real function's return value.

105
00:04:17,850 --> 00:04:19,680
And this is how you do it.

106
00:04:19,680 --> 00:04:22,970
When you call Jest FN, you
basically provide a Lambda.

107
00:04:22,970 --> 00:04:26,730
This here simulates the return value.

108
00:04:26,730 --> 00:04:28,890
It's as if you set up a mock function,

109
00:04:28,890 --> 00:04:32,430
which, when it's invoked, will return 42.

110
00:04:32,430 --> 00:04:34,140
So here's my mock function.

111
00:04:34,140 --> 00:04:35,580
When I call the mock function,

112
00:04:35,580 --> 00:04:39,480
it'll basically run that
code and it'll return 42.

113
00:04:39,480 --> 00:04:43,050
So make sure that that
function was invoked once.

114
00:04:43,050 --> 00:04:48,050
Yes. And make sure that the result is 42.

115
00:04:48,210 --> 00:04:51,060
Okay. So when you call the mock function,

116
00:04:51,060 --> 00:04:52,740
it'll execute that Lambda.

117
00:04:52,740 --> 00:04:56,430
This is the return value
that gets assigned into here,

118
00:04:56,430 --> 00:04:58,800
which you can then check if you want to.

119
00:04:58,800 --> 00:05:02,190
Good. Right. Well, I guess
we should run those tests.

120
00:05:02,190 --> 00:05:04,986
just open up a command
window and run Jest,

121
00:05:04,986 --> 00:05:07,683
and they all pass.

122
00:05:08,610 --> 00:05:09,443
There we go.

123
00:05:09,443 --> 00:05:11,010
Okay? So that was a simple example,

124
00:05:11,010 --> 00:05:13,920
an introduction to the
concept of mocking and Jest.

125
00:05:13,920 --> 00:05:16,320
You call the Jest dot F and function.

126
00:05:16,320 --> 00:05:18,270
It returns you back a mock object.

127
00:05:18,270 --> 00:05:19,830
You can specify, you can pass parameters

128
00:05:19,830 --> 00:05:21,570
into it when you call it,

129
00:05:21,570 --> 00:05:23,700
you can specify what it should return,

130
00:05:23,700 --> 00:05:25,740
a mock return value as well.

131
00:05:25,740 --> 00:05:26,850
What we'll do in the rest

132
00:05:26,850 --> 00:05:29,820
of this lesson is to dig
deeper into mock functions

133
00:05:29,820 --> 00:05:32,130
to see how to use them
properly in the context

134
00:05:32,130 --> 00:05:35,013
of interacting functions
and interacting objects.