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.
- 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.
- Next, inside the directory, we create a file with the same name as the module that will be mocked.
- 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. - 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 ofjest.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 withstatus
anddata
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!
Instructions
Back in our language_spoken
app, take a look at the countryListLookup()
function. This function calls the the httpRequest()
function (see utils/http-request.js). Let’s replace this httpRequest
function with a mock!
First, create a folder called __mocks__/ inside the utils folder. Then, create a file called http-request.js inside of the __mocks__/ folder.
Nice work! We now have a place to define our mocked httpRequest()
function.
Inside of the newly created http-request.js file, create an exported function.
Inside the jest.fn()
, pass a callback function that returns the resolved Promise below:
Promise.resolve({ status: ``, data: [] })