Instructor: In the last section,
we tried to find our fetch comments button,
simulate a click on it,
and then we tried to find 500 LIs
inside of our application.
But depending upon your personal computer,
you either saw our test fail
or you saw an err message
that might've looked something like this.
If I scroll up to the top of this err message,
it says "Cannot read property 'map' of undefined."
So in this section,
we're gonna figure out what's going wrong.
Well, I'm gonna first start off
by showing you a quick diagram.
So inside that test file,
we are successfully triggering
that click event on the button element.
The action creator definitely is getting called,
that request is issued,
but then here is the problem.
The request fails to retrieve any comments
from that JSON API.
So let me tell you about why that's happening,
why the request is failing
and tell you a little bit more about
why we're seeing this err message appear over here
that says "Cannot read property 'map' of undefined".
Now just to be clear,
if you don't see this message,
if you instead see a failing test
that says that you found zero LIs,
that's totally fine as well.
Your test is still failing
for the same reason.
All right, so quick diagram.
So you'll recall
that we looked at a diagram very similar to this
earlier on inside the course.
We had said that when we run our test suite, Jest,
inside the command line environment,
we are essentially executing our application
inside of a different environment
than the usual browser.
So when our test suite runs,
all of our code is making use of that jsdom API.
And we had said that that jsdom API
is kind of like a fake browser environment.
It kind of mocks out or it fakes
a lot of the functionality of a normal browser.
So the issue is that
when our application tries to use Axios
to make a request to the outside world
or to some outside API,
that request is failing entirely
because we are working
with a fake browser environment.
We don't have the ability
to make AJAX requests
from within our test suite
when we are making use of jsdom.
So that's why we're seeing that failure err message
and that's why you might be also seeing
something that says found zero LIs.
To give you a little bit better explanation
on "Cannot read property 'map' of undefined" right here,
we're seeing this err message
or you might be seeing this err message
because back inside of our comments reducer,
right here, action.payload.data.map,
if the request fails to retrieve any data,
then the data property right here will be undefined.
And so we cannot call map on undefined.
That's why we're seeing that particular err message.
All right, so how do we get around this?
How do we somehow test an Axios request
or any type of network request
when we are testing our code
from the command line environment
and making use of jsdom?
Well, to make this work
and to make our test suite function the way we expect,
we're going to use a package
that we installed just a couple sections ago
when we first started working
on this fetch request feature.
So you might recall
that we installed a package called Moxios.
Moxios, the name is kind of a play on Axios.
Moxios means like mock out the Axios API
or kind of trick Axios into thinking
that it's working the way it should work.
The idea behind that Moxios library
is that we can tell it to watch Axios
for attempting to make a request
and anytime it does,
we're going to trick Axios into thinking
that it instantly gets a response.
No network request is going to be actually created.
So the instant Axios
tries to make a network request,
Moxios is gonna axe that.
It's gonna say, nope,
you're not allowed to make any request,
but it's going to instead,
rather than just straight up denying it
or straight up failing the request,
Moxios is going to very quickly turn back around
and say oh hey, yeah,
that request, don't worry about it.
It didn't actually get issued
but here is some data
that you should use in place
of whatever would've come back from that API
that you're trying to make the request to.
So Moxios is around solely to help us out
inside of our test environment.
That's all we're using it for.
We're never gonna use Moxios
in a real production application
because it's sole purpose is to fake out requests
or to trick Axios
into thinking a request was successfully issued.
So that's how we're gonna fix this issue.
We're going to keep Axios
from trying to make any request
to the outside world
by setting up Moxios
inside of our test suite.
So let's take a quick pause right here.
We'll come back to the next section
and start setting that thing up.