Instructor: In the last section
we created our comment box test file.
We're going to write out our first test right here
in just a moment.
But before we do, I want to show you some documentation
around this full DOM rendering process
that enzyme provides to us.
I'm gonna very quickly pull up the documentation
on enzyme's homepage, which is at airbnb.io/enzyme.
And then on the left hand side I'll find the
full DOM rendering section.
So there's one thing inside
of here that I want to pull your attention to.
Notice this note right here.
So the note essentially says that anytime we make use
of this full DOM rendering, we are sharing the same fake DOM
that it's been implemented by that JS DOM library.
And that means that these different components
that we are creating can potentially interact
with each other and cause issues across our different tests.
So after every single test that you and I write
we're going to make sure that we do a little bit of cleanup.
We're gonna make sure
that we take the component that we created
and got mounted into that virtual DOM
and we're going to attempt to un-mount it so
that that component we created does not somehow interfere
with other components that are being created inside
of other tests.
So that's just one quick thing to keep in mind.
Now, to actually make use
of this full DOM rendering function
we're going to make sure
that we import enzyme at the top of this file.
Remember that
before we imported the shallow function from enzyme.
But this full DOM rendering functionality comes
from a different function called simply mount.
This is one function of many
that is exported from the enzyme library.
So remember to get the curly braces on here as well.
And we're going to import that from enzyme like so.
So now inside of our actual it statement right here
we can attempt to render our comment box component
and then write out an actual expectation about it.
So I'm going to create a new variable inside
of here called wrapped, and that's going to be
mount comment box like so.
So almost identical to what we wrote inside
of our app test.
Right here we create an instance
of the comment box component
and then we pass it off to the mount function provided
by enzyme.
Enzyme is going to take our component instance,
it's going to attempt to render it into that fake DOM
that is created by JS DOM and then it returns this object
right here that we usually refer to as wrapped.
And again, the idea behind that variable name is
that this is kind of like a wrapped version of our component
and it has some additional functionality tied
to it that allows us to make assertions about the component
that was created.
So now we're going to look through the component
that was created, and attempt to find a text area
element inside there and a button as well.
You'll recall that we did something very similar back
on the very first test we put together when
we kind of used that contains or should contain matcher
and looked at the raw HTML that was coming out of
that div that we were making use of.
So Enzyme has a very similar function available
to us and in fact we actually used it inside
of the app test file as well.
So find right here.
That find helper can be used not only
for finding component instances but also
for finding normal HTML elements as well.
So if I go back over
to my documentation and find the method find right here
we can see that we can find not only component instances
as we did just a moment ago
but we can also attempt to find raw HTML elements as well.
And so in this case we're going to attempt to
find a text area
and a button inside of our wrapped component.
So back over here
let's first just do a simple console log just to make sure
that we're going down the right path.
I'll say wrapped dot find
and I'm going to try to find a text area.
And then right underneath that I'll do the same thing.
And I'll try to find a button, in this case instead
and I'll save this file and we'll flip back over
to our test suite and see what console logs we get.
So back over here you'll notice that our comment
box dot test dot JS file has been automatically picked up
by jest so I did not have to restart my jest runner
in order to get it to pick up this new test file.
Jest has just automatically seen
that we created a new file and ran the test inside of it.
Now if jest does not automatically find that new test file
for you, no big deal, just restart your jest test runner.
So now down here I can see the two console logs
for the find text area and the find button.
Again we get these wrapper objects back
that are essentially like a race.
They both have a length of one, which indicates that
both those console logs or both those find statements have
found exactly one text area and one button.
So now that we've got those two statements
or those two elements found inside of our test, we can write
out our actual assertions.
So I'll say expect wrapped dot find text area dot length.
So length right here should return the number one.
That's what we wanna see.
We want to see exactly one text area being found inside
of our comment box.
So I will expect that that will two equal the number one
'cause that's exactly what I want to see that equal to.
I'll then copy paste that line down and on the second line
I'll change text area to simply button
'cause that's the other element
that we definitely want to find
within this component.
And then the last thing I'll do is clean
up the two console log statements.
Okay, so this looks pretty good.
If I go back over to my terminal, it looks
like my new test is passing just fine.
Okay, so that looks pretty good.
Now inside this test you'll notice that we are again making
use of this mount thing.
We still have to run other tests
inside this file and chances are every single one
of those other tests are going to have to
create a new component instance.
And so just like we did two seconds ago
inside of our app test dot JS file
I think that we're going to have
to create a before each statement and make sure
that every time that we are about to run a test
inside that file, we try to create a new instance
of the component that we're trying to test.
And the other thing that you'll notice inside
of comment box right now is that we're not
doing that cleanup that I had just mentioned
that we saw in the documentation.
So in the docs two seconds ago, back over here
remember we have to do a little bit
of cleanup of that component we just created.
So we still have to take care of that as well.
So I think we've got two immediate tasks we have
to take care of.
So let's address both those in the next section.