Instructor: In the last section,
we spoke about why this expectation right here
left a little bit to be desired.
At present, our App.test file has knowledge
of exactly what that CommentBox component is doing,
and that's really not ideal.
So in this section, we're gonna start moving
towards a refactor of this line of code right here
to make sure that our app test is only aware
of the existence of the CommentBox,
rather than having knowledge of its internal implementation.
We're gonna first start off
by taking a look at essentially the line of code
that we eventually want to write here.
So I do not really want to write the code that says,
Look at this innerHTML and figure out
whether or not the inner contents of the CommentBox round.
Instead, I would really prefer
to write something that looks like this:
expect that div (typing)
toHaveAnInstanceOf (typing)
CommentBox. (typing)
This would be much more ideal.
I would love to write out a line of code that says,
Yeah, that div that we just rendered something into
has an instance of the CommentBox inside of it,
and then we could kind of just let
React figure out what to do,
and let Jest figure out what to do with this line of code.
Now unfortunately,
you and I cannot really write out this line of code
directly right here.
There's nothing inside of our project right now
that has a matcher like this, totally undefined,
so if we ran this code, as it stands,
we'd definitely get an error.
Now, we could definitely add in a custom matcher of our own
to kind of implement this finding behavior
and make sure
that the div contains the CommentBox component,
but that would involve a lot of work on our behalf.
We would have to get a really deep understanding
of how React works to be able to write out a line of code
that does this right here.
So rather than going through all that extra work,
you and I are going to instead install another library
that's going to let us write out a line of code
that's going to eventually look very similar
to this right here.
So this extra library
that you and I are going to install is called Enzyme.
Enzyme is an open source repository
or open source package, created by Airbnb,
specifically made for testing React components
a little bit easier,
and it allows us to write out code
that looks a little bit closer to this.
We can say,
Hey Enzyme, I expect that this rendered component
has an Instance of some other component inside of it,
and Enzyme is just gonna take over
and figure out what to do for us.
So that's the goal of Enzyme.
It just lets us write expectations
that are a little bit more closely configured
with how React works.
Now I'm going to first delete that line of code right there
because that's not precisely what we're gonna write,
and I'm going to uncomment the old one
just to keep that around.
And then we're going to get to installing
that Enzyme package.
So, let's get to it.
To install Enzyme,
I'm gonna first change on over to my terminal.
I'm gonna stop my test runner over here
by hitting Control C.
Then, while still inside of my project directory,
I'm going to install two packages with NPM
that are going to allow us to get started set up
with Enzyme inside of our project.
So I'll run npm install --save enzyme,
and then we're gonna get a second package.
And I wanna be really clear
before you write anything right here,
depending upon the version of React that you're using,
the name of the package that you're going to install
is gonna be slightly different.
So, the overall name that we're gonna use is
enzyme-adapter-React- (typing)
and then here's the important part.
So don't hit Enter just yet.
The last part of this package name right here
is gonna change depending upon the version of React
that you're using.
So really quickly,
I want you to flip back over to your code editor,
and then I want you to open up your package.json file.
So inside of here, in the dependency section,
you're gonna find the entry for React.
Now me personally, I'm running React version 16 right now.
You might be running version 17, 18, 19, 20, whatever it is.
You want to find the version of React that you're using.
So I'm 16.
Then you're gonna take that version,
and you're gonna go back over to your terminal,
and you're gonna put that number at the very end.
So you want enzyme-adapter-react-
and then whatever version of React that you're using.
I'm 16, you might be 17, 18, 19, 20, whatever you're using.
So once I get that in there,
I'll then hit Enter, and I'm good to go.
Now while that's installing,
we're gonna do one more little piece of configuration.
As you might be able to guess
from this package that we're installing,
it'll be like version 16 of Enzyme Adapt to React.
Well, Enzyme behaves slightly different
depending upon the version of React that we're using.
So we have to do just a tiny, tiny touch of setup of Enzyme
before we can actually use it inside of our test setup.
So we're gonna go through that setup right now.
So to set up Enzyme inside of our project,
I'm gonna go back over to my project directory,
my code editor, excuse me,
and I'm gonna find my SRC directory.
Then inside that SRC directory,
I'm gonna make a new file called setupTests.js.
Now the name of this file right here is extremely important,
so please make sure that you name this file
setupTests.js as well, with the exact same capitalization.
Then once you create that file,
we'll go ahead and open it up,
and then we're gonna add just a tiny bit of code
to this thing.
So at the very top, we'll write
import Enzyme from 'enzyme' (typing)
and please do check the spelling on it,
and we'll do
import Adapter (typing)
from 'enzyme-adapter-react-' (typing)
and then again, whatever version of React you're using here,
I'm using version 16, so I'm gonna put down -16.
So if you have React versions 16, 17, 18, 19,
make sure you put the appropriate number here.
Then underneath that we'll say
Enzyme.configure (typing)
and we'll pass in an object that says
adapter is new Adapter (typing)
and that's pretty much it.
That's all the setup that we have to do.
Now, just a little bit behind the scenes here,
the name of this file is very special
because anytime Jest starts up inside of our project,
it's going to look for a file with the name of setupTests.js
inside the SRC directory, and if Jest finds that file,
it's going to automatically execute it
before any other code inside of our project gets loaded.
And so that makes this file right here a perfect location
to do a little bit of setup of our Jest Test Suites
before any actual tests start to run.
So we took advantage of that
to do this initial setup of Enzyme,
and now we can make use of Enzyme
anywhere inside of our project, or more specifically,
inside of any of our test files.
All right, so again, the entire purpose of installing Enzyme
was to give us the ability to write out some expectations
that just work with React a little bit better.
We then installed Enzyme,
and then we wired it up to our project.
So let's take a pause right here.
We'll come back the next section,
and we're going to rewrite this expectation
to work a little bit more nicely with React and Enzyme.
So quick break, and I'll see you in just a minute.