Mocking Requests with XHR Mock

Edit on Github

If you are rendering a component that hits an api you want to mock the response for, this article is for you. At Availity, we have multiple resources that require a user to be authenticated in order to access. However, if you want to showcase how a component works its not straight forward with Gatsby.

Install Dependencies

npm install xhr-mock

Adding a Gatsby Browser Config

The Gatsby Browser config allows a list of apis to be exported that perform certain tasks during the browser's lifecylce.


We specifically care about the onClientEntry because it allows us to hook into the DOM once the gatsby browser runtime has started.

gatsby-browser.js

exports.onClientEntry = () => {
  // We are going to do stuff in here
};

Adding in Mocks

This article is not meant to teach how to use xhr-mock but rather how to use it for mocking requests. This example will be in the case we are wanting to render the @availity/favorites package. It will provide an example of mocking as well as requiring the DOM.


favorites.js

// Export a function that takes in the mock object and sets up a mock
export default mock => {
  // For getting the current user's id
  mock.get(/\/api\/sdk\/platform\/v1\/users\/me/, (req, res) =>
    res.status(200).body(
      window.JSON.stringify({
        id: '1234',
      })
    )
  );
  // Get a list of favorites
  mock.get(/\/api\/utils\/v1\/settings/, (req, res) =>
    res.status(200).body(
      window.JSON.stringify({
        settings: [
          {
            favorites: [
              {
                id: '1234',
                pos: 0,
              },
            ],
          },
        ],
      })
    )
  );
  // Update the favorites depending on what we sent in
  mock.put(/\/api\/utils\/v1\/settings/, (req, res) => {
    const favoritesUpdate = JSON.parse(req._body);
    return res.status(200).body(
      window.JSON.stringify({
        ...favoritesUpdate,
      })
    );
  });
};

gatsby-browser.js

const mock, { proxy } = require('xhr-mock');
const favorites = require('./favorites');
exports.onClientEntry = () => {
    mock.setup(); // init
    favorites(mock); // add favorites to mock
    mock.use(proxy); // use the proxy from xhr-mock
};

Usage

Since this is an ES6 Package we also have to make sure we have the ES6 Plugin. Follow this tutorial if you need help adding the package to be compiled.


The pre-req is adding a custom component File that use @loadable/component to allow Favorites to use the DOM.

Favorites.js

import loadable from '@loadable/component';
export default loadable.lib(() => import('@availity/favorites'));

favorites.mdx

import Favorites from './Favorites';
import '@availity/favorites/style.scss';
<div className="w-100 d-flex flex-row justify-content-around align-items-center">
  <Favorites>
    {({ default: FavoritesProvider, FavoriteHeart }) => (
      <FavoritesProvider>
        <span className="d-flex"><FavoriteHeart className="pr-2" id="123456" />Click The Heart</span>
      </FavoritesProvider>
    )}
  </Favorites>
</div>

Sources

Note you can also hit the "Edit On Github" Button to view the source code for how we rendered this page if you need assistance replicating this.

PREVIOUS
Rendering ComponentsNEXT
Relative Links to Pages