React Testing Library Tutorial #13 - Mocking Requests

Check out Laith's YouTube channel for more tutorials:

🐱‍💻 Access the course files on GitHub:

🐱‍👤 Get access to extra premium courses on Net Ninja Pro:

🐱‍💻 Full React Course:

🐱‍💻 Social Links:

[yanaiedri]

way change in node modules ??? you can change in the package.json - add a jest section like that:
"jest": {
"collectCoverageFrom": [
"src/**/*.{js, jsx, ts, tsx}"
],
"resetMocks": false
}

[ferasmasoud]

Based on the last bug of testing, instead of changing node_modules, we can put:
"jest": {
"resetMocks": false
},
in package.json

[sritimanadak]

simpliest:
jest.spyOn(axios, "get").mockReturnValue(mockResponse);

[fotoflo]

Terrific series. Question: how can i mock different responses based on different URLs passed into Axios?

[shadmanmartinpiyal]

the code in this video didn't work for me, i couldn't trigger a mock for axios. Anyway a quick solution is to put the following code inside the test file and everything will be working fine. Basically the code is for mocking "axios"
jest.mock('axios', () => ({
__esModule: true,
default: {
get: () => ({
data:[
{userId:"not"},
{userId:"really"},
{userId:"one"}
]
})
}
}));

[alinpetrusca]

Why not mocking the module directly in the test file ? Something like this:
jest.mock('axios', () => ({
__esModule: true,
get: () => ({
your: 'object'
})
}));

[tfn]

Mock service worker is a great solution for mocking different endpoints and routes. The docs are pretty clean and easy to follow along with.

[azharponani]

modifying node_modules will help us to pass tests only in our local machine right ?
What if we have to run the tests in CI/CD pipelines ?

[sonjamoamo]

I don't get this video. Is mocking the axios request (just by creating a folder __mocks___ and a file axios.js) supposed to take over the real axios request in FollowersList? How does this work? My tests still use the real axios request so am I missing something?

[essaadi_elmehdi]

We can mock the axios module by jest.mock('axios')
example:

import followersResp from
import { MemoryRouter } from "react-router-dom";
import FollowersList from "./FollowersList";
import axios from "axios";

jest.mock("axios");

describe("FollowersList", () => {
test("should dispaly five followers", async () => {


render(
<MemoryRouter>
<FollowersList />
</MemoryRouter>
);

const followers = await


});
});

[kikevanegazz]

How can you say that tests will run over and over in production? if your tests run in production, then the problem about resource consumption lies in the infrastructure, not the approach.

[PeterFullen]

Do you have an example mocking using the msw library? Btw great

[BrainwavesPotential]

Thank you so much for the videos, they were super helpful!

Regarding this one: How about using spies? Wouldn't it be easier to mock requests?

import axios from "axios";

const mockResponse = {...}

describe("...", () => {
const axiosSpy = jest.spyOn(axios, "get");

// Mock return value for test
it("test case", () => {

});
});

[Nilkamalsha]

If there are multiple apis in the application, how we can mock it ?

[davem.]

Why is the __mocks__ folder put into the src folder? In the jest docs you can find that for mocking Node modules (like axios right?) "the mock should be placed in the __mocks__ directory adjacent to node_modules". Is it here different because of being a React project?

[ryder]

Lol changing node modules to fix your issue... bruh

[joaopaulorodriguespereira]

And if I have another API in another file, how could I change the mocked data as in this case in receiving the same mocked data

[oubaidaawaw]

can we use postman to test api instead

[arpithap]

Yes same question here to why you wanna mock data something like that and modifying nodemodule is strictly not allowed. why can't use the approach jest.mock()

[emmanuelbamidele]

Thanks for this video, for the purpose of clarity can you confirm if giving this test the right name is what enables the api request to be able to be mocked as i see that in the testfile for the followerlist component this moked api call was not imported and nothing really refernced it... Thanks