The first fetch/XMLHttpRequest network-mocking library that's actually user-friendly
This update adds the much-desired ability to customize the properties of your mocked responses! Includes everything from HTTP headers to fields in the XMLHttpRequest
/fetch Response
objects themselves.
Simply add your desired fields in the new responseProperties
object, and they will permeate through both XHR/response objects.
For example:
const myUrl = '/my/url';
MockRequests.setDynamicMockUrlResponse(myUrl, {
response: { error: 'You must input a valid email address' },
responseProperties: {
ok: false,
headers: {
status: 400,
},
},
});
const res = await fetch(myUrl, { ...options });
console.log(res.ok); // false
console.log(res.headers.get('status')); // 400
response.clone()
FunctionThis also adds support for (await fetch(...)).clone()
to ensure all your source/test code using the .clone()
function works as expected.
Instead of manually changing your webpack.config.js configuration fields with the previous resolveMocks()
, now you can simply plug-and-play using the bundled mock-requests/bin/MockRequestsWebpackPlugin
. For example:
const MockRequestsWebpackPlugin = require('mock-requests/bin/MockRequestsWebpackPlugin');
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
include: /src/,
loader: 'babel-loader'
},
// ...
},
entry: {
client: [ 'core-js', 'isomorphic-fetch', './src/index.js' ],
vendor: [ 'react', 'react-dom', 'prop-types' ]
},
plugins: [
new MockRequestsWebpackPlugin(
'mocks', // directory containing mock files
'MockConfig.js', // entry point for mock-requests configuration, resides within the `mocks/` directory
process.env.MOCK === 'true', // boolean to (de-)activate mocks, can be whatever you want
// options, if applicable
)
]
};
More options and usage examples can be seen in the ReadMe.
MockRequests now includes enhanced IDE autocompletion and JSDoc descriptions. While seemingly trivial on the surface, this dramatically enhances the development experience by offering suggestions, descriptions, and types for all fields.
This release includes 2 major improvements, including:
entry
and/or module.rules[jsEntry].include
fields much easier. Just specify the mock folder, the mock entry file, and a boolean determining if mocks are active or not, and the script automatically resolves the respective paths, e.g.
const resolveMocks = require('mock-requests/bin/resolve-mocks');
const resolvedMocks = resolveMocks('mocks', 'mocks/MockConfig.js', process.env.MOCK === 'true');
module.exports = {
entry: [ '@babel/polyfill', './src/index.js', ...resolvedMocks.entry ],
...
module.rules[jsEntry].include: [ /src/, ...resolvedMocks.include ],
}
Read more in the ReadMe.dynamicResponseModFn
! Now, your dynamic response functions can run async code before returning the desired response. This means you can, e.g. call MockRequests.originalFetch()
within your dynamicResponseModFn
if the response isn't mocked or if you want to generate a mock using a different endpiont. See an example of this in MockRequests/demo/mocks/DynamicResponses.js.This release includes minor usability improvements including:
fetch(new Request(url, options))
.default
and named fields are exported, so both import MockRequests from 'mock-requests';
and import { configure } from 'mock-requests';
work equally well.MockRequests
installation/usage but were still important for the case where users clone the repo directly.This release includes new features, including:
dynamicResponseModFn(request, response, queryParamMap)
. This also includes content passed in the URL hash, stored in the queryParamMap.hash
field.dynamicResponseModFn()
function can generate different responses based on the query parameter values. For example, the dynamic modification function for example.com/search
can handle all queries passed to example.com/search?q=[searchQuery]
. Simply set the MockResponseConfig.usePathnameForAllQueries
to true
to activate this feature.mapStaticConfigToDynamic(staticConfig)
, to easily convert your static URL-response mock configurations to their dynamic counterparts. See the ReadMe/demo for sample usages.Previously the license was specified but not included in the build output. This release includes said license file.
This release includes:
mock-requests/dist/MockRequests.js
. This is now fixed to resolve mock-requests
instead.This update includes:
New feature: you can now pass in a delay
field in your dynamic response configuration to delay the resolution of mock responses by that many milliseconds.
RequestMock
to MockRequests
to match npm package name
import RequestMock from 'mock-requests';
. You can leave it or update it as you wishdynamicRequestModFn
if possibleresponse
entries in configureDynamicResponses()