1
00:00:00,870 --> 00:00:02,610
Instructor: So we've got a good first pass

2
00:00:02,610 --> 00:00:05,070
of our renderComponent method right here.

3
00:00:05,070 --> 00:00:07,470
I'm gonna save everything.

4
00:00:07,470 --> 00:00:09,930
Looks like our test run, they're all still failing,

5
00:00:09,930 --> 00:00:11,670
and it looks like there's two common errors

6
00:00:11,670 --> 00:00:12,900
that we're getting here.

7
00:00:12,900 --> 00:00:16,620
It looks like it says renderComponent is not a function

8
00:00:16,620 --> 00:00:19,380
and expect is not a function.

9
00:00:19,380 --> 00:00:22,740
So by default we need to be exporting the helpers

10
00:00:22,740 --> 00:00:26,790
renderComponent and expect from this test helper file.

11
00:00:26,790 --> 00:00:29,550
And right now we're not exporting anything.

12
00:00:29,550 --> 00:00:32,640
And so these error messages really make a lot of sense.

13
00:00:32,640 --> 00:00:35,820
Now, we've already defined renderComponent

14
00:00:35,820 --> 00:00:37,800
but we haven't imported or done anything

15
00:00:37,800 --> 00:00:42,420
with that expect function that is expecting here as well.

16
00:00:42,420 --> 00:00:45,510
So expect is something that's coming from the chai library.

17
00:00:45,510 --> 00:00:46,890
So we can just go ahead

18
00:00:46,890 --> 00:00:51,890
and import expect from 'chai' like so.

19
00:00:53,070 --> 00:00:54,840
Now we've got access to expect,

20
00:00:54,840 --> 00:00:57,120
we've got access to renderComponent.

21
00:00:57,120 --> 00:00:59,610
If we export both of these variables

22
00:00:59,610 --> 00:01:02,490
we should probably at least get some specs to pass.

23
00:01:02,490 --> 00:01:04,230
Let's see what happens.

24
00:01:04,230 --> 00:01:07,690
We will export renderComponent, expect.

25
00:01:11,670 --> 00:01:13,290
I'm gonna save.

26
00:01:13,290 --> 00:01:17,070
And hey hot dog, it looks like we've got four test passing.

27
00:01:17,070 --> 00:01:19,260
And then we've got a couple where it says,

28
00:01:19,260 --> 00:01:22,080
hey React is not defined.

29
00:01:22,080 --> 00:01:25,830
And that error right here is appearing inside

30
00:01:25,830 --> 00:01:28,020
of our test helper file.

31
00:01:28,020 --> 00:01:30,240
So that means this is a very common error.

32
00:01:30,240 --> 00:01:32,490
You'll see this all over the place.

33
00:01:32,490 --> 00:01:35,370
You'll see it whenever you make use of jsx

34
00:01:35,370 --> 00:01:36,870
which we did right here

35
00:01:36,870 --> 00:01:39,810
without importing react into the file.

36
00:01:39,810 --> 00:01:43,320
So wherever we use react, we have to import, or excuse me

37
00:01:43,320 --> 00:01:46,980
wherever we use jsx, we have to import react as well.

38
00:01:46,980 --> 00:01:49,780
So at the top we'll add another import statement

39
00:01:50,640 --> 00:01:52,660
for React from 'React.'

40
00:01:54,690 --> 00:01:57,990
And now, oh boy, this turned into a very long error message.

41
00:01:57,990 --> 00:01:59,640
So let's see what's going on now.

42
00:02:00,900 --> 00:02:03,870
Looks like we've got three error messages

43
00:02:03,870 --> 00:02:07,260
and each of them appears to be more or less the same thing.

44
00:02:07,260 --> 00:02:10,050
It says, could not find "store"

45
00:02:10,050 --> 00:02:14,270
in either the context or props of "Connect(CommentBox)."

46
00:02:15,810 --> 00:02:18,900
Either wrap the root component in a provider

47
00:02:18,900 --> 00:02:22,677
or explicitly pass "store" as a prop to Connect(CommentBox).

48
00:02:24,228 --> 00:02:28,380
Okay, so this is some pretty interesting stuff right here.

49
00:02:28,380 --> 00:02:30,570
So to kind of cut to the chase a little bit

50
00:02:30,570 --> 00:02:33,660
about what's going on in some of our tests

51
00:02:33,660 --> 00:02:36,660
and matter of fact, we can reference exactly each one.

52
00:02:36,660 --> 00:02:38,357
We can see (CommentBox), (CommentBox) and (CommentList).

53
00:02:42,060 --> 00:02:44,790
Some of our specs try to renderComponents

54
00:02:44,790 --> 00:02:47,070
that are connected to redux

55
00:02:47,070 --> 00:02:49,320
via the React redux library, right?

56
00:02:49,320 --> 00:02:51,990
These are our connected libraries.

