Skip to content
forked from grug/data-mocks

Library to mock local data requests using Fetch

Notifications You must be signed in to change notification settings

sumiet/data-mocks

 
 

Repository files navigation

data-mocks

Library to mock local data requests using Fetch

Why is this library useful?

When developing web applications locally, it is not uncommon to request data from an API. However, the API might not actually exist yet, or we might want to control what the responses are.

Typically, this sort of problem has been solved by either writing a separate mock API service alongside the project (i.e. having a Node service running locally with your application) or creating a development database that replicates staging or production environments. Both of these approaches are heavy and can lead to using incorrect data if schemas are out of sync.

This library aims to allow rapid local development without the dependency of a database or fully implemented APIs.

Setup

Assuming your project is using fetch for HTTP operations:

  • Either npm install data-mocks or yarn add data-mocks
  • Import into your project with import { injectMocks } from 'data-mocks'
  • Create an array of mocks you would like to use (see examples)
  • Pass array of mocks to injectMocks()
  • Hooray, all HTTP requests to mocked endpoints will now respond with the mocked data you have specified

Examples

import { injectMocks } from 'data-mocks';

const mocks = [{
  url: /some-endpoint/,
  method: 'GET',
  response: { some: 'response' },
  responseCode: 200
}, {
  url: /some-other-endpoint/,
  method: 'POST',
  response: { another: 'response' },
  responseCode: 200,
  delay: 1000
}];

injectMocks(mocks);

fetch('http://foo.com/some-endpoint')
  .then(response => console.log(response)); // resolves with { some: 'response' }

fetch('http://foo.com/some-other-endpoint', { method: 'POST', body: {} })
  .then(response => console.log(response)); // resolves with { another: 'response' } after a 1 second delay

In this example, we define two mock responses in our mocks array. The Mock objects are described by the Mock interface. We then inject the mocks into our application via the injectMocks() function. Finally, when we use fetch to make a request to endpoints that match our mock objects, the mocked responses are returned (note: the second fetch will respond after the conigured delay in milliseconds).

Mock interface

Property Type Required Description
url RegExp Regular expression that matches part of the URL
method string HTTP method matching one of 'GET', 'POST', 'PUT', 'DELETE'
response any Body of the response
responseCode number Response code. Defaults to 200
delay number Delay (in milliseconds) before response is returned. Defaults to 0

injectMocks interface

Parameter Type Required Description
mocks Mock[] Injects list of mock responses into application. Any HTTP requests made to matching endpoints will trigger the mock response

About

Library to mock local data requests using Fetch

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 100.0%