-: Our two tests inside the
app.test.js file are looking pretty good.
But there's just one last quick refactor
I wanna do inside of here.
You'll notice that both of our tests right now
have the exact same line of code
right here and right here.
So anytime that you're writing
out multiple tests inside of a single file,
and start to notice that there's some
common setup or some common code between
both those tests.
We like to extract that common logic
to another helper function that is provided
to us by jest.
This helper function is referred to
as the before each function.
And we'd like to use it to kind of abstract out,
or pull out logic that needs to occur
for every single test inside this file.
So let's do this refactor,
and then we'll talk about what it's really
doing for us.
Above our first test inside this file,
I'm going to call a function before each.
And to that function I'm going to pass an
arrow function like so.
So any logic that we put inside of this
function right here will be executed before
the test and this test right here.
So again, it's a great place to
put some common setup logic.
In this case, we're probably going to
want to make sure that we initialize this
wrapped variable right here before we get
into either one of these tests.
So, I'm going to extract that variable
up here to the before each statement-
and then I can remove it from the second test as well.
Okay, so this right here is almost a hundred
percent equivalent to what we had before.
Before this test is executed that
before each statement will run,
and it will initialize our new app component,
and assign it to this wrapped variable.
This test will then execute.
We'll look at that wrapped variable
and try to do some expectation around it.
Then, after this test has been completed
before each has ran a second time,
and then we jump straight down to this
test down here.
So, the word before each very literally
means before every single test
we're going to do some common setup logic.
Now, before we try to run this code right here,
there's one little issue with
how we've written it.
Remember how scoping of variables works with JavaScript.
At present,
we are defining a new variable called wrapped,
in the scope of this arrow function.
So this wrapped variable right here is not
in the same scope as wrapped right here
in wrapped right here.
They are in different scopes.
And if we try to run the code as it
stands right now,
we'll get an error message saying
that variable wrapped and wrapped
are not found or they are completely undefined.
So to get around this what we usually
do is initialize our variable that
we're making use of outside of the
before each statement.
So we would write above the before each
let wrapped like so.
Then inside the before each statement,
we are not going to initialize the
variable again.
Instead, we will declare our new instance
of the app and assign it to
that wrapped variable.
So now that wrapped is defined inside
this outer scope is it is accessible
within the before each statement,
within this test,
and within this test.
And before each of these two tests,
we're going to assign a new copy
of our app component to that wrapped variable.
Now, the other thing I'll mention here
very quickly is you'll notice that
we're using the let keyword right here rather
than the more typical const.
The reason for that is that we are very
clearly going to want to reassign the value
to wrapped several times throughout this file.
So, when we first initialize the variable right here,
we're saying,
hey we do not yet know what we
want to assign to this variable
just yet.
So we're going to use let,
which will allow us to reassign a new value
to that variable several times throughout
this file.
Okay, so now last thing I'm going to do
is save this file.
I'll flip back over to my terminal,
I'll check out my tests,
and it looks like they're still passing.
Perfect.
So we're going to be using this
before each construct throughout all the
rest of the tests that we put together as a
location that we do some common setup
that needs to be done for every single test
inside this file.
Now, one thing that you might be curious about is
whether or not before each is going to apply to
any other test inside of our project-
and the answer is no.
This before each right here is only going
to apply to tests that we place inside this file.
No other tests inside of our project.
All right, so now that we've got this
refactor done,
let's continue in the next section
and move forward with our application.