Axios mock for Vitest
npm install vitest-mock-axiosHowever, if you look at the source code, you can see that it uses Vitest only to define spies (for methods post, get, put, patch, delete, create, all, head, options, request). This means that it can easily be modified to use any other testing framework - go to GitHub, clone it, modify it, play with it :)
responserequestInfosilentModecriteriaresponsesilentModeerrrequestInfosilentModecriteriaurlregexUrloptslastReqGet and lastPromiseGet methodsawait and asyncnpm i --save-dev vitest-mock-axios
Next you need to setup a module Vitest mock for Axios (we'll explain why a bit later):
* create __mocks__ directory in your project root (or whatever is configured in the roots config in vite.config.js - when using react-scripts this is src/__mocks__)
* inside this new directory create a files named axios.js
* copy & paste the following snippets to axios.js file
``javascript`
// ./__mocks__/axios.js
import mockAxios from 'vitest-mock-axios';
export default mockAxios;
⚠️ In v4.6.0 this module is inadvertently a pure ES module (#83). Please use v4.5.0 or v4.6.1 if you encounter any problems for now.
subdirectory.Basic example
Let's consider that we want to test a component which uses Axios. This component returns a promise, which will be resolved after Axios is done communicating with the server.Here's a Jest snippet, which explains how we would test this component:
`javascript
// ./test/UppercaseProxy.spec.js
import mockAxios from 'vitest-mock-axios';
import UppercaseProxy from '../src/UppercaseProxy';afterEach(() => {
// cleaning up the mess left behind the previous test
mockAxios.reset();
});
it('UppercaseProxy should get data from the server and convert it to UPPERCASE', () => {
let catchFn = vi.fn(),
thenFn = vi.fn();
// using the component, which should make a server response
let clientMessage = 'client is saying hello!';
UppercaseProxy(clientMessage)
.then(thenFn)
.catch(catchFn);
// since
post method is a spy, we can check if the server request was correct
// a) the correct method was used (post)
// b) went to the correct web service URL ('/web-service-url/')
// c) if the payload was correct ('client is saying hello!')
expect(mockAxios.post).toHaveBeenCalledWith('/web-service-url/', {data: clientMessage }); // simulating a server response
let responseObj = { data: 'server says hello!' };
mockAxios.mockResponse(responseObj);
// checking the
then spy has been called and if the
// response from the server was converted to upper case
expect(thenFn).toHaveBeenCalledWith('SERVER SAYS HELLO!'); // catch should not have been called
expect(catchFn).not.toHaveBeenCalled();
});
`To make this example complete and easier to understand, let's have a look at a (verbose) implementation of component we are testing:
javascript
// ./src/UppercaseProxy.js
import axios from 'axios';const UppercaseProxy = (clientMessage) => {
// requesting data from server
let axiosPromise = axios.post('/web-service-url/', { data: clientMessage });
// converting server response to upper case
axiosPromise = axiosPromise.then(serverData => serverData.data.toUpperCase());
// returning promise so that client code can attach
then and catch handler
return(axiosPromise);
};export default UppercaseProxy;
`At the bottom of this page you can find additional examples.
Axios mock API
In addition to standard Axios methods (, get, put, patch, delete, create, all, head, options, request, axios(url)), which are exposed as spies, Axios mock has additional public methods, which are intended to facilitate mocking:
* mockResponse - simulates a server (web service) response
* mockError - simulates a (network/server) error
* lastReqGet - returns extended info about the most recent request
* getReqMatching - returns extended info about the most recent request matching the given criteria (url, method and params)
* getReqByMatchUrl - returns extended info about the most recent request matching the given regexUrl.
* getReqByRegex - returns extended info about the most recent request matching the given keys and regexUrls.
* queue - returns a queue with all requests received.
* lastPromiseGet - returns promise created when the most recent request was made
* reset - resets the Axios mock object - prepare it for the next test (typically used in afterEach)Note:
all is just an alias to Promise.all (as it is in axios). Thus you can use it with mockResponse, but you can still retrieve statistics for it. Mock the requests used in all instead.axios.mockResponse(response[, requestInfo[, silentMode]])
After a request has been made to the server (web service), this method resolves that request by simulating a server response. Status meaning is ignored, i.e. 400 will still resolve axios promise. Use mockError for non-2xx responses.
NOTE: This method should be called _after_ the axios call in your test for the promise to resolve properly.$3
The first argument of this method is the a response object returned by the server, with a structure illustrated by the snippet below. All the properties are optional, meaning that if a property is ommitted it will be replaced by a default value (defaults are shown in the snippet).
`javascript
response = {
data: {},
status: 200,
statusText: 'OK',
headers: {},
config: {},
}
`
The given response object will get passed to even handler function.$3
The second argument enables us to pinpoint an exact server request we wish to resolve. This can be useful if we're making multiple server requests and are planing to resolve them in a different order from the one in which they were made.We supply two different objects:
* an extended request info object, which can be accessed by calling
lastReqGet method
* a promise object, which can be accessed by calling the lastPromiseGet methodIf ommited this argument defaults to the latest request made (internally the
lastReqGet method is called).At the end of this document you can find an example which demonstrates how this parameter can be used.
$3
Both mockResponse and mockError will throw an error if you're trying to respond to no request, as this usually means you're doing something wrong.
You can change this behavior by passing true as third argument, activating the so-called silentMode. With silentMode activated, the methods will just do nothing.axios.mockResponseFor(criteria, response[, silentMode])
This behaves very similar to mockResponse, but you explicitly specify the request you want to respond to by
specifying an object containing url and/or method, or just a plain string (to match by URL only).Example:
`js
mockAxios.mockResponseFor({url: '/get'}, {data: "test"});
`$3
An object or string (the url) specifying which request to match. Currently
and method are supported for the object. If both url and method are passed, it only responds to requests matching both. If multiple requests match against the criteria, the most recent one is responded to.$3
The second argument is a response object, which works the same way as described part about the mockResponse method.$3
The third argument is the silentMode flag, which works the same way as described part about the mockResponse method.axios.mockError(err[, requestInfo])
This method simulates an error while making a server request (network error, server error, etc ...).
NOTE: This method should be called _after_ the axios call in your test for the promise to resolve properly.$3
Error object will get passed to catch event handler function. If omitted it defaults to an empty object.$3
The second argument is a requestInfo object, which works the same way as described part about the mockResponse method.$3
The third argument is the silentMode flag, which works the same way as described part about the mockResponse method.axios.lastReqGet()
lastReqGet method returns extended info about the most recent request. The returned value can be used to pinpoint exact server request we wish to resolve (the value is passed as the second param of mockResponse or mockError methods).The returned info contains all the data relevant to the request. It has the following structure (an example):
`javascriptlet requestInfo = {
// promise created while
promise: SimplePromise,
// URL passed to the get/post/head/delete method
url: "https://github.com/",
// data which was pased to the get/post/head/delete method
data: { text: "this is payload sent to the server" },
// config which was pased to the get/post/head/delete method
config: {
... something ...
}
}
`Additional examples at the end of this document illustrate how this method can be used.
NOTE: this is a sibling method to the
(which returns only the promise portion of this the request object).If no request has been made yet, returns
undefined.axios.getReqMatching(criteria)
getReqMatching() returns the same info about a specific request as lastReqGet (see above). Instead of returning
the most recent request, it returns the most recent request matching the given criteria or undefined if no such request could be found.$3
An object specifying which request to match. Currently url, method and params are supported.axios.getReqByUrl(url)
getReqByUrl() returns the same info about a specific request as lastReqGet (see above). Instead of returning the
most recent request, it returns the most recent request matching the given url or undefined if no such request could be found.$3
The url to be matched. Must match exactly the url passed to axios before.axios.getReqByMatchUrl(regexUrl)
getReqByMatchUrl() returns the same info about a specific request as lastReqGet (see above). Instead of returning the
most recent request, it returns the most recent request with a url that matches the given regexUrl or undefined if no such request could be found.$3
The regexUrl matcher. Must contain a Regex object RegExp(/.../).$3
`ts
const req = mockAxios.getReqByMatchUrl(/resource\/\d+\/create/)
mockAxios.mockResponse({ data: { id: 1 } }, req)
`axios.getReqByRegex(opts)
returns the same info about a specific request as getReqByMatchUrl() (see above). Instead of matching only the url against a RegexUrls, it's possible to match any keys against RegexUrls.It returns the most recent request with key(s) that match(es) the given RegexUrl(s) or
undefined if no such request could be found.$3
The keys + regexes matchers.
Must contain pairs of keys and a Regex objects
RegExp(/.../) to be tested against the requests.`rb
{ key_a: RegExp_a, ..., key_n: RegExp_n }
`$3
*
that matches /batch/
ts
const request = mockAxios.getReqByRegex({ url: /batch/ })
`*
that matches /employees/
ts
const request = mockAxios.getReqByRegex({ data: /employees/ })
`*
that matches /my_config/
ts
const request = mockAxios.getReqByRegex({ config: /my_config/ })
`*
that matches /delete/
ts
const request = mockAxios.getReqByRegex({ method: /delete/ })
`*
that matches /batch/ and data that matches /employees/> multiple keys is supported ✔️
ts
const request = mockAxios.getReqByRegex({ url: /batch/, data: /employees/ })
`axios.lastPromiseGet()
method returns a promise given when the most recent server request was made. The returned value can be used to pinpoint exact server request we wish to resolve (the value is passed as the second param of mockResponse or mockError methods).The promise object returned by this function corresponds to the one returned by
post, get, put, patch, delete, head, options, request or all method inside the code we wish to test.
Additional examples at the end of this document illustrate how this method can be used.
NOTE: This is a sibling method to the
lastReqGet, which in addition to promise returns object containing extended info about the request.axios.reset()
reset method clears state of the Axios mock to initial values. It should be called after each test, so that we can start fresh with our next test (i.e. from afterEach method).Additional examples
Since AxiosMock is relatively simple, most of its functionality was covered in basic example at the beginning of this document. In this section we'll explore features not covered by that initial example.Values returned by
lastReqGet and lastPromiseGet methodsThe following example illustrates the meaning of the values returned by
lastReqGet and lastPromiseGet methods.The first snippet shows a component which will be tested. The component makes a
post request to the server and stores the promise returned by Axios.`javascript
// ./src/MyComponent.js
import axios from '../lib/index';class MyComponent {
CallServer () {
// making a
post request and storing the given promise
this.axiosPromise = axios.post('/web-service-url/', { data: clientMessage });
}
}export default MyComponent;
`
In our spec file we will compare promise stored inside the with values returned by lastReqGet and lastPromiseGet methods:`javascript
// ./test/MyComponent.spec.js
import MyComponent from '../src/SomeSourceFile'; let myComp = new MyComponent();
myComp.CallServer();
// getting the extended info about the most recent request
let lastReqInfo = MockAxios.lastReqGet();
// getting the promise made when the most recent request was made
let lastPromise = MockAxios.lastPromiseGet();
// the following expression will write
true to the console
// > here we compare promise stored in the MyComponent to the one
// returned by the lastPromiseGet method
console.log(myComp.axiosPromise === lastPromise); // the following expression will also write
true to the console
// > here we compare promise stored in the MyComponent
// to the one in the request info, which was returned by the
// method
console.log(myComp.axiosPromise === lastReqInfo.promise); // the following will also write "true" to console,
// since it't the same object
console.log(lastPromise === lastReqInfo.promise);
`Resolving requests out of order
In the following example we'll have a look at how to resolve requests at desired order by using method.In this example we'll create two consecutive requests before simulating a server response to the first one.
`javascript
it('when resolving a request an appropriate handler should be called', () => { let thenFn1 = vi.fn(),
thenFn2 = vi.fn();
// creating the FIRST server request
UppercaseProxy('client is saying hello!').then(thenFn1);
// storing the request info - we'll need it later to pinpoint the request
let firstRequestInfo = mockAxios.lastReqGet();
// creating the SECOND server request
// BEFORE the first had chance to be resolved
UppercaseProxy('client says bye bye!').then(thenFn2);
// Simulating a server response to the FIRST request
// -> we're using request info object to pinpoint the request
// ... IF the info object is ommited, the method would automatically
// resolve to the newest request from the internal queue (the SECOND one)
mockAxios.mockResponse({ data: 'server says hello!' }, firstRequestInfo);
// only the first handler should have been called
expect(thenFn1).toHaveBeenCalled();
expect(thenFn2).not.toHaveBeenCalled();
// Simulating a server response to the SECOND request
// NOTE: here we don't need to provide the request info,
// since there is only one unresolved request left
// ->
mockResponse resolves the last request in the
// queue if request info is ommited
mockAxios.mockResponse({ data: 'server says bye bye!' }); // the first
then handles should be called only once
expect(thenFn1).toHaveBeenCalledTimes(1);
// now the second then handler should be called
expect(thenFn2).toHaveBeenCalled();
});
`
Although this might not be the most realistic use-case of this functionality, it does illustrate how method can be used to alter the default behaviour of the mockResponse method.lastPromiseGet method. These two methods perform a similar task, as described in the corresponding documentation.Using
await and asyncYou can also use this library with
and async. Given the following async function (same as above):
`js
const UppercaseProxy = async (clientMessage) => {
const serverData = await axios.post("/web-service-url/", { data: clientMessage }); return serverData.data.toUpperCase();
};
`The function can be tested like this (basically the same idea as in the first example at the top):
js
it("UppercaseProxy should get data from the server and convert it to UPPERCASE", async () => {
const clientMessage = "client is saying hello!"; const promise = UppercaseProxy(clientMessage);
expect(mockAxios.post).toHaveBeenCalledWith("/web-service-url/", {
data: clientMessage,
});
// simulating a server response
const responseObj = { data: "server says hello!" };
mockAxios.mockResponse(responseObj);
const result = await promise;
expect(result).toEqual("SERVER SAYS HELLO!")
});
`Interceptors
AxiosMock offers basic support for interceptors (i.e. it does not break when interceptors are used in tested code).
Cancelling requests
has basic support for cancelling requests as in axios. Please note that you will get an error if you try to mock a response for a request after it has been cancelled. Please refer to the provided test case for further usage details.Missing features
AxiosMock covers the most popular parts of Axios API, meaning that some of the features are missing or only partially implemented (i.e. interceptors).If you need an additional feature, you can request it by creating a new issue on project's GitHub page.
Also you are welcome to implement the missing feature yourself and make a pull request :)
Synchronous promise
The magic which enables axios mock to work synchronously is hidden away in synchronous-promise`, which enables promises to be settled in synchronous manner.