1
00:00:01,110 --> 00:00:01,943
Instructor: In the last section,

2
00:00:01,943 --> 00:00:04,140
we spoke about why this expectation right here

3
00:00:04,140 --> 00:00:05,939
left a little bit to be desired.

4
00:00:05,939 --> 00:00:09,060
At present, our App.test file has knowledge

5
00:00:09,060 --> 00:00:12,510
of exactly what that CommentBox component is doing,

6
00:00:12,510 --> 00:00:14,220
and that's really not ideal.

7
00:00:14,220 --> 00:00:16,230
So in this section, we're gonna start moving

8
00:00:16,230 --> 00:00:18,600
towards a refactor of this line of code right here

9
00:00:18,600 --> 00:00:21,360
to make sure that our app test is only aware

10
00:00:21,360 --> 00:00:23,790
of the existence of the CommentBox,

11
00:00:23,790 --> 00:00:27,600
rather than having knowledge of its internal implementation.

12
00:00:27,600 --> 00:00:28,560
We're gonna first start off

13
00:00:28,560 --> 00:00:31,230
by taking a look at essentially the line of code

14
00:00:31,230 --> 00:00:33,330
that we eventually want to write here.

15
00:00:33,330 --> 00:00:35,910
So I do not really want to write the code that says,

16
00:00:35,910 --> 00:00:38,040
Look at this innerHTML and figure out

17
00:00:38,040 --> 00:00:41,370
whether or not the inner contents of the CommentBox round.

18
00:00:41,370 --> 00:00:43,830
Instead, I would really prefer

19
00:00:43,830 --> 00:00:45,810
to write something that looks like this:

20
00:00:45,810 --> 00:00:47,950
expect that div
(typing)

21
00:00:47,950 --> 00:00:52,200
toHaveAnInstanceOf
(typing)

22
00:00:52,200 --> 00:00:53,850
CommentBox.
(typing)

23
00:00:53,850 --> 00:00:55,770
This would be much more ideal.

24
00:00:55,770 --> 00:00:57,960
I would love to write out a line of code that says,

25
00:00:57,960 --> 00:01:00,330
Yeah, that div that we just rendered something into

26
00:01:00,330 --> 00:01:03,270
has an instance of the CommentBox inside of it,

27
00:01:03,270 --> 00:01:05,459
and then we could kind of just let

28
00:01:05,459 --> 00:01:06,810
React figure out what to do,

29
00:01:06,810 --> 00:01:10,080
and let Jest figure out what to do with this line of code.

30
00:01:10,080 --> 00:01:10,920
Now unfortunately,

31
00:01:10,920 --> 00:01:13,170
you and I cannot really write out this line of code

32
00:01:13,170 --> 00:01:14,340
directly right here.

33
00:01:14,340 --> 00:01:16,410
There's nothing inside of our project right now

34
00:01:16,410 --> 00:01:19,110
that has a matcher like this, totally undefined,

35
00:01:19,110 --> 00:01:20,850
so if we ran this code, as it stands,

36
00:01:20,850 --> 00:01:22,560
we'd definitely get an error.

37
00:01:22,560 --> 00:01:26,190
Now, we could definitely add in a custom matcher of our own

38
00:01:26,190 --> 00:01:28,800
to kind of implement this finding behavior

39
00:01:28,800 --> 00:01:29,633
and make sure

40
00:01:29,633 --> 00:01:32,190
that the div contains the CommentBox component,

41
00:01:32,190 --> 00:01:35,730
but that would involve a lot of work on our behalf.

42
00:01:35,730 --> 00:01:37,830
We would have to get a really deep understanding

43
00:01:37,830 --> 00:01:41,220
of how React works to be able to write out a line of code

44
00:01:41,220 --> 00:01:42,840
that does this right here.

45
00:01:42,840 --> 00:01:45,390
So rather than going through all that extra work,

46
00:01:45,390 --> 00:01:49,020
you and I are going to instead install another library

47
00:01:49,020 --> 00:01:51,660
that's going to let us write out a line of code

48
00:01:51,660 --> 00:01:53,730
that's going to eventually look very similar

49
00:01:53,730 --> 00:01:55,020
to this right here.

50
00:01:55,020 --> 00:01:56,760
So this extra library

51
00:01:56,760 --> 00:02:00,360
that you and I are going to install is called Enzyme.

52
00:02:00,360 --> 00:02:02,640
Enzyme is an open source repository

53
00:02:02,640 --> 00:02:05,190
or open source package, created by Airbnb,

54
00:02:05,190 --> 00:02:07,830
specifically made for testing React components

55
00:02:07,830 --> 00:02:09,449
a little bit easier,

56
00:02:09,449 --> 00:02:11,400
and it allows us to write out code

57
00:02:11,400 --> 00:02:13,560
that looks a little bit closer to this.

58
00:02:13,560 --> 00:02:14,430
We can say,

59
00:02:14,430 --> 00:02:17,640
Hey Enzyme, I expect that this rendered component

60
00:02:17,640 --> 00:02:21,210
has an Instance of some other component inside of it,

