-: (Narrator) In the last section,
we installed Enzyme into our project
which is going to allow us
to do a little bit of a refactor
to this test right here
and make it work just a little bit more nicely.
We're gonna first get started
with a quick discussion of how we make use of Enzyme.
We'll then take a look at some documentation
and then do our actual refactor.
So first, how do we really make use of Enzyme?
Well, at a top level
Enzyme really gives us three additional capabilities
for writing our tests.
You'll notice that back over here
inside of our test file right now,
we created a 'div,'
then we rendered our app component into that 'div'
and then that made us, or that gave us access
to that kind of magic 'div' that we could
interact with and inspect
and write a expectation around it.
So when we make use of Enzyme
we skip that entire process where we render our component
into a 'div,' after creating the 'div.'
Instead, we're going to be making use
of three general methods
for creating instances of our components
and then writing expectations around them.
So the three ways
in which we're going to be interacting with Enzyme
is by using a 'Static' render, a 'Shallow' render
and a 'Full DOM' renderer.
So each of these different render functions
are essentially going to take an instance of our components.
It's going to kind of treat them
or attempt to render them in a slightly different fashion
and then it will return back to us
an object that we can use to write our tests around.
So let's very quickly talk about the three different ways.
First off is the 'Static' render.
So this is a function that we can pass a component to.
When we pass a component to 'Static,'
it's going to take our component,
it'll render the component,
take all the HTML that's generated,
and then return to us an object
that just contains that HTML.
The key thing here,
is that we don't have any ability
to like interact with that HTML that's generated.
We can't simulate clicking on something
or entering any text.
It's really just 'Static' HTML
that allows us to make an assertion
about the HTML that was generated.
Next up is the 'Shallow' render.
The 'Shallow' render takes a component
and renders just that component and none of its children.
So a good example of this
might be the 'App' component that we're working on.
If we use this 'Shallow' render
on the 'App' component that we just created -
and let's really quickly
pull up our 'App' component right here -
So if we rendered our 'App' component
we would essentially just get back a 'div'
with kind of a placeholder that says,
"Hey, a comment box should exist here,
but it doesn't really."
So the 'Shallow' render
is used when we want to test one component
by itself, in isolation
and not try to make any assertions
about the components underneath it.
Finally, the 'Full DOM' render.
This takes an instance of a component,
renders that component and all of its children.
It then returns an object back to us
that we can use to kind of interact with that component.
So we can simulate click events or entering text
or otherwise interacting with that component.
We can use this 'Full DOM' rendering functionality
to essent- essentially render out a full copy
of our entire application
and then somehow test interactions with the entire app.
So we're going to eventually touch on all three of these
maybe not quite so much the 'Static' one
but we're definitely gonna make use of 'Shallow'
and 'Full DOM' for the purposes of testing our application.
So now we've spoken a little bit
about 'Shallow' and 'Full DOM' and 'Static.'
Let's very quickly go and look
at some documentation around this 'Shallow' render
and we'll get a better sense of how we are going to use it
to solve the current problem that we have right now.
Which is, writing a test
and making sure that the comment box
exists inside the "App" component.
So I'm gonna quickly pull up the documentation for Enzyme.
If you want to follow along
you can find the documentation at airbnb.io/enzyme.
So I'm gonna pull up my browser
and navigate to airbnb.io/enzyme.
And once here, on the left hand side
I'm gonna scroll down a little bit
until I find the 'Shallow Rendering' section.
And then underneath that
I'll find the function of 'find' right here.
So I'll click on find
and then I will look at the documentation here.
I'll zoom in or scroll down just a little bit more
and I'll find the section of 'Component Constructors.'
So this is an example
of exactly what you and I are trying to do right now.
You'll see that in this example
they are trying to make a test or write an expectation
around the component called 'My Component.'
There is another component
inside this application called 'Foo'
and they want to write a test
to make sure that an instance of the 'Foo' component
exists inside of 'My Component.'
So they render that 'My Component'
using that 'Shallow' render
that we just spoke about.
And then they look inside of that rendered component
and look to see if there's an instance
of the 'Foo' component in there.
And more specifically, they write a test
to say there's exactly one instance of 'Foo' inside.
Now, one thing I wanna mention here
is that the matcher that you see right here
of 'to' '.' 'have' '.' 'length' '.' - or excuse me,
well no '.' at the end, but you get the idea.
This is a matcher that you would find
with 'Mocha' or 'Chai,' so we're gonna write
a slightly different expectation
since we're working with 'Jest,'
but the overall idea here is the same.
We want to render an instance of our 'App' component
with that 'Shallow' render,
and then we're gonna look at it
and make sure that it has a single copy
of the comment box component inside of it.
So, at long last, that is how we're gonna tackle this issue.
That's how we are going to attempt
to look inside of our app component
and make sure that it has an instance
of the comment box without actually knowing
about any of the implementation details
of the comment box component itself.
So let's take one more quick break.
We're gonna come back the next section
and implement that test into this test file.
So I'll see you in just a minute.