Over the past few exercises, we have been analyzing the findRecipe() function which makes an REST API call to fetch the recipe data. Testing with a real REST API is not ideal for a few reasons:

• We aren’t concerned about whether the third-party API works. Instead, we only care about whether or not the function that performs the API call works.
• Incorporating REST API calls into our tests can create fragile tests that may fail simply due to network issues.
• If we were interacting with a production-grade database, we could accidentally alter official data.

A safer and more efficient way to write our tests would be to create a mock function that bypasses the API call and returns values that we control instead. Luckily, Jest provides us with a way to mock functions and even entire modules to do just that!

Creating the mock function and then replacing the real function with the mocked one requires two separate steps. For the sake of clarity, we will break down this process over this exercise and the next. First, let’s go over the steps to create a mocked function.

1. First we need to create a directory labeled __mocks__/ in the same directory as the module that we want to mock. Later on, Jest will know to look for this directory when mocking the specified module.
2. Next, inside the directory, we create a file with the same name as the module that will be mocked.
3. Then, we create a module with the functionality that we want. Functions that we want to mock can be created using jest.fn() – the function provided by the Jest library for creating mock functions.
4. Lastly, we export the module.

The function that makes the API call is called apiRequest() and it is exported from a file called utils/api-request.js. To mock this file and the apiRequest() function, we might write something like this:

// file: utils/__mocks__/api-request.js
const apiRequest = jest.fn(() => {
  return Promise.resolve({ 
    status: "", 
    data: {} 
  });
});

export default apiRequest;

Let’s break down this example:

• Since we are mocking the utils/api-request.js file, we created a file called utils/__mocks__/api-request.js.
• Inside, we declared an apiRequest() function that is assigned a value of jest.fn().
• By passing a callback function to jest.fn(), we can define the behavior of the mocked function. In this case, we have the mocked function return a custom Promise that matches the structure expected by our application (an object with status and data properties).
• Lastly, we export apiRequest as the default export.

In the next exercise, we’ll see how we can replace the actual apiRequest() function with our mocked version and even further define how our mock function will behave within our tests. For now, however, let’s practice making a mock function!