React Testing Tutorial - 45 - MSW Handlers

in the previous video we installed MSW and set up the server within the MOX folder however we did end the video with an error as the Handler's file is missing let's fix that in this video within the MOX folder create a new file called handlers.ts within this file we are going to handle all the HTTP requests and respond with a mock response we handle the request and hence the file name handlers for our scenario we need to mock rest apis so at the top import rest from MSW the other alternative being graphql next we export an array called handlers to handle a rest API request we need to specify its method path and a function that would return the mocked response So within the array let's start with rest followed by the method in our case it is the get method the first argument is the path this is going to be the same full path we are using in users dot TSX copy and paste it the second argument is a function which receives request response and context if you've used Express package with node or word with next.js this may seem familiar from this function we are going to respond with mock data for that return the response function and the first argument to responds is a status which is going to be context dot status of 200. the second argument is going to be Json data the Handler will respond with so context dot Json accepts an array and we need to match the response our user's component expects at the moment it expects every user to have a name property so let's add three objects with a name Bruce Wayne Clark Kent and Princess Diana and that pretty much is our Handler function we have the need for just one but you can Mark as many endpoints as you want to since handlers is an array this array is what is spread and passed into setup server in server.ts the error from before is also fixed alright to summarize we have created a new file called handlers within the MOX folder from the file we have exported an array of handlers to work with rest apis we import rest from MSW each Handler is a combination of a method like get post Etc the path to the API endpoint and a function which Returns the mocked response this is provided as an argument to set up server defined in server dot TS if it is clear so far join me in the next video where we are going to write our test thank you for watching and I'll see you in the next one

Channel: Codevolution

Views: 8,074

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, MSW Handlers

Id: MJb0lc2AOq4

Length: 4min 0sec (240 seconds)

Published: Mon Sep 19 2022