npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fetch-mock-fixtures

v2.3.3

Published

Fixtures based mocker for fetch API with BDD style configuration

Downloads

27

Readme

Build Status Coverage Status semantic-release Documentation Greenkeeper badge PRs Welcome

Fetch-mock-fixtures (FMF)

While most of mockers for fetch are only meant to intercept and define the next response content, FMF goes far beyond and offers a wide range of tools for testing js apps.

What is featured :

  • BDD style syntax to configure server and fixtures in a more readable-friendly way. It's heavily inspired by Chai should assertion library,
  • Easy way to configure response on-the-fly, mutating responses from call to call...
  • Enhanced Request native object to automatically parse url details and query content with url-parse,
  • Powerful response presets and fixtures system to avoid writing the same things again and again and ease functional testing,
  • Easy access to the full history or requests/responses handled by the server since its first start or last reset,
  • Parametrized request thanks to path-to-regexp to enable dynamic fixtures routing in a few lines of code
  • and many more !

For instance, with FMF, you can do such things to quickly configure two fixtures in a mocha test (that will obviously succeed) :

import Server from 'fetch-mock-fixtures';

const server = new Server();

describe('Headers test', function() {
  before(() => server.start()) // Start intercepting fetch calls
  after(() => server.stop()) // Restore to normal behavior

  it('should use json headers', async function() {
    server
      .when // or .on
        .header('content-type').equal(/json/) // use a regexp here to avoid writing full header
        .respond.with.preset('200')
      .fallback.to.preset('400')

    let response = await fetch('/', {
      headers: {'content-type': 'application/json'}
    });

    response.status.should.equal(200);
  })
})

How FMF can ease API outgoing requests unit tests ?

FMF enables really quick response configuration that allows testing the outgoing request to set up different responses (see above example). You only have to check a response property (like status) instead of manually parsing request built by your app to validate it.

Furthermore, you can use the before and after hooks or body as a callback to alter response on very precise expectations.

How FMF can ease functional tests ?

In real life, scripts are often sending multiple requests to do their job. FMF removes the pain of handling multiple responses by easing their management. Let's see this example with a two steps authentication login. A bit verbose for what is actually doing but it aims to illustrate things :

import Server from 'fetch-mock-fixtures';

const server = new Server();

// Define on-the-fly fixtures to handle login tests
server
  .verbose(true) // Enable console login for each request/response/error
  .when
      .pathname.equal('/login')
      .method.equal('POST')
      .body('json').equal(body => body.username === 'foo')
    .respond.with
      .preset(401)
  .when
      .pathname.equal('/session')
      .method.equal('POST')
      .body('json').equal(token => body.authToken === '123')
    .respond.with
      .preset('json')
      .body({success: true, sessionToken: '456'})
  .fallback.to
    .preset(403)

describe('Login test suite', function() {
  before(() => server.start())
  after(() => server.stop())

  it('should login', async function() {
    await triggerTheLoginLogic('foo');
    await sendTheTokenLogic('123');
    logged.should.be.true;
  })

  it('should fail login on username', async function() {
    await triggerTheLoginLogic('bar');
    logged.should.be.false;
  })

  it('should fail login on token', async function() {
    await triggerTheLoginLogic('foo');
    await sendTheTokenLogic('hacked!');
    logged.should.be.false;
  })
})

We're not only sending back data to the app but also checking outgoing requests at the same time because the answer will only be sent if calling the right url with the right method and the right data. with and to are only optional sugars to improve human readability.

Last not least, you can easily deploy url-based routing to use your "real" data inside each tests instead of providing fake data and get rid of on-the-fly fixtures (see dynamic fixtures examples).

When to use FMF ?

At any time :smile:

Nevertheless, FMF will truly give its best with any testing framework (Mocha, Jasmine, Junit...) that allows to automate operations between each tests like start, stop or reset the server.

Installation

Installation can easily be done through NPM or Yarn. Sinon is required by FMF to stub fetch but is not included in the bundle. It must be installed as well if not already present.

npm install sinon fetch-mock-fixtures --save-dev

yarn add sinon fetch-mock-fixtures --dev

FMF should be installed as a dev dependency. It is not meant to be used as an in-app offline mode feature.

Note : FMF is built upon Promise, Proxy and fetch API (Request, Headers, Response) that are available in all modern browsers. If you intend to run tests on older browsers (IE) or versions, you may need to polyfill them. Here's some available tools you can use :

Full documentation and API reference

Please pay visit to the docs pages.

Bugs and improvements

Any bugs and issues can be filed on the github repository.

You are free and very welcome to fork the project and submit any PR to fix or improve FMF.

I'm especially interested for good will who wish to improve query matcher processors to provide more tools to evaluate query and choose the right response.

Changelog

  • 2.2.0 : Add global preset configuration within server instance and throw behavior for fixture
  • 2.1.0 : Add history logging and verbose mode
  • 2.0.0 : BREAKING CHANGE - A brand new FMF highly not compatible with previous version
  • 1.0.1 : Add requests history and possibility to set up different responses based on requests order. Add delay as a response parameter into fixture.