57
00:02:51,990 --> 00:02:54,030
The way that these components work, or the way that

58
00:02:54,030 --> 00:02:57,150
that Connect Helper works is it expects

59
00:02:57,150 --> 00:03:00,360
that our ComponentClass has been rendered

60
00:03:00,360 --> 00:03:02,910
underneath the provider element.

61
00:03:02,910 --> 00:03:06,060
The same provider that we see inside

62
00:03:06,060 --> 00:03:09,393
of our index.js file, this provider right here.

63
00:03:10,440 --> 00:03:13,110
So we've put together a test helper,

64
00:03:13,110 --> 00:03:15,600
a helper to render a single component.

65
00:03:15,600 --> 00:03:18,360
But it turns out totally unbeknownst to us,

66
00:03:18,360 --> 00:03:22,020
that in order to render a connected component

67
00:03:22,020 --> 00:03:25,830
it must be a child of the provider component.

68
00:03:25,830 --> 00:03:27,750
Now, I haven't said a single word

69
00:03:27,750 --> 00:03:31,260
about exactly what the provider is or what it's doing here

70
00:03:31,260 --> 00:03:33,300
or even why we're passing at the store right here.

71
00:03:33,300 --> 00:03:35,760
We haven't talked about any of that stuff yet.

72
00:03:35,760 --> 00:03:38,460
We will talk about it very soon when we start talking

73
00:03:38,460 --> 00:03:40,170
about higher order components.

74
00:03:40,170 --> 00:03:41,003
And as a matter of fact

75
00:03:41,003 --> 00:03:43,740
it's gonna be one of the key elements of our discussion.

76
00:03:43,740 --> 00:03:44,760
So for right now,

77
00:03:44,760 --> 00:03:47,940
I'm gonna say we're just gonna throw the provider in here

78
00:03:47,940 --> 00:03:50,130
we're gonna make our stuff work for now.

79
00:03:50,130 --> 00:03:51,450
And then when we start talking about

80
00:03:51,450 --> 00:03:53,310
higher order components later,

81
00:03:53,310 --> 00:03:54,990
all this provider stuff right here

82
00:03:54,990 --> 00:03:56,820
is gonna make crystal clear sense.

83
00:03:56,820 --> 00:03:57,783
I guarantee it.

84
00:03:58,650 --> 00:03:59,940
I don't exactly guarantee it,

85
00:03:59,940 --> 00:04:03,870
but it'll probably work out. (laughs)

86
00:04:03,870 --> 00:04:05,280
So here's what we're gonna do.

87
00:04:05,280 --> 00:04:09,266
We need to wrap our component class here with the provider

88
00:04:09,266 --> 00:04:13,893
and we need to pass the provider a redux store as well.

89
00:04:14,730 --> 00:04:17,010
So this is again, where it's kind of going into the realm

90
00:04:17,010 --> 00:04:20,040
of stuff that I don't really expect you to, you know

91
00:04:20,040 --> 00:04:21,570
walk away with a perfect understanding

92
00:04:21,570 --> 00:04:22,830
of what's going on here.

93
00:04:22,830 --> 00:04:24,420
This is more about just, you know, we're trying

94
00:04:24,420 --> 00:04:27,000
to get a sense of what's going on behind the scenes.

95
00:04:27,000 --> 00:04:28,530
So let's throw the code up

96
00:04:28,530 --> 00:04:30,060
and then we'll do a walkthrough of it

97
00:04:30,060 --> 00:04:32,160
and we'll try to gleam some understanding.

98
00:04:33,000 --> 00:04:34,200
So first thing we're gonna do

99
00:04:34,200 --> 00:04:37,140
is we're going to import three files.

100
00:04:37,140 --> 00:04:42,140
We'll import Provider from 'react-redux.'

101
00:04:42,180 --> 00:04:47,180
We'll import createStore from 'redux'

102
00:04:48,503 --> 00:04:51,780
and we'll import reducers, oops,

103
00:04:51,780 --> 00:04:54,480
from our reducers file,

104
00:04:54,480 --> 00:04:59,373
which is at up one directory source reducers.

105
00:05:00,300 --> 00:05:02,442
Okay, so we just brought in Provider,

106
00:05:02,442 --> 00:05:04,980
createStore and reducers.

107
00:05:04,980 --> 00:05:08,695
Now we need to wrap this ComponentClass element right here

108
00:05:08,695 --> 00:05:10,440
with our provider.

109
00:05:10,440 --> 00:05:11,800
So I'm gonna do a new line

110
00:05:12,990 --> 00:05:14,820
and I'm gonna do another new line.

111
00:05:14,820 --> 00:05:17,520
So we've got the open parens, and then just right

112
00:05:17,520 --> 00:05:20,070
in the middle we've got the ComponentClass.

113
00:05:20,070 --> 00:05:21,670
And then we're gonna wrap this

