Instructor: In the last section we put together
our comment list component, and now it's time to write a
test file around this thing.
So, inside of my component's test directory,
I'll make a new file called CommentList.test.js.
Then, inside this file, we'll go through
some of the usual boiler plate.
So, at the top I will import React from React.
I'm going to again import the mount function from Enzyme.
So we're going to make use of
full DOM rendering again for this application.
And then I will also get my comment list component
from components comment list.
And then because my comment list makes use of Redux,
or more specifically the Connect helper right here,
I know without a doubt that the component is going to
expect to see a parent component that contains
that provider tag, and the Redux store.
So without a doubt, we're going to have to import
that root component that we created right here
to get our test set up working in that comment list file.
So, inside of CommentList.test.js,
I will import root from root.
So, now that we've got some imports inside of here,
let's take a quick review of
some of the tests that we need to write.
So, we need to make sure that for every element,
or excuse me, for every comment we have,
we produce one "li" element.
And then we need to also make sure that for every
comment we have, the actual text of the comment
is visible on the screen.
Let's take care of this first one here.
So we'll take care of the one "li" per comment first,
and then we'll move on to the next one down here.
All right, so I'll first get started
by writing out my it statement.
So I'll say something like,
"Creates one LI per comment," like so.
And then, because I definitely need to do some
initial setup here of the actual component instance,
let's also not forget to do a before each statement.
And right above that we'll define our, kind of,
scoped variable for the entire file of wrapped.
And then we can do right here wrapped equals, and then
we will mount our root component with a comment list inside.
Cool.
All right, so now we've got our comment list right here.
It has-
-: for we've got the before each
to initialize that component.
And so, we're now inside the actual test where we can start
to figure out how we're going to make sure that our
wrapped component right here has one "li" per comment.
There's just one little issue.
One little issue.
So, our comment list component right here is intended to
take some state out of our Redux store.
And then for every single comment
that comes out of that state, we're going to render one li.
So, if we want this test right here to really be faithful,
if we want the test to really make sure that our component
is working the way we expect, we need to sit-
Figure out some way to get our Redux store to say,
'Hey I've got a comment inside of here.
Take the comment from me and render it out onto the screen."
The issue is, that as we've kind of created
our root component and gone through all this,
all these hoop jumping of getting our Redux
store to be accessible through that provider tag,
we don't really have any way
of modifying any of the data inside there.
In fact, the only way for us to, kind of, add any components
to our Redux store right now, or any comments, excuse me,
to that Redux store is to get our comment box component
to dispatch in action by entering some text
into that thing and then clicking the button.
So, it looks like we're kind of at an impasse right now
in terms of somehow getting some data
into that Redux store to flow down into our comment list
so we can actually test this functionality right here.
Now, one thing I want to mention
that we absolutely could do, like this is an option.
we could forcibly pass a prop into the
comment list right here of comments,
and then have that be, like,
our list of comments or whatever.
This prop right here will be passed
down into the comment list.
So, you might think, yeah, that's one way to do it.
However, the problem is that as soon as the
comment list component renders itself
that mapStateToProps function is going to run.
It's gonna get this comments object right here,
which, by default, is gonna have an empty list of comments.
And so that empty list of comments is going to overwrite
this list of comments right here
that we're trying to pass in.
So, I don't know, it kind of seems like it's gonna be
a tough thing to try to get some data into this thing,
into our actual component.
Well, of course there's a way we can work around this.
Don't sweat it.
So, let's take a quick pause right here.
We'll come back to the next section,
and we'll figure out how we're gonna solve this issue.