1
00:00:00,960 --> 00:00:01,793
Instructor: In the last section,

2
00:00:01,793 --> 00:00:04,410
we spoke about the purpose of the it function.

3
00:00:04,410 --> 00:00:07,440
So we've now provided it a description right here.

4
00:00:07,440 --> 00:00:08,970
And then in the body of this function,

5
00:00:08,970 --> 00:00:11,040
we're going to write out the actual test logic

6
00:00:11,040 --> 00:00:14,910
that proves that our app component shows a comment box.

7
00:00:14,910 --> 00:00:17,040
So to write the actual test logic inside of here,

8
00:00:17,040 --> 00:00:19,500
we're gonna write out some code that looks very similar,

9
00:00:19,500 --> 00:00:20,760
almost identical.

10
00:00:20,760 --> 00:00:23,190
Well, actually, it is identical to some of the code

11
00:00:23,190 --> 00:00:26,400
that we saw earlier when we first generated our project.

12
00:00:26,400 --> 00:00:27,900
So we're just gonna write that code out

13
00:00:27,900 --> 00:00:30,630
and then we'll talk about exactly what it's doing.

14
00:00:30,630 --> 00:00:32,400
So inside of the it function,

15
00:00:32,400 --> 00:00:37,400
I'll write out const div = document.create div.

16
00:00:41,370 --> 00:00:45,543
Then underneath that, we'll write out ReactDOM.render.

17
00:00:46,680 --> 00:00:50,460
I'll pass in an instance of our app component like so.

18
00:00:50,460 --> 00:00:53,060
And then as a second argument, I'll pass in the div.

19
00:00:53,970 --> 00:00:55,830
And then finally on the third line down here,

20
00:00:55,830 --> 00:00:58,113
I'll say ReactDOM.unmountComponentAtNode.

21
00:01:02,790 --> 00:01:04,813
And I'll pass in the same div like so.

22
00:01:06,098 --> 00:01:07,740
So three lines of code.

23
00:01:07,740 --> 00:01:08,573
At present,

24
00:01:08,573 --> 00:01:12,090
these three lines of code will somewhat test our component,

25
00:01:12,090 --> 00:01:14,130
but they don't actually kind of really say

26
00:01:14,130 --> 00:01:17,370
that the component is doing any distinct behavior.

27
00:01:17,370 --> 00:01:18,690
All that's happening right now

28
00:01:18,690 --> 00:01:21,240
is we're gonna try to render our app component.

29
00:01:21,240 --> 00:01:22,380
And that's pretty much it.

30
00:01:22,380 --> 00:01:24,690
Nothing else really happens.

31
00:01:24,690 --> 00:01:27,090
And so if we ran this test as it stands right now,

32
00:01:27,090 --> 00:01:28,740
this test would really just prove

33
00:01:28,740 --> 00:01:30,840
that our app component does not crash

34
00:01:30,840 --> 00:01:33,810
or does not throw an error when we try to render it.

35
00:01:33,810 --> 00:01:35,040
Now, that's definitely useful,

36
00:01:35,040 --> 00:01:37,830
but it doesn't really meet the goal of the test,

37
00:01:37,830 --> 00:01:40,170
which is to somehow prove that the app component

38
00:01:40,170 --> 00:01:42,393
shows a comment box inside of it.

39
00:01:43,410 --> 00:01:46,230
Now, before we move forward and modify this code at all,

40
00:01:46,230 --> 00:01:49,170
let's dive into these three lines right here

41
00:01:49,170 --> 00:01:51,243
and get a better idea of what's going on.

42
00:01:52,380 --> 00:01:54,063
So I'm gonna pull up a diagram.

43
00:01:55,800 --> 00:01:57,330
Here we go.

44
00:01:57,330 --> 00:01:59,640
So as we've said several times now,

45
00:01:59,640 --> 00:02:01,350
anytime you and I run our tests,

46
00:02:01,350 --> 00:02:03,930
we're gonna flip on over to our command line

