Instructor: We're now on to the very last step
of our test right here.
So we need to again
get a reference to our textarea component
and make sure that it has received the correct value.
So to do so, we're again going to rely upon enzyme.
Yes, we really rely upon enzyme
when we are testing React components.
So we're gonna very quickly go and look
at some documentation on enzyme one last time,
and we'll be able to write out our expectation right here.
Now before we look at the enzyme documentation
I wanna very quickly remind you
that inside of our CommentBox component,
we have our textarea right here.
And what we're really trying to test
inside this test that we're working on right now
is making sure that that textarea
receives the correct value prop.
That's key right here.
It's the value prop that you and I really care about.
Is if we pass in the correct value prop right here
then we know that React is going to essentially take it
from there, and definitely show that correct input
inside that textarea.
So rather than saying that we want to figure out
what value the textarea has,
it might be a little bit more accurate to say
that we want to verify
that the textarea received the correct value prop.
So with that in mind,
if we flip back over to our enzyme documentation,
again underneath our Full DOM Rendering section right here,
we can find a method called, there we go, prop with key.
So the prop function right here allows us
to pull the prop that is passed
to any element within our component.
So you and I can find that textarea element,
and then we can call the prop method on it
and ask it to retrieve the value prop
that was assigned to it.
And that should retrieve the string that we had passed
right here.
So then we can write out a simple expectation and say,
yes, we passed in the correct value of this.state.comment.
So that's the idea,
that's how we're going to actually test out our textarea.
We're going to pull a prop off it and make sure we passed in
the correct prop.
So I'm gonna flip back over to my CommentBox test file.
And then right down here, we'll write out
our full expectation.
So we're going to expect that,
excuse me, not component but wrapped.find textarea.
So we're going to get a brand new reference
to our textarea element.
Then we're going to pull off the prop of value.
'Cause that's the name of the prop that we passed
to that element.
And then finally, outside of both sets
of parentheses right here,
we're gonna do a toEqual
and we're gonna make sure that that prop value right there
equals the string, new comment.
'Cause that's what we had tricked our component
into thinking the user had entered.
I'm gonna really quickly give myself some space here,
and I'm gonna say toEqual new comment, like so.
So that's it for the test.
I'm gonna save this test file,
and I'll flip back over to my terminal,
and it looks like that new test is passing.
Now as usual, let's make sure that we make this test fail.
And I just realized, I think we skipped that step
on our last test as well.
So let's make both these fail very quickly.
So on the test up here,
I will say toEqual 2 on both those tests.
And then on the test we just put together,
I'm gonna say toEqual
about just some random string, like so.
So now if I save this file and flip back over,
I will expect to see all three of those tests failing.
Or all three of those expectations really.
So now on has a text area that users can type [Interviewer],
we expected to see that gibberish right there
but we actually got the string new comment, which is great.
And then up here, has a text area and a button.
In a, essentially, we said that we expected two
but we actually received one button or text area.
So awesome.
It looks like our tests are working correctly.
I'm gonna flip back over
and change these all back to the correct values.
And I'll do my toEqual of new comment as well.
So one more time, I'll make sure everything
is still passing, and we're great.
Cool, so I think that's it for this test right here.
Let's continue on the next section
and I think we got one more test
around our CommentBox component.
So we'll take care of it in that video.