fetch-vcr

fetch-vcr

Stop mocking HTTP Requests. Just record and then play them back. See vcr/vcr for the main idea.

Usage

The basics are:

1. turn on cache mode
2. run your tests

This will record (and load) all the HTTP responses into the ./_fixtures/ directory.

And when you run the steps again, no network traffic happens.

How do I set this up?

// import fetch from 'fetch';
import fetch from 'fetch-vcr';

// Configure what mode this VCR is in (playback, recording, cache)
// and where the recordings should be loaded/saved to.
fetch.configure({
  mode: 'record',
  fixturePath: __dirname + '/_fixtures'
})

fetch('http://openstax.org')
.then(response => {
  response.text()
  .then(text => {
    console.log(text)
  })
})

What are the different modes?

• playback: (default) only uses the local fixture files
• cache: tries to use the fixture and if not found then it is fetched and then saved (useful when adding new tests)
• record: forces files to be written (useful for regenerating all the fixtures)
• erase: deletes the fixture corresponding to the request

How can I set the VCR mode?

You can set the mode either by:

• setting the VCR_MODE=record environment variable
• explicitly running fetch.configure({mode: 'record'})

How can I use this in a browser?

Currently you can record HTTP requests in NodeJS and play them back in the browser.

To play them back in a browser, just run fetchVCR.configure({fixturePath: './path/to/_fixtures'}) and fetchVCR will use that path to load the files via AJAX requests.

To record HTTP requests in a browser you will need to do a little bit of work. Loading fixture files is relatively painless (using XMLHTTPRequest) but saving them to disk is non-trivial.

In order to save the fixture files to disk you will need to override fetchVCR.saveFile(rootPath, filename, contents) => Promise.

If you are using PhantomJS then you will likely need to use the alert(msg) to get data out of PhantomJS and then save it to the filesystem (using fs.writeFile(...))

Using jsdom (like Jest)

Jest runs using jsdom which makes it really easy to add fetchVCR. Basically, just replace the global fetch function with fetchVCR and you can record/play back the cassettes. See below for an example:

var fs = require('fs')
var jsdom = require('jsdom')
var fetchVCR = require('fetch-vcr')
var JSDOM = jsdom.JSDOM

// Configure the fetchVCR to record
fetchVCR.configure({
  fixturePath: './_fixtures/',
  mode: 'cache'
})

var dom = new JSDOM(fs.readFileSync('./jsdom-example.html'), {
  runScripts: 'dangerously',
  beforeParse: (window) => {
    window.fetch = fetchVCR
  }
})