Instructor: So we've got a good first pass
of our renderComponent method right here.
I'm gonna save everything.
Looks like our test run, they're all still failing,
and it looks like there's two common errors
that we're getting here.
It looks like it says renderComponent is not a function
and expect is not a function.
So by default we need to be exporting the helpers
renderComponent and expect from this test helper file.
And right now we're not exporting anything.
And so these error messages really make a lot of sense.
Now, we've already defined renderComponent
but we haven't imported or done anything
with that expect function that is expecting here as well.
So expect is something that's coming from the chai library.
So we can just go ahead
and import expect from 'chai' like so.
Now we've got access to expect,
we've got access to renderComponent.
If we export both of these variables
we should probably at least get some specs to pass.
Let's see what happens.
We will export renderComponent, expect.
I'm gonna save.
And hey hot dog, it looks like we've got four test passing.
And then we've got a couple where it says,
hey React is not defined.
And that error right here is appearing inside
of our test helper file.
So that means this is a very common error.
You'll see this all over the place.
You'll see it whenever you make use of jsx
which we did right here
without importing react into the file.
So wherever we use react, we have to import, or excuse me
wherever we use jsx, we have to import react as well.
So at the top we'll add another import statement
for React from 'React.'
And now, oh boy, this turned into a very long error message.
So let's see what's going on now.
Looks like we've got three error messages
and each of them appears to be more or less the same thing.
It says, could not find "store"
in either the context or props of "Connect(CommentBox)."
Either wrap the root component in a provider
or explicitly pass "store" as a prop to Connect(CommentBox).
Okay, so this is some pretty interesting stuff right here.
So to kind of cut to the chase a little bit
about what's going on in some of our tests
and matter of fact, we can reference exactly each one.
We can see (CommentBox), (CommentBox) and (CommentList).
Some of our specs try to renderComponents
that are connected to redux
via the React redux library, right?
These are our connected libraries.
The way that these components work, or the way that
that Connect Helper works is it expects
that our ComponentClass has been rendered
underneath the provider element.
The same provider that we see inside
of our index.js file, this provider right here.
So we've put together a test helper,
a helper to render a single component.
But it turns out totally unbeknownst to us,
that in order to render a connected component
it must be a child of the provider component.
Now, I haven't said a single word
about exactly what the provider is or what it's doing here
or even why we're passing at the store right here.
We haven't talked about any of that stuff yet.
We will talk about it very soon when we start talking
about higher order components.
And as a matter of fact
it's gonna be one of the key elements of our discussion.
So for right now,
I'm gonna say we're just gonna throw the provider in here
we're gonna make our stuff work for now.
And then when we start talking about
higher order components later,
all this provider stuff right here
is gonna make crystal clear sense.
I guarantee it.
I don't exactly guarantee it,
but it'll probably work out. (laughs)
So here's what we're gonna do.
We need to wrap our component class here with the provider
and we need to pass the provider a redux store as well.
So this is again, where it's kind of going into the realm
of stuff that I don't really expect you to, you know
walk away with a perfect understanding
of what's going on here.
This is more about just, you know, we're trying
to get a sense of what's going on behind the scenes.
So let's throw the code up
and then we'll do a walkthrough of it
and we'll try to gleam some understanding.
So first thing we're gonna do
is we're going to import three files.
We'll import Provider from 'react-redux.'
We'll import createStore from 'redux'
and we'll import reducers, oops,
from our reducers file,
which is at up one directory source reducers.
Okay, so we just brought in Provider,
createStore and reducers.
Now we need to wrap this ComponentClass element right here
with our provider.
So I'm gonna do a new line
and I'm gonna do another new line.
So we've got the open parens, and then just right
in the middle we've got the ComponentClass.
And then we're gonna wrap this
with our Provider like so.
Okay, so here's where it starts to get even more interesting
when we create our Provider element.
And again, we're gonna talk about
exactly how the Provider works in a future section.
This just isn't the most appropriate time right now.
We need to pass it a reference to a redux store.
And so you might imagine that's where
this createStore comes from.
So we're going to add on a prop
to the provider of store,
createStore.
So let's, you know
this looks pretty reasonable right here, right?
We've got Provider, we've got store, createStore.
Let's go ahead and just save this, see what happens.
So I'm gonna save it.
And oh boy, that's a lot
of error messages or a big stack trace, excuse me.
Oh, my mistake,
I forgot a from inside import reducers from the path.
So let me fix that up really quick, from
and we'll try it again.
Okay, expected the reducer to be a function,
expected the blah blah, blah function, so and so on.
So we're kind of only halfway there.
And again, this is another kind of piece of a little trivia
but when we create a redux store
we need to pass the reducers that we want the store to use.
And so we already created the reducers,
we already imported them up here.
So let's just pass in our reducers like so.
I'm gonna save and let's see what we get now.
So reducer is not defined.
I just made a typo.
It needs to be reducers plural.
Reducers, reducers.
Very good.
All right, so now we get a different error message
and all right, this is starting looked pretty good.
So object index of is not a function.
Alright, I can, who knows what that is, but I can buy that.
It looks like there's an error on the actual spec.
And then we've got another one
that says find.simulate is not a function.
Okay, so this is starting to look a little bit better.
I kind of like this.
We're getting some kind of error messages
that at least are not consistent
and one that's even actually trying to execute our spec.
The problem is that
we're definitely still not quite where we expect to be.
Let's go check out our comment list file
inside the next section
and figure out maybe there's something we're still missing
with this renderComponent function.
So I'll see you in the next section.