A React hook to create Axios Mocks

README.md

A simple hook which can be used to create Axios mock. The hook will throw an error if an unmocked route was found.

Works great in Storybook stories:

export const EmptyResult = () => {
  useMock((mock) => {
    const result = [];
    mock.onGet(searchUrl).reply(200, result);
  });

  return <MySearch query="abc" />;
};

use-mock.tsx

import { useEffect } from 'react';
import axios, { AxiosRequestConfig } from 'axios';
import MockAdapter from 'axios-mock-adapter';

class MissingMock extends Error {
  constructor({ method = 'get', url = '' }: AxiosRequestConfig) {
    super(`Unhandled route in Axios mock: ${method.toUpperCase()} ${url}`);
    this.name = 'MissingMock';
  }
}

const mock = new MockAdapter(axios);

export function useMock(callback: (mock: MockAdapter) => void) {
  useEffect(() => {
    callback(mock);

    mock.onAny().reply((config) => {
      throw new MissingMock(config);
    });

    return () => mock.reset();
  }, [callback]);
}