React Testing Library Tutorial #13 - Mocking Requests 

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

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 }

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

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

We can mock the axios module by jest.mock('axios') example: import { render, screen } from "@testing-library/react"; import followersResp from "../../__mocks__/followers-response.json"; 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 () => { axios.get.mockResolvedValue(followersResp); render( ); const followers = await screen.findAllByTestId("follower-item"); expect(followers).toHaveLength(5); }); });

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 ?

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?

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"} ] }) } }));

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

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

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?

Exellent compilation , showing the basics of testing with React.js.Everrything is very well explained. Thank you very much. In this particular video though , I got little confused. What exatly is mocking. What happens when use this method , are the tests go to the Server API , or not , and how we get the data. Thanks again.

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", () => { axiosSpy.mockResolvedValueOnce(mockResponse); }); });

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

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

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

mock service worker is a good alternative to mocking axios or fetch.

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.

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()

Thank you, Laith, great explanation

what if we have more than one endpoints to make a get call? you have shown it for a case where we are making the call to same endpoint.. please respond...thanks

This is great tutorial for react testing library

I switched out mocking of axios to the following approach: beforeEach(() => { //jest.mock("../../../__mocks__/axios") const mockGet = jest.spyOn(axios, 'get'); mockGet.mockImplementation(() => mockResponse) });

we can use Service worker too

Is this a unit test or an integration test?

How to test a dispatch inside a component and have .then() waiting for a response from the server? I want to write a test case for the save function inside my component which is triggering with fireEvent. onSave = () => { dispatch(createItem(payload)) .then(res => { if(res.code === 200 && res.status === 'OK'){ setSomeState(randomValue) } }) }; I want to let the execution go inside .then() block. how can we write the test case for this scenario with jest mock function?

great explanation. Thanks man!

What if you want to use mocking in different pages?

You can use MSW for mocking.

what happen if a have to test several components that have axios get methods, and each one has different result structure

Great job asking for feedback on mocking API calls

How do you mock more that one API request to different test cases

can we use json server for mocking apis ?

thanks laith n shaun.

msw? Can we use it to mock http call?

can we use postman to test api instead

very helpful

9:14 I didnt quite understand why it failed in the first place? Anyone?

i don't quite get why the Mocks resetting gives out an error

How to mock post api request

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

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