47
00:02:03,930 --> 00:02:07,470
and execute the npm-run-test command.

48
00:02:07,470 --> 00:02:09,750
When we run that command, it starts up jest,

49
00:02:09,750 --> 00:02:12,420
which is our automated test runner.

50
00:02:12,420 --> 00:02:14,340
So the important thing here to understand

51
00:02:14,340 --> 00:02:16,200
is that when we run jest,

52
00:02:16,200 --> 00:02:20,070
it's being executed inside of our command line environment.

53
00:02:20,070 --> 00:02:22,560
It's being ran from the terminal.

54
00:02:22,560 --> 00:02:25,620
The issue with that is that when we try to run React

55
00:02:25,620 --> 00:02:27,540
in any way, shape, or form,

56
00:02:27,540 --> 00:02:29,130
React always expects

57
00:02:29,130 --> 00:02:32,790
that it's being executed inside the browser.

58
00:02:32,790 --> 00:02:35,730
The React library itself only functions correctly

59
00:02:35,730 --> 00:02:38,760
if it's being executed inside the browser.

60
00:02:38,760 --> 00:02:42,150
And so you can kind of very quickly realize that the browser

61
00:02:42,150 --> 00:02:45,660
and the command line environment are not the same thing,

62
00:02:45,660 --> 00:02:48,990
but we want to somehow run our React code nonetheless.

63
00:02:48,990 --> 00:02:50,100
So to solve this issue,

64
00:02:50,100 --> 00:02:52,200
to solve the fact that React expects

65
00:02:52,200 --> 00:02:54,360
to be executed inside the browser,

66
00:02:54,360 --> 00:02:57,210
but we are running jest from the command line,

67
00:02:57,210 --> 00:03:00,630
Create React App automatically installed a dependency

68
00:03:00,630 --> 00:03:03,960
into our project when we first generated it.

69
00:03:03,960 --> 00:03:06,423
That dependency is called JSDOM.

70
00:03:07,650 --> 00:03:11,280
The JSDOM library is kind of a code implementation

71
00:03:11,280 --> 00:03:14,310
or a JavaScript code implementation

72
00:03:14,310 --> 00:03:16,560
of how the browser works.

73
00:03:16,560 --> 00:03:19,110
So you can kind of imagine that JSDOM right here

74
00:03:19,110 --> 00:03:21,630
kind of fakes out the existence of the browser

75
00:03:21,630 --> 00:03:25,380
and fools or tricks the React library into thinking

76
00:03:25,380 --> 00:03:29,340
that there is in fact a browser that React is working with.

77
00:03:29,340 --> 00:03:30,900
So when you and I,

78
00:03:30,900 --> 00:03:32,460
right here on this line of code

79
00:03:32,460 --> 00:03:34,140
or this little segment of code right here,

80
00:03:34,140 --> 00:03:37,140
start making reference to something called document

81
00:03:37,140 --> 00:03:40,020
or when we try to create a div element,

82
00:03:40,020 --> 00:03:43,200
we're not actually creating a div inside of a browser.

83
00:03:43,200 --> 00:03:44,790
There's no div inside of a browser,

84
00:03:44,790 --> 00:03:47,040
there's no Chrome here, there's no Firefox,

85
00:03:47,040 --> 00:03:48,840
no Internet Explorer.

86
00:03:48,840 --> 00:03:52,140
Instead, when this code is executed from our terminal,

87
00:03:52,140 --> 00:03:55,140
we make use automatically of the JSDOM library

88
00:03:55,140 --> 00:03:57,750
to create a fake div.

89
00:03:57,750 --> 00:03:59,880
So this div right here, not a real div.

90
00:03:59,880 --> 00:04:01,650
It's a fake div that exists

91
00:04:01,650 --> 00:04:04,620
solely inside of memory inside the terminal,

92
00:04:04,620 --> 00:04:07,440
and it does not exist inside of any browser.

93
00:04:07,440 --> 00:04:09,540
But that's good enough to fool out React

94
00:04:09,540 --> 00:04:11,130
and make it think that it's actually

