Mocking

The StarterKit plugin uses fetch-mock to simulate API responses. This is extremely useful during development of your application as you may not have access to APIs but still need to test your code and populate your user interface with data.

fetch-mock

fetch-mock is a JavaScript library that provides a mocking and stubbing mechanism for the fetch function. It allows you to simulate HTTP requests and responses in your tests or development environment without actually making real network calls.

With fetch-mock, you can intercept fetch requests and define custom responses, enabling you to test your code's behavior under different scenarios. It provides a simple and expressive API to set up mock responses based on various conditions like URL, method, headers, and more.

More details and documentation for fetch-mock can be found here:

fetch-mock Documentation

Implementation

To implement mocking for your API calls using fetch-mock you will need to follow the steps below:

Step 1: Add mock data

It is recommended that you store mock data for an API in its own file. This keeps your mock data organised which makes it easier to maintain.

Create a new file in /src/mock/ with an appropriate name. In this example the data is for customer accounts so we will use customerAccounts.ts:

export const customerAccountsData = [
  {
    accountId: "29272156", 
    name: "Main Account",
    type: "Platinum Plus", 
    balance: "4611.45", 
  },
  {
    accountId: "29724365", 
    name: "Savings Account",
    type: "Super Saver", 
    balance: "15012.21", 
  },
  {
    accountId: "29851642", 
    name: "Mortgage",
    type: "Mortgage Account", 
    balance: "249234.89", 
  },
];

The mock data should be exported using a unique and identifiable name. In this example we will use customerAccountsData.

Step 2: Import mock data

To be able to reference and use the mock data we need to import it into /src/mock/fetch-mock.ts which is where we instantiate fetch-mock and add routes for our mock data.

Add an import statement to the top of fetch-mock.ts like the one below for your mock data:

import { customerAccountsData } from "./customerAccounts";

Step 3: Add fetch-mock routes

Similar to how you would define routes in a router to match URL paths to specific pages in your application, we need to define routes in fetch-mock to match API URL paths and request types with the corresponding responses that should be returned to your application.

Here is a simple example showing how to define a route for a HTTP GET request to the URL http://www.example.com/accounts/ which after 5 seconds returns a response with HTTP status 200 containing the mock customer accounts data:

fetchMock.get(
  "http://www.example.com/accounts/",
  (_url, _opts) => {
    return {
      status: 200,
      body: customerAccountsData,
    };
  },
  {
    delay: 5000,
  }
)

fetch-mock has a rich set of features for allowing you define your routes and it is recommended you review the fetch-mock documentation for more information:

fetch-mock Documentation

Additional Configuration

Fallback to Network

By default fetch-mock is configured to fallback to network. This means that if an API call is intercepted and no routes match the API URL, the API call will be directed to the network as normal.

fetchMock.config.fallbackToNetwork = true;