114
00:05:23,400 --> 00:05:25,323
with our Provider like so.

115
00:05:28,560 --> 00:05:31,500
Okay, so here's where it starts to get even more interesting

116
00:05:31,500 --> 00:05:33,510
when we create our Provider element.

117
00:05:33,510 --> 00:05:34,800
And again, we're gonna talk about

118
00:05:34,800 --> 00:05:37,440
exactly how the Provider works in a future section.

119
00:05:37,440 --> 00:05:39,900
This just isn't the most appropriate time right now.

120
00:05:39,900 --> 00:05:43,500
We need to pass it a reference to a redux store.

121
00:05:43,500 --> 00:05:45,090
And so you might imagine that's where

122
00:05:45,090 --> 00:05:47,550
this createStore comes from.

123
00:05:47,550 --> 00:05:49,650
So we're going to add on a prop

124
00:05:49,650 --> 00:05:52,383
to the provider of store,

125
00:05:53,646 --> 00:05:55,233
createStore.

126
00:05:56,970 --> 00:05:57,870
So let's, you know

127
00:05:57,870 --> 00:05:59,460
this looks pretty reasonable right here, right?

128
00:05:59,460 --> 00:06:02,760
We've got Provider, we've got store, createStore.

129
00:06:02,760 --> 00:06:05,910
Let's go ahead and just save this, see what happens.

130
00:06:05,910 --> 00:06:07,770
So I'm gonna save it.

131
00:06:07,770 --> 00:06:09,570
And oh boy, that's a lot

132
00:06:09,570 --> 00:06:13,500
of error messages or a big stack trace, excuse me.

133
00:06:13,500 --> 00:06:14,430
Oh, my mistake,

134
00:06:14,430 --> 00:06:19,260
I forgot a from inside import reducers from the path.

135
00:06:19,260 --> 00:06:22,510
So let me fix that up really quick, from

136
00:06:23,760 --> 00:06:24,840
and we'll try it again.

137
00:06:24,840 --> 00:06:28,110
Okay, expected the reducer to be a function,

138
00:06:28,110 --> 00:06:31,470
expected the blah blah, blah function, so and so on.

139
00:06:31,470 --> 00:06:33,600
So we're kind of only halfway there.

140
00:06:33,600 --> 00:06:37,200
And again, this is another kind of piece of a little trivia

141
00:06:37,200 --> 00:06:39,270
but when we create a redux store

142
00:06:39,270 --> 00:06:43,110
we need to pass the reducers that we want the store to use.

143
00:06:43,110 --> 00:06:45,090
And so we already created the reducers,

144
00:06:45,090 --> 00:06:47,040
we already imported them up here.

145
00:06:47,040 --> 00:06:50,070
So let's just pass in our reducers like so.

146
00:06:50,070 --> 00:06:53,640
I'm gonna save and let's see what we get now.

147
00:06:53,640 --> 00:06:55,200
So reducer is not defined.

148
00:06:55,200 --> 00:06:56,400
I just made a typo.

149
00:06:56,400 --> 00:06:58,985
It needs to be reducers plural.

150
00:06:58,985 --> 00:07:00,540
Reducers, reducers.

151
00:07:00,540 --> 00:07:02,070
Very good.

152
00:07:02,070 --> 00:07:05,340
All right, so now we get a different error message

153
00:07:05,340 --> 00:07:07,710
and all right, this is starting looked pretty good.

154
00:07:07,710 --> 00:07:11,280
So object index of is not a function.

155
00:07:11,280 --> 00:07:14,253
Alright, I can, who knows what that is, but I can buy that.

156
00:07:15,240 --> 00:07:18,360
It looks like there's an error on the actual spec.

157
00:07:18,360 --> 00:07:19,500
And then we've got another one

158
00:07:19,500 --> 00:07:23,040
that says find.simulate is not a function.

159
00:07:23,040 --> 00:07:25,470
Okay, so this is starting to look a little bit better.

160
00:07:25,470 --> 00:07:26,760
I kind of like this.

161
00:07:26,760 --> 00:07:28,710
We're getting some kind of error messages

162
00:07:28,710 --> 00:07:31,110
that at least are not consistent

163
00:07:31,110 --> 00:07:35,190
and one that's even actually trying to execute our spec.

164
00:07:35,190 --> 00:07:36,023
The problem is that

165
00:07:36,023 --> 00:07:39,573
we're definitely still not quite where we expect to be.

166
00:07:40,950 --> 00:07:43,170
Let's go check out our comment list file

167
00:07:43,170 --> 00:07:44,670
inside the next section

168
00:07:44,670 --> 00:07:47,580
and figure out maybe there's something we're still missing

169
00:07:47,580 --> 00:07:49,170
with this renderComponent function.

170
00:07:49,170 --> 00:07:50,970
So I'll see you in the next section.