95
00:04:11,130 --> 00:04:13,743
working directly inside of a browser.

96
00:04:14,730 --> 00:04:16,050
So that kinda gives you a better idea

97
00:04:16,050 --> 00:04:17,910
of what's going on behind the scenes here

98
00:04:17,910 --> 00:04:20,279
when we start calling things like document.

99
00:04:20,279 --> 00:04:22,019
Remember, document is traditionally an object

100
00:04:22,019 --> 00:04:24,210
that exists solely inside the browser.

101
00:04:24,210 --> 00:04:25,770
This document object right here

102
00:04:25,770 --> 00:04:28,980
is automatically furnished for us by JSDOM.

103
00:04:28,980 --> 00:04:30,480
That's where it's coming from.

104
00:04:31,650 --> 00:04:33,390
So now that you have that in mind,

105
00:04:33,390 --> 00:04:34,980
I wanna give you a second diagram

106
00:04:34,980 --> 00:04:36,450
that's gonna give you a better idea

107
00:04:36,450 --> 00:04:39,200
of what's going on with the overall snippet right here.

108
00:04:40,860 --> 00:04:42,960
So here's pretty much what's going on.

109
00:04:42,960 --> 00:04:44,790
With that little chunk of code,

110
00:04:44,790 --> 00:04:48,270
we are telling the library, JSDOM,

111
00:04:48,270 --> 00:04:50,640
to create a new div element.

112
00:04:50,640 --> 00:04:53,700
So this is an element that exists solely in memory

113
00:04:53,700 --> 00:04:55,710
and is not tied to any browser instance

114
00:04:55,710 --> 00:04:57,033
or anything like that.

115
00:04:57,990 --> 00:05:00,930
We then attempt to take our app component instance

116
00:05:00,930 --> 00:05:03,360
and render it into this div right here,

117
00:05:03,360 --> 00:05:05,640
this kind of div that's floating in space

118
00:05:05,640 --> 00:05:08,280
solely inside of our terminal.

119
00:05:08,280 --> 00:05:09,600
So behind the scenes,

120
00:05:09,600 --> 00:05:12,510
React is going to take our app component,

121
00:05:12,510 --> 00:05:16,830
it's gonna take the HTML that is produced by that component,

122
00:05:16,830 --> 00:05:18,300
it's gonna take that HTML

123
00:05:18,300 --> 00:05:20,763
and stick it into that div element.

124
00:05:22,440 --> 00:05:24,630
So after this line of code right here

125
00:05:24,630 --> 00:05:27,633
where we go through that process right down here,

126
00:05:28,590 --> 00:05:29,940
we then have the ability

127
00:05:29,940 --> 00:05:31,890
to write out some additional amount of code

128
00:05:31,890 --> 00:05:33,930
that inspects that div element

129
00:05:33,930 --> 00:05:37,050
and figure out exactly what's going on inside of it.

130
00:05:37,050 --> 00:05:37,883
So right here,

131
00:05:37,883 --> 00:05:40,140
you and I could possibly write out some code

132
00:05:40,140 --> 00:05:43,440
that maybe looks inside the div

133
00:05:43,440 --> 00:05:48,440
and checks to see if the comment box is in there.

134
00:05:50,850 --> 00:05:53,340
So that div is gonna contain all the HTML

135
00:05:53,340 --> 00:05:55,500
that was produced by the app component.

136
00:05:55,500 --> 00:05:56,700
And so in theory,

137
00:05:56,700 --> 00:05:59,100
hopefully gonna contain the HTML

138
00:05:59,100 --> 00:06:02,040
that belongs to the comment box as well.

139
00:06:02,040 --> 00:06:04,320
So that's why right here is a perfect place

140
00:06:04,320 --> 00:06:06,030
to write one more line of code

141
00:06:06,030 --> 00:06:07,500
that's gonna look inside that div

142
00:06:07,500 --> 00:06:10,770
and check to see if the comment box actually exists.

