Extend the ability for suchjs with Such.mock in browser, intercept the reqeust made by XMLHttpRequest or fetch API, response a mock data instead.
See the document: Suchjs mock
Method 1: use with npm package
# use npm/yarn/pnpm
npm install --save suchjs such-mock-browser jqueryimport "suchjs/lib/browser";
import Such from 'such-mock-browser';
import $ from 'jquery';
const globalSuch = Such.default;
const { mock } = globalSuch;
const { target, method } = mock;
// intercept both the XMLHttpRequest and fetch API
const interceptor = mock.intercept(target.XHR | target.FETCH, {
// set timeout between 1000ms to 5000ms
timeout: [1000, 5000]
});
mock('/a', method.GET, {
a: ':string'
});
mock('/g', 'GET', function(req){
return globalSuch.as({
'fetch{1,3}': ':string'
});
}, {
// set this request's timeout as 3000ms
timeout: 3000
});
// xhr
$.post('/a', function(res){
console.log(res); // will output something like this { a: "dkDo23k"}
});
// fetch
window.fetch('/g', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
}).then((res) => res.json()).then((data) => {
console.log(data);
});Method 2: use with scripts
<script src="https://cdn.jsdelivr.net/gh/suchjs/such@master/dist/such.min.js"></script>
<script src="./such-mock-browser.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
const globalSuch = Such.default;
const { mock } = globalSuch;
const { target, method } = mock;
// ...... same code like the style with npm package
</script>Interceptor: https://github.com/mswjs/interceptors
Pathname match: https://github.com/mswjs/node-match-path