fetch-vcr
Stop mocking HTTP Requests. Just record and then play them back. See vcr/vcr for the main idea.
Usage
After setting up (see below), the basics are:
- set the
VCR_MODE=cache
environment variable before running your tests - run your tests
This will record (and load) all the HTTP responses into the ./_fixtures/
directory.
And when you run the steps again, viola! no network traffic happens.
What are the different modes?
playback
: (default) only uses the local fixture filescache
: tries to use the recorded response and if not found then it is fetched and then saved (useful when adding new tests)record
: forces HTTP requests and responses are saved to the filesystem (useful for regenerating all the fixtures)
How can I set the VCR mode?
You can set the mode either by:
- setting the
VCR_MODE=record
environment variable when running tests (NodeJS) - explicitly running
fetch.configure({mode: 'record'})
(NodeJS or browser)
How do I set this up?
There are separate examples for NodeJS, Jest, and in a browser (PhantomJS or Selenium)
NodeJS Setup
Here is how you would use it in a typical NodeJS app:
import fetch from 'fetch-vcr';
fetch.configure({
fixturePath: './_fixtures',
})
fetch('http://openstax.org')
.then(response => {
console.log(response.ok)
})
Jest Setup
Just add the following to package.json
:
"jest": {
"moduleNameMapper": {
"fetch": "fetch-vcr"
}
}
jsdom Setup
Many apps use jsdom
for testing which makes it really easy to add fetch-vcr
. 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')
fetchVCR.configure({
fixturePath: './_fixtures/'
})
var dom = new jsdom.JSDOM(fs.readFileSync('./jsdom-example.html'), {
runScripts: 'dangerously',
beforeParse: (window) => {
window.fetch = fetchVCR
}
})
How can I use this in a browser?
It is easy to 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 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(...)
)