143
00:06:10,770 --> 00:06:12,450
So we'll write out that code in just a moment,

144
00:06:12,450 --> 00:06:13,620
but before we do,

145
00:06:13,620 --> 00:06:16,233
I want to mention the last line of code right here.

146
00:06:17,820 --> 00:06:19,140
So on this line of code,

147
00:06:19,140 --> 00:06:21,060
I bet you can read this function name

148
00:06:21,060 --> 00:06:22,860
and get a good idea of what's going on.

149
00:06:22,860 --> 00:06:24,960
This function is gonna look at the div,

150
00:06:24,960 --> 00:06:26,850
it's gonna find the app component

151
00:06:26,850 --> 00:06:28,200
that we just rendered into it,

152
00:06:28,200 --> 00:06:31,860
and it's going to remove that app component entirely.

153
00:06:31,860 --> 00:06:33,390
So this right here is a step

154
00:06:33,390 --> 00:06:37,140
that we refer to as cleanup after our test run.

155
00:06:37,140 --> 00:06:38,820
You see, anytime we start running tests,

156
00:06:38,820 --> 00:06:40,650
anytime we start running dozens,

157
00:06:40,650 --> 00:06:42,990
or hundreds, or even thousands of tests,

158
00:06:42,990 --> 00:06:44,490
we start getting a little bit concerned

159
00:06:44,490 --> 00:06:46,860
about the performance of our tests.

160
00:06:46,860 --> 00:06:49,200
So many times after running some testing code,

161
00:06:49,200 --> 00:06:51,120
we'll do a little bit of cleanup,

162
00:06:51,120 --> 00:06:53,910
or we'll kind of destroy any leftover objects,

163
00:06:53,910 --> 00:06:55,230
or unmount any components

164
00:06:55,230 --> 00:06:57,450
that we had created during the test.

165
00:06:57,450 --> 00:06:59,940
And that's exactly what's happening right here.

166
00:06:59,940 --> 00:07:01,890
If we do not call this function right here

167
00:07:01,890 --> 00:07:03,690
in attempt to clean up the div

168
00:07:03,690 --> 00:07:05,970
or the component inside that div,

169
00:07:05,970 --> 00:07:08,220
then the component will just sit around forever

170
00:07:08,220 --> 00:07:10,260
as long as our test suite is running.

171
00:07:10,260 --> 00:07:11,190
And over time,

172
00:07:11,190 --> 00:07:13,080
that's gonna take up some amount of memory

173
00:07:13,080 --> 00:07:14,910
and it's going to cause our entire test suite

174
00:07:14,910 --> 00:07:17,460
to run more and more slowly,

175
00:07:17,460 --> 00:07:19,980
which is obviously not ideal.

176
00:07:19,980 --> 00:07:20,813
Throughout this course,

177
00:07:20,813 --> 00:07:22,530
I'm gonna make sure I pay special attention

178
00:07:22,530 --> 00:07:24,000
and tell you directly,

179
00:07:24,000 --> 00:07:27,150
very clearly whenever we are writing some cleanup code

180
00:07:27,150 --> 00:07:28,800
so that you start to develop a sense

181
00:07:28,800 --> 00:07:30,720
of when we need to clean something up

182
00:07:30,720 --> 00:07:32,790
and when we can kind of just throw it away

183
00:07:32,790 --> 00:07:33,963
and not worry about it.

184
00:07:35,010 --> 00:07:37,320
So now that we've kind of pulled this chunk

185
00:07:37,320 --> 00:07:39,630
of code right here apart in great detail,

186
00:07:39,630 --> 00:07:41,130
let's take a quick pause.

187
00:07:41,130 --> 00:07:42,810
And when we come back to the next section,

188
00:07:42,810 --> 00:07:45,060
we will start to add another line of code

189
00:07:45,060 --> 00:07:46,650
that's gonna look inside that div

190
00:07:46,650 --> 00:07:48,840
and see if the comment box is there.

191
00:07:48,840 --> 00:07:51,290
So quick break and I'll see you in just a minute.