React-native-fetch-mock NPM

react-native-fetch-mock

fetch mock for react-native

React Version

Why FetchMock ?

No fetch mock could be used easily for react-native.
So, I create one by myself.

Requirements

Nodejs >= 12.x

Roadmap

Combined with Mock.js
Support exclude for some other path
Proxy for other api server
Delay for global and specific path
Support flexible fallback to network(#6)
Support inline valiation(such as: '/api/users/{userid:a-z|A-Z}')

Usage

mocks/index.js

export default {
  '/api/path': ({ method, url, params, urlparams, headers }) => {
    const all = Mock.mock({
      'list|2': [{
        'id|+1': 1,
        'name': '@first @last',
        'age|18-54': 1,
      }]
    }).list;
    return all;   // default status is 200
  },
  '/api/path/{id}': ({ method, url, params, urlparams, headers }) => {
    const all = Mock.mock({
      'list|2': [{
        'id|+1': 1,
        'name': '@first @last',
        'age|18-54': 1,
        'urlid': urlparams.id,
      }]
    }).list;
    return all;
  },
  'POST /api/path': ({ method, url, params, urlparams, headers }) => {
    return {
      status: 201,
    };
  },
  'PUT /api/path/${id}': ({ method, url, params, urlparams, headers }) => {
    return {
      status: 204,
      id: urlparams.id,
    };
  },
}

index.js

import FetchMock from 'react-native-fetch-mock';

if (__dev__) {
  global.fetch = new FetchMock(require('path/to/mocks/directory'), {
    delay: 200, // 200ms
    fetch: global.fetch,
    exclude: [
      'http://www.google.com',
      '/foo(.*)',
    ],
    fallbackToNetwork: true,  // ['true', 'false', 'always'], true: Unhandled calls fall through to the network;false: Unhandled calls throw an error; 'always': All calls fall through to the network, effectively disabling react-native-fetch-mock
    proxy: [{
      path: '/path/for/proxy(.*)',
      target: 'http://other.proxy.server',
      process: (proxied, matches) => {
        return `${proxied.target}${matches[1]}`,
      },
    }],
  }).fetch;
}

// if __dev__ is true, it will back the data you defined in mock directory
fetch('/api/path', options);
fetch('/api/path', {
  delay: 2000,      // /api/path will delayed after 2000ms. Most of suitation, this won't be used usually.
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'John',
  }),
});
fetch('/api/path/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'John2',
  }),
});

Example Runing

git clone git@github.com:WhatAKitty/react-native-fetch-mock.git
cd react-native-fetch-mock/example/Basic
npm install (attention: don't use yarn while install example dep)
react-native run-ios