Instructor: At the end of the last section,
we spoke about how we're probably gonna have
to do that same beforeEach thing
for creating our new component instance
for every test inside this file.
And then we also very briefly mentioned
that we still have to do that component cleanup right here.
That needs to occur after every test we run.
So let's first get started by extracting
this common setup logic right here
into a beforeEach statement.
So we're gonna do the exact same thing
that we just did inside of our App.test.js file.
At the top, I'll first declare a new variable
with the let keyword of wrapped.
So that's going to initialize that variable
in the scope of this entire file.
I'll then define my beforeEach,
and I'll make sure I pass it an arrow function, like so.
Now inside the beforeEach statement,
I will assign a value to the wrapped variable.
So I'll say mount CommentBox.
So now just like before,
every time we're about to run a test,
we're gonna create a new instance
of the CommentBox and assign the result
to this wrapped variable.
So now we can clean up the wrapped variable declaration
inside of our it statement.
And that looks good.
Now, I'll very quickly save this file
and make sure that my tests are still passing.
So back over here, it looks like we're good to go.
So now we need to take care of that other task
that we spoke about.
We need to make sure that after every single test
inside this file has been executed,
we attempt to unmount or clean up the component
that we created so that that component
does not somehow pollute or otherwise interfere
with other tests inside this file.
So this is going to be some common cleanup code
that needs to run after every other test inside this file.
So as you might guess,
just like this beforeEach statement right here,
we have access to another helper
from Jest called afterEach.
afterEach is the exact opposite of beforeEach.
So afterEach will run a function
or a little chunk of code that you and I pass it
after every single test is executed.
So right underneath beforeEach right here,
I'll define afterEach
and I'll pass it an arrow function as well.
So then inside of afterEach,
we'll do our component cleanup,
which is going to take the form
of calling that wrapped things unmount method
and you can see in the documentation for Enzyme,
it's listed right here.
If we click on unmount,
it'll take us to the documentation.
So all this function does is unmount the component
from that fake DOM or from the DOM
that is created by jsdom for us.
It essentially takes that component
out of the entire DOM structure.
And so we don't have to worry about it somehow interfering
with other components that are created in other tests.
So inside of our afterEach,
we'll simply call wrapped.unmount, like so.
So now we can start to imagine the order of operations
that occurs inside this file.
When Jest first starts up,
it's gonna find all the beforeEach statements
inside of here, all the afterEach,
and all the it statements.
Then for every single it statement,
we will execute the beforeEach,
we'll execute the it,
and then we'll execute the afterEach.
And that process is gonna occur
again and again and again
for every it statement inside this file.
So every it statement gets a brand new instance
of CommentBox, the test runs,
and then we do our cleanup automatically right here.
So the pattern that you see inside this file right here
is going to be a pattern that's repeated
across just about every test file
that we're gonna end up writing inside of our project.
We've got our beforeEach to initialize our component,
the afterEach to clean up,
and then our list of it statements down below.
So this looks pretty good.
Let's make sure our tests are still passing
and yep, it looks like we're good to go.
So let's take a quick pause right here
and we'll come back in the next section
and continue testing our CommentBox component.