61
00:02:21,210 --> 00:02:23,040
and Enzyme is just gonna take over

62
00:02:23,040 --> 00:02:25,650
and figure out what to do for us.

63
00:02:25,650 --> 00:02:26,970
So that's the goal of Enzyme.

64
00:02:26,970 --> 00:02:29,190
It just lets us write expectations

65
00:02:29,190 --> 00:02:31,710
that are a little bit more closely configured

66
00:02:31,710 --> 00:02:33,573
with how React works.

67
00:02:34,950 --> 00:02:37,530
Now I'm going to first delete that line of code right there

68
00:02:37,530 --> 00:02:40,140
because that's not precisely what we're gonna write,

69
00:02:40,140 --> 00:02:41,640
and I'm going to uncomment the old one

70
00:02:41,640 --> 00:02:43,980
just to keep that around.

71
00:02:43,980 --> 00:02:45,870
And then we're going to get to installing

72
00:02:45,870 --> 00:02:47,550
that Enzyme package.

73
00:02:47,550 --> 00:02:49,260
So, let's get to it.

74
00:02:49,260 --> 00:02:50,610
To install Enzyme,

75
00:02:50,610 --> 00:02:52,950
I'm gonna first change on over to my terminal.

76
00:02:52,950 --> 00:02:54,990
I'm gonna stop my test runner over here

77
00:02:54,990 --> 00:02:56,403
by hitting Control C.

78
00:02:58,230 --> 00:03:00,540
Then, while still inside of my project directory,

79
00:03:00,540 --> 00:03:03,780
I'm going to install two packages with NPM

80
00:03:03,780 --> 00:03:05,700
that are going to allow us to get started set up

81
00:03:05,700 --> 00:03:08,550
with Enzyme inside of our project.

82
00:03:08,550 --> 00:03:13,470
So I'll run npm install --save enzyme,

83
00:03:13,470 --> 00:03:15,810
and then we're gonna get a second package.

84
00:03:15,810 --> 00:03:16,740
And I wanna be really clear

85
00:03:16,740 --> 00:03:18,480
before you write anything right here,

86
00:03:18,480 --> 00:03:21,420
depending upon the version of React that you're using,

87
00:03:21,420 --> 00:03:23,730
the name of the package that you're going to install

88
00:03:23,730 --> 00:03:26,040
is gonna be slightly different.

89
00:03:26,040 --> 00:03:28,740
So, the overall name that we're gonna use is

90
00:03:28,740 --> 00:03:33,740
enzyme-adapter-React-
(typing)

91
00:03:34,110 --> 00:03:35,310
and then here's the important part.

92
00:03:35,310 --> 00:03:37,080
So don't hit Enter just yet.

93
00:03:37,080 --> 00:03:39,330
The last part of this package name right here

94
00:03:39,330 --> 00:03:42,390
is gonna change depending upon the version of React

95
00:03:42,390 --> 00:03:43,560
that you're using.

96
00:03:43,560 --> 00:03:44,580
So really quickly,

97
00:03:44,580 --> 00:03:47,400
I want you to flip back over to your code editor,

98
00:03:47,400 --> 00:03:50,910
and then I want you to open up your package.json file.

99
00:03:50,910 --> 00:03:53,460
So inside of here, in the dependency section,

100
00:03:53,460 --> 00:03:56,250
you're gonna find the entry for React.

101
00:03:56,250 --> 00:03:59,910
Now me personally, I'm running React version 16 right now.

102
00:03:59,910 --> 00:04:04,263
You might be running version 17, 18, 19, 20, whatever it is.

103
00:04:05,370 --> 00:04:08,220
You want to find the version of React that you're using.

104
00:04:08,220 --> 00:04:09,453
So I'm 16.

105
00:04:10,380 --> 00:04:12,180
Then you're gonna take that version,

106
00:04:12,180 --> 00:04:14,130
and you're gonna go back over to your terminal,

107
00:04:14,130 --> 00:04:17,250
and you're gonna put that number at the very end.

108
00:04:17,250 --> 00:04:21,120
So you want enzyme-adapter-react-

109
00:04:21,120 --> 00:04:24,540
and then whatever version of React that you're using.

110
00:04:24,540 --> 00:04:29,130
I'm 16, you might be 17, 18, 19, 20, whatever you're using.

111
00:04:29,130 --> 00:04:30,330
So once I get that in there,

112
00:04:30,330 --> 00:04:32,553
I'll then hit Enter, and I'm good to go.

113
00:04:33,630 --> 00:04:34,770
Now while that's installing,

114
00:04:34,770 --> 00:04:38,100
we're gonna do one more little piece of configuration.

115
00:04:38,100 --> 00:04:39,300
As you might be able to guess

116
00:04:39,300 --> 00:04:40,890
from this package that we're installing,

117
00:04:40,890 --> 00:04:45,690
it'll be like version 16 of Enzyme Adapt to React.

118
00:04:45,690 --> 00:04:48,270
Well, Enzyme behaves slightly different

119
00:04:48,270 --> 00:04:51,360
depending upon the version of React that we're using.

