Narrator: In the last section,
we spoke about why our test is currently failing
and we spoke about how we're going to fix it up.
So we're going to be making use of that moxios library
that we installed just a little bit ago.
If you're curious at all,
you can check out the moxios documentation
at github.com/axios/moxios.
So this package is officially maintained
by the Axios people just to make testing Axios more easy
and more straightforward.
If you want to,
you can read some of the documentation on here.
But otherwise, we're going to essentially cover
everything you need to know about it.
So back inside of our test file,
we're going to add a beforeEach statement.
And inside that beforeEach,
we're going to set up that moxios Library.
So I'm gonna add in a beforeEach
and I'm also gonna add in an afterEach.
Remember we use this afterEach to do some cleanup
on our tests after they've been executed.
So we'll talk about why we're adding in the afterEach
in just a second, but for right now,
let's focus on the beforeEach.
Now at the top of the file,
I'm gonna make sure that I import that moxios library.
So I'm going to add a import for moxios from moxios like so.
Then down inside the beforeEach,
I'm gonna call moxios.install.
So this function call right here
is what's going to set up moxios
and tell it to attempt to intercept
any request that Axios tries to issue.
So essentially, we are saying inside the beforeEach
right before this test runs
and right before we try to simulate that button click,
turn off any requests that are being issued by Axios.
Just stop them, nip them in the bud.
Then after that, we're gonna add an additional line of code
to tell moxios if it sees a request
going over to that JSON API to get that list of comments,
then it should attempt
to automatically respond to it for us.
So intercept that call and respond to it with some data
and trick Axios into thinking that it just got a response.
So to do so, we'll write out moxios.stubRequest
and the first argument to this is going to be the URL
that we want to intercept request to.
So the URL that we want to intercept request to
is listed inside of our actions index.js file
inside of our fetchComments action creator.
So you and I are trying to make a request
over to this URL right here.
So we want to watch for any request going to this URL.
And if we see it, we want to intercept this request,
exactly this one right here.
So I'm going to copy that URL
and then I'll pull it back over to this stubRequest function
and paste it in like so.
Then as a second argument,
we're gonna customize how moxios responds to that request.
So moxios is going to try to respond to this URL
or anytime Axios tries to make a request to this URL.
And as the second argument, we're gonna provide an object
that's gonna be returned back to Axios
and Axios is gonna be fooled into thinking
this is the response that it just got back
from this real API.
So we're gonna first respond with the status of 200
so that Axios thinks that the request
was successfully issued.
And then we'll also add on a response property as well.
So this response thing is gonna be the actual data
that gets served back to Axios.
So this is gonna be our list of comments
that eventually gets handed back to our application.
So you and I are gonna fake out
a list of comments right here.
Remember that our list of comments coming back from this API
is an array of objects,
and every one of those objects has that name property
and that was the only property we cared about.
Remember we said out of this big list of objects right here,
we were just going to assume that the name property
was the comment text that we really cared about.
So inside of this response thing,
I'll add in an object with a name property of Fetched #1
and that kinda indicates like fetched comment number one.
And I'll put in just one more.
I'll say name of Fetched #2.
And that's it.
So now anytime Axios tries to make a request to this API,
we're going to instantly respond to it right here,
instantly respond, and we're going to try to say,
hey, you know what, Axios,
here's the data that just came back.
Don't worry, we took care of the request.
This is the data that actually came back from the API,
even though you and I just fabricated that data
out of thin air.
So now we can save this file
and we'll check our terminal in just a second,
but before we do, one last quick thing I wanna handle.
So the afterEach statement right here,
remember up here we installed that moxios mock,
after our test runs, we're going to uninstall the mock.
So uninstalling it makes sure that we're not
going to accidentally stub out any other requests
inside of our application
with this same response right here.
Now it's entirely probable that we will want to mock out
other requests that are being issued,
but we might not want to use the same stubbed request
or respond with like the same Fetched #1 and Fetched #2.
So inside the afterEach, we'll say moxios.uninstall.
And that's just gonna make sure
that we don't attempt to reuse this request
or this stubbed request
in some other location inside of our test suite.
Okay, so that's pretty much it.
Now we're going to flip back over to our terminal
and see if our tests are working now.
I still expect this thing to fail, right,
because we do not have 500 comments coming back.
We're only going to expect to see two.
So I will update that right now.
I'm gonna say expect finding li's,
I expect to only see two now
and they should have the text of like Fetched #1
and Fetched #2.
Okay, so I'll flip back over and check out my test suite.
I gotta start it up really quickly.
Let's take a pause right here
and we'll continue in the next section
and we'll see how our test suite does.
Now, if your test do not pass still,
that's totally fine and totally to be expected.
So let's come back to the next section
and just see how we're doing.