1
00:00:01,320 --> 00:00:02,153
Instructor: In the last section,

2
00:00:02,153 --> 00:00:04,470
we tried to find our fetch comments button,

3
00:00:04,470 --> 00:00:05,730
simulate a click on it,

4
00:00:05,730 --> 00:00:07,740
and then we tried to find 500 LIs

5
00:00:07,740 --> 00:00:09,180
inside of our application.

6
00:00:09,180 --> 00:00:11,610
But depending upon your personal computer,

7
00:00:11,610 --> 00:00:13,650
you either saw our test fail

8
00:00:13,650 --> 00:00:14,790
or you saw an err message

9
00:00:14,790 --> 00:00:16,840
that might've looked something like this.

10
00:00:17,790 --> 00:00:19,440
If I scroll up to the top of this err message,

11
00:00:19,440 --> 00:00:22,710
it says "Cannot read property 'map' of undefined."

12
00:00:22,710 --> 00:00:23,543
So in this section,

13
00:00:23,543 --> 00:00:25,740
we're gonna figure out what's going wrong.

14
00:00:25,740 --> 00:00:26,820
Well, I'm gonna first start off

15
00:00:26,820 --> 00:00:29,040
by showing you a quick diagram.

16
00:00:29,040 --> 00:00:30,360
So inside that test file,

17
00:00:30,360 --> 00:00:32,040
we are successfully triggering

18
00:00:32,040 --> 00:00:34,470
that click event on the button element.

19
00:00:34,470 --> 00:00:37,050
The action creator definitely is getting called,

20
00:00:37,050 --> 00:00:38,670
that request is issued,

21
00:00:38,670 --> 00:00:40,680
but then here is the problem.

22
00:00:40,680 --> 00:00:43,560
The request fails to retrieve any comments

23
00:00:43,560 --> 00:00:45,660
from that JSON API.

24
00:00:45,660 --> 00:00:47,550
So let me tell you about why that's happening,

25
00:00:47,550 --> 00:00:48,990
why the request is failing

26
00:00:48,990 --> 00:00:50,340
and tell you a little bit more about

27
00:00:50,340 --> 00:00:52,380
why we're seeing this err message appear over here

28
00:00:52,380 --> 00:00:55,200
that says "Cannot read property 'map' of undefined".

29
00:00:55,200 --> 00:00:56,033
Now just to be clear,

30
00:00:56,033 --> 00:00:57,450
if you don't see this message,

31
00:00:57,450 --> 00:00:59,400
if you instead see a failing test

32
00:00:59,400 --> 00:01:01,620
that says that you found zero LIs,

33
00:01:01,620 --> 00:01:02,910
that's totally fine as well.

34
00:01:02,910 --> 00:01:04,170
Your test is still failing

35
00:01:04,170 --> 00:01:05,373
for the same reason.

36
00:01:06,300 --> 00:01:08,613
All right, so quick diagram.

37
00:01:10,200 --> 00:01:11,033
So you'll recall

38
00:01:11,033 --> 00:01:13,020
that we looked at a diagram very similar to this

39
00:01:13,020 --> 00:01:14,940
earlier on inside the course.

40
00:01:14,940 --> 00:01:17,550
We had said that when we run our test suite, Jest,

41
00:01:17,550 --> 00:01:19,530
inside the command line environment,

42
00:01:19,530 --> 00:01:22,080
we are essentially executing our application

43
00:01:22,080 --> 00:01:23,940
inside of a different environment

44
00:01:23,940 --> 00:01:25,503
than the usual browser.

45
00:01:26,520 --> 00:01:27,750
So when our test suite runs,

46
00:01:27,750 --> 00:01:31,230
all of our code is making use of that jsdom API.

47
00:01:31,230 --> 00:01:33,120
And we had said that that jsdom API

48
00:01:33,120 --> 00:01:36,570
is kind of like a fake browser environment.

49
00:01:36,570 --> 00:01:38,220
It kind of mocks out or it fakes

50
00:01:38,220 --> 00:01:40,743
a lot of the functionality of a normal browser.

51
00:01:41,670 --> 00:01:42,990
So the issue is that

52
00:01:42,990 --> 00:01:45,390
when our application tries to use Axios

53
00:01:45,390 --> 00:01:47,490
to make a request to the outside world

54
00:01:47,490 --> 00:01:49,380
or to some outside API,

55
00:01:49,380 --> 00:01:52,110
that request is failing entirely

56
00:01:52,110 --> 00:01:53,100
because we are working

57
00:01:53,100 --> 00:01:55,740
with a fake browser environment.

58
00:01:55,740 --> 00:01:56,850
We don't have the ability

59
00:01:56,850 --> 00:01:58,350
to make AJAX requests

60
00:01:58,350 --> 00:01:59,640
from within our test suite

61
00:01:59,640 --> 00:02:02,190
when we are making use of jsdom.

62
00:02:02,190 --> 00:02:04,410
So that's why we're seeing that failure err message

63
00:02:04,410 --> 00:02:05,970
and that's why you might be also seeing

64
00:02:05,970 --> 00:02:09,360
something that says found zero LIs.

65
00:02:09,360 --> 00:02:11,009
To give you a little bit better explanation

66
00:02:11,009 --> 00:02:14,010
on "Cannot read property 'map' of undefined" right here,

