I want to test AJAX methods (vanilla XHR) and I can\'t find the way to do it with Jest framework. I found mock-ajax.js
for Jasmine, the problem
As mentioned you don't need additional libraries:
// mocks.js is where you could put your mocks (example below)
const mocks = require('./mocks.js')
test('XHR test', () => {
let xhrMock = {
open: jest.fn(),
setRequestHeader: jest.fn(),
onreadystatechange: jest.fn(),
send: jest.fn(),
readyState: 4,
responseText: JSON.stringify(mocks),
status: 200
}
window.XMLHttpRequest = jest.fn(() => xhrMock)
sendData().then((response) => {
// You could do you checks here. Some examples:
expect(xhrMock.setRequestHeader).toBeCalledWith('Cache-Control', 'no-cache')
expect(xhrMock.open).toBeCalledWith('POST', 'you_api_url.com/end_point/')
expect(xhrMock.withCredentials).toBe(false)
let formData = new FormData()
formData.append('firstParam', 'firstParamValue')
expect(yoloRequestMock.send).toBeCalledWith(formData)
expect(JSON.stringify(response)).toBe(JSON.stringify(mocks))
})
// when onload is called, resolve and reject has been initialed.
xhrMock.onreadystatechange()
// the following function is the one which sends the request (to be tested)
function sendData() {
return new Promise(function(resolve, reject) {
let formData = new FormData()
formData.append('firstParam', 'firstParamValue')
let xhr = new XMLHttpRequest()
xhr.withCredentials = false
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if(xhr.status === 200) {
resolve(JSON.parse(xhr.responseText))
} else {
reject(xhr.responseText)
}
}
}
xhr.open('POST', T2S_VISUAL_SEARCH_PARAMS.t2sVisualSeacchApiUrl)
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.send(formData)
})
}
}
The file mocks.js
contains the mocks:
module.exports =
{
response: {
body: { ... }
}
}