Yet-Another-Fetch-Mock

Installation

npm install yet-another-fetch-mock --save-dev

Setup

const loggingMiddleware: Middleware = (request, response) => {
  console.log('response', response);
  return response;
}


const mock = FetchMock.configure({
  enableFallback: true, // default: true
  middleware: loggingMiddleware // default: (req, resp) => resp
});


const delayedErrorMock = FetchMock.configure({
  middleware: MiddlewareUtils.combine(
    MiddlewareUtils.delayMiddleware(200),
    MiddlewareUtils.failurerateMiddleware(0.2)
  )
});

Examples

mock.get('/my-url', (req, res, ctx) => res(ctx.json({ key: 'value' }))); // Returns the object as the json-response
mock.post('/another-url', (req, res, ctx) => res(ctx.json({ key: 'result of posting' })));


// Creating dynamic content based on url
mock.put('/api/:id/app', (req, res, ctx) => {
  // `req` contains the original parameters to `fetch`,
  // and in addition: url, http-verb, path parameters and query parameters
  // `res` is used for combining and build your response based on helpers from `ctx`
  return res(
    ctx.json({id: req.pathParams.id, content: 'Some random content'})
  ); 
});


// More advanced route-matching
mock.mock(
  MatcherUtils.combine(
    MatcherUtils.method('HEAD'),
    MatcherUtils.url('/custom-url'),
    // Your custom matcher here
  ),
  (res, req, ctx) => res(
    ctx.delay(1000),
    ctx.json({ data: 'lots of data' })
  )
);

// Combining resultsUtils
mock.get('/test/:id', (req, res, ctx) => res(
  ctx.delay(1000),
  ctx.header('X-My-Header' ,'HeaderValue'),
  ctx.json({ requestId: req.pathParams.id })
));

Teardown

mock.restore();

Usage in tests

The library ships with a custom Middleware that allows for introspection of intercepted fetch-calls.

The spy exposes seven diffrent methods, six (middleware is used for setup) of which can be used to verify that a call has been intercepted. All methods accept an optional argument of the type RouteMatcher which can be created using the MatcherUtils. In cases where you don't send in an RouteMatcher, then a default "match-everything"-matcher is used.

Example

import FetchMock, { MatcherUtils, SpyMiddleware } from 'yet-another-fetch-mock';

describe('test using yet-another-fetch-mock', () => {
  let mock: FetchMock;
  let spy: SpyMiddleware;
  
  beforeEach(() => {
    spy = new SpyMiddleware();
    mock = FetchMock.configure({
      middleware: spy.middleware
    });
    expect(spy.size()).toBe(0);
  });
  
  afterEach(() => {
    mock.restore();
  });
  
  it('should capture calls', (done) => {
      mock.get('/test/:id', (req, res, ctx) => res(ctx.json({ data: 'test' })));
      Promise.all([
        fetch('/test/121'),
        fetch('/test/122')
      ])
        .then(() => {
          expect(spy.size()).toBe(2);
          expect(spy.lastCall()).not.toBeNull();
          expect(spy.lastUrl()).toBe('/test/122');
          expect(spy.called(MatcherUtils.url('/test/:id'))).toBe(true);
          done();
        })
    });
});

Typescript

Full documentation of types can be seen here, or here if you prefer reading typescript code.

Tips

It is recommended to toggle the fetch-mock functionality behind an environment variable, as to allow uglify/envify (or similar) to remove the code for production builds.

As an example;

if (process.env.USE_MOCK_SETUP === 'true') {
  require('./mocks')
}

Credits

Made using the awesome typescript library starter