Instructor: In the last section,
we went and took a look at the Enzyme documentation
and we've now got a better idea
of how we're gonna use Enzyme
to test out our app component.
So, in this section we're gonna do a big refactor
of this app.test file.
I'm gonna first get started by finding all the code
inside of this it statement right here
and removing all of it.
So no longer are you and I going to manually create divs
and then render our app component inside of it,
we're instead gonna rely upon one of those three renders
that are implemented by Enzyme.
So, I'm gonna highlight all that stuff and delete it.
I now no longer need react-dom
so I'm gonna clean that up at the top as well.
Then at the top, I will import Enzyme
or more specifically one function off the Enzyme library.
So I'm going to import shallow from Enzyme like so.
Shallow right here is a function
that we're going to use to render out
a instance of our app component
and none of its children.
So, the shallow function right here
is exactly the same thing
as what we spoke about just a moment ago
with this shallow render that renders just the component
and none of its children.
And one thing I want to clarify is that
the component that we render
if it has vanilla dom elements inside of it
like say a div
or a header tag or a text input,
those will all be rendered.
It's specifically react child components
that will not be rendered.
So, now inside of our it statement,
we can attempt to render an instance of app
using the shallow function.
So we'll say const wrapped equals shallow
and then we'll place our app component inside of a JS tag,
excuse me, JSX tag like so.
Now one quick thing I wanna mention here,
we're using the terminology wrapped
just to kind of indicate
that the object that we got back from this
is a wrapped version of our app component.
Wrap specifically means that
this is a component that has
some additional functionality loaded on top.
I personally don't really care for the term wrapped.
I would love to instead use the term component
'cause I think that's a little bit more clear
what's going on here
but all the documentation around Enzyme calls it wrapped,
so we're gonna stick with the documentation
but just so you know,
on my own personal projects,
I always call this component because
it's a little bit more obvious what's going on.
Okay, so now that we've got our wrapped component back
we're going to then import
our comment box component into this file
and then we can attempt to find that component
inside this wrapped object
just as we saw in the documentation a moment ago.
So at the top, I will import comment box from,
notice we are now inside the __test directory.
So we're gonna go up into the components folder
and then get the comment box file.
Now we can write out the actual expectation.
So I'll write out the expect function,
inside of here is going to be the thing
or the value that we're trying to make an assertion about
or an expectation about.
So in this case, I want to look at this wrapped object
in attempt to find all instances
of the comment box component inside.
So to do so, I'll write out wrapped.find CommentBox.
So we're gonna look at the component that we just created
and we're gonna find every copy of comment box inside of it.
Now, when we call find right here
it returns back to us in array.
That array contains every instance of comment box
that was found.
Now, you and I don't actually care about
the real instance of comment box that was found,
all we care about is saying there's exactly one copy
of comment box that was created.
So, because this returns an array,
I'm gonna pull off the .length property.
So now wrapped.find CommentBox .length right here
in theory is going to be either one
indicating we've got one copy of comment box
or zero indicating no comment boxes were found.
So then the last thing we have to do
is to write out an expectation.
So this is gonna be the part
where we write out the actual matcher on the end
and say what we expect this value right here to be.
So in this case
we want there to be exactly one comment box.
So this entire expression right here
will return the number one.
So I'm gonna put it on a matcher of toEqual
and I'll pass it one like so.
So, this is yet another matcher.
It's very similar to the one that we just saw
of toContain,
toEqual is gonna look at the value that we provided
and make sure that that value is exactly equal
to the number right here.
And that's it, that's all we have to write.
So this is gonna make sure that there is one comment box
inside of our app component.
So let's test this out.
I'm gonna make sure that I start my test,
my test suite back up.
Now, I already started my test suite
just so you don't have to sit and watch mine boot up.
But remember you can start your test suite
by running NPN run test.
So once you get that going,
I'll then flip back over here.
I'm gonna save this file
and then I should be able to see my test running
and hopefully after this completes,
boy, this has just taken forever.
I'm gonna do some work on this, I promise you,
I'm gonna get these,
the duration of these tests runs down
because right now it's way too long.
Okay, so very good.
Took my test forever, but it did in fact pass.
So now I feel pretty confident
that I'm showing exactly one instance
of the comment box inside my app component.
Now, one thing that I like to do,
and this is highly recommended
whenever you're getting started with testing,
is after you make the test work one time,
try to make it break.
The idea behind this is that you're gonna make sure
that you're not getting an erroneous pass your tests
and that's something that we're gonna be doing quite a bit
throughout this course.
We're gonna be making sure that our tests break
at least one time to say that yeah,
our tests are doing the right thing.
So I'm gonna go back over to my test file
and I'm gonna change the toEqual over here
to be any other number.
So I'll say nine.
All I wanna do right now is make sure that
if I put in the incorrect value right here,
I see my test break
and that's gonna just make me feel
a little bit more confident
that my test is behaving the way I expect.
So, I'll then save the file, I'll flip back over,
and then hopefully less than 12 seconds,
thank goodness, a little bit faster this time.
So you can see that the test failed.
I thought that we were gonna get back a value of nine
but we actually got one.
So clearly the test is working as we expect.
And then so the very last step,
once we've made it break,
we'll then make it work one more time.
We'll save the file
and we should be able to see it go back to green,
which means our test is passing, awesome.
Okay, so this right here is much more in line
with the test that you and I are going to be writing
throughout the rest of this application.
So, with that in mind,
let's continue the next section
and we'll write out the other test for our app component.