120
00:04:51,360 --> 00:04:55,500
So we have to do just a tiny, tiny touch of setup of Enzyme

121
00:04:55,500 --> 00:04:58,230
before we can actually use it inside of our test setup.

122
00:04:58,230 --> 00:05:00,690
So we're gonna go through that setup right now.

123
00:05:00,690 --> 00:05:03,390
So to set up Enzyme inside of our project,

124
00:05:03,390 --> 00:05:05,400
I'm gonna go back over to my project directory,

125
00:05:05,400 --> 00:05:07,050
my code editor, excuse me,

126
00:05:07,050 --> 00:05:09,600
and I'm gonna find my SRC directory.

127
00:05:09,600 --> 00:05:11,880
Then inside that SRC directory,

128
00:05:11,880 --> 00:05:16,880
I'm gonna make a new file called setupTests.js.

129
00:05:18,450 --> 00:05:21,480
Now the name of this file right here is extremely important,

130
00:05:21,480 --> 00:05:23,550
so please make sure that you name this file

131
00:05:23,550 --> 00:05:27,453
setupTests.js as well, with the exact same capitalization.

132
00:05:28,470 --> 00:05:30,153
Then once you create that file,

133
00:05:31,200 --> 00:05:33,420
we'll go ahead and open it up,

134
00:05:33,420 --> 00:05:35,310
and then we're gonna add just a tiny bit of code

135
00:05:35,310 --> 00:05:36,660
to this thing.

136
00:05:36,660 --> 00:05:38,340
So at the very top, we'll write

137
00:05:38,340 --> 00:05:42,780
import Enzyme from 'enzyme'
(typing)

138
00:05:42,780 --> 00:05:44,733
and please do check the spelling on it,

139
00:05:45,750 --> 00:05:46,583
and we'll do

140
00:05:46,583 --> 00:05:47,730
import Adapter
(typing)

141
00:05:47,730 --> 00:05:51,570
from 'enzyme-adapter-react-'
(typing)

142
00:05:51,570 --> 00:05:54,840
and then again, whatever version of React you're using here,

143
00:05:54,840 --> 00:05:58,770
I'm using version 16, so I'm gonna put down -16.

144
00:05:58,770 --> 00:06:02,490
So if you have React versions 16, 17, 18, 19,

145
00:06:02,490 --> 00:06:04,790
make sure you put the appropriate number here.

146
00:06:05,970 --> 00:06:07,260
Then underneath that we'll say

147
00:06:07,260 --> 00:06:09,990
Enzyme.configure
(typing)

148
00:06:09,990 --> 00:06:11,940
and we'll pass in an object that says

149
00:06:11,940 --> 00:06:15,720
adapter is new Adapter
(typing)

150
00:06:15,720 --> 00:06:16,770
and that's pretty much it.

151
00:06:16,770 --> 00:06:19,110
That's all the setup that we have to do.

152
00:06:19,110 --> 00:06:21,480
Now, just a little bit behind the scenes here,

153
00:06:21,480 --> 00:06:23,490
the name of this file is very special

154
00:06:23,490 --> 00:06:26,640
because anytime Jest starts up inside of our project,

155
00:06:26,640 --> 00:06:30,870
it's going to look for a file with the name of setupTests.js

156
00:06:30,870 --> 00:06:34,410
inside the SRC directory, and if Jest finds that file,

157
00:06:34,410 --> 00:06:36,600
it's going to automatically execute it

158
00:06:36,600 --> 00:06:40,050
before any other code inside of our project gets loaded.

159
00:06:40,050 --> 00:06:42,990
And so that makes this file right here a perfect location

160
00:06:42,990 --> 00:06:46,470
to do a little bit of setup of our Jest Test Suites

161
00:06:46,470 --> 00:06:49,260
before any actual tests start to run.

162
00:06:49,260 --> 00:06:51,330
So we took advantage of that

163
00:06:51,330 --> 00:06:53,550
to do this initial setup of Enzyme,

164
00:06:53,550 --> 00:06:55,380
and now we can make use of Enzyme

165
00:06:55,380 --> 00:06:58,170
anywhere inside of our project, or more specifically,

166
00:06:58,170 --> 00:07:00,243
inside of any of our test files.

167
00:07:01,110 --> 00:07:04,230
All right, so again, the entire purpose of installing Enzyme

168
00:07:04,230 --> 00:07:07,290
was to give us the ability to write out some expectations

169
00:07:07,290 --> 00:07:10,770
that just work with React a little bit better.

170
00:07:10,770 --> 00:07:12,390
We then installed Enzyme,

171
00:07:12,390 --> 00:07:14,790
and then we wired it up to our project.

172
00:07:14,790 --> 00:07:16,140
So let's take a pause right here.

173
00:07:16,140 --> 00:07:17,550
We'll come back the next section,

174
00:07:17,550 --> 00:07:19,860
and we're going to rewrite this expectation

175
00:07:19,860 --> 00:07:22,950
to work a little bit more nicely with React and Enzyme.

176
00:07:22,950 --> 00:07:25,450
So quick break, and I'll see you in just a minute.