React-network-hijack NPM

React Network Hijack

The aim for this library is to provide an easy way to mock network requests in a browser while using React components. This was originally developed with the intent of being used as part of your stories in Storybook but there is no reason it shouldn't work with a framework which runs in the browser.

Getting Started

To use this in your stories or other browser tests you can specify a set of urls, their methods to mock and what data to return as options to the HoC and then pass your own component in.

import withNetworkMock from "react-network-hijack";

const NetworkMocked = withNetworkMock({
  GET: {
    "https://jsonplaceholder.typicode.com/todos/1": {
      body: {
        ...
      },
      status: 200,
      delay: 200
    }
  },
  POST: {
    ...
  }
})(MyComponent);

The top level object contains the methods to mock. For each of these methods you can mock individual urls with a set of options.

body:
- Type: Object or String
- Required: Yes
- Usage: The body content to return. If an object is passed it will be stringified as JSON else the String will be passed along.
status:
- Type: Number
- Required: No (default: 200)
- Usage: The response status to return.
delay:
- Type: Number
- Required: No (default: 50ms)
- Usage: The amount of delay a network request should have.

If a request is not mocked an event will be emitted that you can capture in some other component and display a warning to the user. You can import this with:

import { UNMOCKED_EVENT } from "react-network-hijack";

You can also pass a whitelist to the withNetworkMock function to stop emits happening on certain URLs. The whitelist can contain either regular expressions for fuzzy matching or strings for exact matches.

import withNetworkMock from "react-network-hijack";

const whitelist = ["example.com", /www.example.com/];

const NetworkMocked = withNetworkMock(config, whitelist)(MyComponent);