67
00:02:14,010 --> 00:02:15,330
we're seeing this err message

68
00:02:15,330 --> 00:02:17,400
or you might be seeing this err message

69
00:02:17,400 --> 00:02:21,393
because back inside of our comments reducer,

70
00:02:22,560 --> 00:02:25,440
right here, action.payload.data.map,

71
00:02:25,440 --> 00:02:28,290
if the request fails to retrieve any data,

72
00:02:28,290 --> 00:02:31,020
then the data property right here will be undefined.

73
00:02:31,020 --> 00:02:33,600
And so we cannot call map on undefined.

74
00:02:33,600 --> 00:02:36,200
That's why we're seeing that particular err message.

75
00:02:37,170 --> 00:02:39,660
All right, so how do we get around this?

76
00:02:39,660 --> 00:02:42,600
How do we somehow test an Axios request

77
00:02:42,600 --> 00:02:44,610
or any type of network request

78
00:02:44,610 --> 00:02:46,200
when we are testing our code

79
00:02:46,200 --> 00:02:47,580
from the command line environment

80
00:02:47,580 --> 00:02:49,113
and making use of jsdom?

81
00:02:50,010 --> 00:02:51,000
Well, to make this work

82
00:02:51,000 --> 00:02:54,030
and to make our test suite function the way we expect,

83
00:02:54,030 --> 00:02:55,440
we're going to use a package

84
00:02:55,440 --> 00:02:57,660
that we installed just a couple sections ago

85
00:02:57,660 --> 00:02:58,830
when we first started working

86
00:02:58,830 --> 00:03:01,770
on this fetch request feature.

87
00:03:01,770 --> 00:03:02,603
So you might recall

88
00:03:02,603 --> 00:03:05,820
that we installed a package called Moxios.

89
00:03:05,820 --> 00:03:09,437
Moxios, the name is kind of a play on Axios.

90
00:03:09,437 --> 00:03:13,230
Moxios means like mock out the Axios API

91
00:03:13,230 --> 00:03:15,510
or kind of trick Axios into thinking

92
00:03:15,510 --> 00:03:18,120
that it's working the way it should work.

93
00:03:18,120 --> 00:03:20,190
The idea behind that Moxios library

94
00:03:20,190 --> 00:03:22,410
is that we can tell it to watch Axios

95
00:03:22,410 --> 00:03:24,240
for attempting to make a request

96
00:03:24,240 --> 00:03:25,530
and anytime it does,

97
00:03:25,530 --> 00:03:28,170
we're going to trick Axios into thinking

98
00:03:28,170 --> 00:03:31,410
that it instantly gets a response.

99
00:03:31,410 --> 00:03:34,470
No network request is going to be actually created.

100
00:03:34,470 --> 00:03:36,000
So the instant Axios

101
00:03:36,000 --> 00:03:37,830
tries to make a network request,

102
00:03:37,830 --> 00:03:39,360
Moxios is gonna axe that.

103
00:03:39,360 --> 00:03:40,530
It's gonna say, nope,

104
00:03:40,530 --> 00:03:42,870
you're not allowed to make any request,

105
00:03:42,870 --> 00:03:43,800
but it's going to instead,

106
00:03:43,800 --> 00:03:45,630
rather than just straight up denying it

107
00:03:45,630 --> 00:03:47,370
or straight up failing the request,

108
00:03:47,370 --> 00:03:49,470
Moxios is going to very quickly turn back around

109
00:03:49,470 --> 00:03:51,180
and say oh hey, yeah,

110
00:03:51,180 --> 00:03:52,560
that request, don't worry about it.

111
00:03:52,560 --> 00:03:53,820
It didn't actually get issued

112
00:03:53,820 --> 00:03:55,710
but here is some data

113
00:03:55,710 --> 00:03:57,270
that you should use in place

114
00:03:57,270 --> 00:03:59,280
of whatever would've come back from that API

115
00:03:59,280 --> 00:04:01,530
that you're trying to make the request to.

116
00:04:01,530 --> 00:04:04,320
So Moxios is around solely to help us out

117
00:04:04,320 --> 00:04:06,300
inside of our test environment.

118
00:04:06,300 --> 00:04:08,010
That's all we're using it for.

119
00:04:08,010 --> 00:04:09,210
We're never gonna use Moxios

120
00:04:09,210 --> 00:04:11,430
in a real production application

121
00:04:11,430 --> 00:04:14,820
because it's sole purpose is to fake out requests

122
00:04:14,820 --> 00:04:16,380
or to trick Axios

123
00:04:16,380 --> 00:04:19,023
into thinking a request was successfully issued.

124
00:04:20,040 --> 00:04:21,870
So that's how we're gonna fix this issue.

125
00:04:21,870 --> 00:04:22,950
We're going to keep Axios

126
00:04:22,950 --> 00:04:24,330
from trying to make any request

127
00:04:24,330 --> 00:04:25,350
to the outside world

128
00:04:25,350 --> 00:04:27,150
by setting up Moxios

129
00:04:27,150 --> 00:04:28,650
inside of our test suite.

130
00:04:28,650 --> 00:04:29,910
So let's take a quick pause right here.

131
00:04:29,910 --> 00:04:31,020
We'll come back to the next section

132
00:04:31,020 --> 00:04:32,620
and start setting that thing up.