React Testing Tutorial - 43 - Mocking HTTP Requests

in this video let's learn about mocking http requests when writing tests to help us get started i have once again set up some code let me explain what i've done in the components folder i have created a new folder called users within the folder i have a component file users.tsx the component makes a get request to jsonplaceholder api to fetch a list of 10 users this url is a free api which we can use when learning http related concepts please feel free to google jsonplaceholder and learn more about it once the data has been fetched we extract only the user's name map it into an array and store it in user's state variable in the jsx we map over the user names and display them in a list if there is an error when fetching the data we set a state variable called error with the text error fetching users which is then rendered in the jsx all this is possible with the help of use state and use effect hooks from react in the test file i have written a very simple test to ensure the component renders without any errors if you've understood the setup here is our goal we need to write a test to ensure the list of users are being displayed or the error message is displayed if there was an error now we could go ahead and write the test but there is a very important consideration to be made real apis are primarily used only for end-to-end tests and not for unit or functional tests for one we don't have to ensure the server is up and running to test whether the component renders as intended and two since these tests are run quite often it is not feasible to include real apis which may even charge you based on the number of requests what we have to do instead is mock the http requests in our test in our case we mock the response to the request with a list of users or an error for mocking when writing tests with react testing library the go to package is mock service worker mock service worker is an api mocking library that uses service worker api to intercept actual requests it is the closest thing to mocking a server without having to create one it is pretty feature rich so we won't be covering every detail about msw however we will learn how to monk the request for our specific users component you can then use that knowledge to learn more about msw and apply the learnings based on your requirements all right if it is clear as to why we mock http requests and why we need msw in the next video let's set up msw in our project

Channel: Codevolution

Views: 10,354

Keywords: Codevolution, React Testing, React Testing Tutorial, React Testing Library, React Testing Library Tutorial, Jest, Jest Tutorial, React Jest Tutorial, React Unit Testing, React Unit Testing Tutorial, React Testing for Beginners, React Testing Tutorial for Beginners, Codevolution React Testing, Mocking HTTP Requests

Id: dL_TsWTASfg

Length: 3min 28sec (208 seconds)

Published: Mon Sep 19 2022