I'm trying to test this simple api module:
import fetch from 'isomorphic-fetch';
export const getJson = (endpoint: string) => {
const options = { credentials: 'include', method: 'GET' };
return fetch(endpoint, options)
.then(response => response.json()
.then(json => {
if (response.ok) return json;
return Promise.reject(json.errors);
})
)
.catch(error => {
if (error.constructor === Array) return error;
return [error.message];
});
};
With this test, where I'm mocking fetch:
import { getJson } from '../api';
const mockResponse = (status, statusText, response) => {
return new window.Response(response, {
status: status,
statusText: statusText,
headers: {
'Content-type': 'application/json'
}
});
};
describe('api middleware', () => {
describe('getJson', () => {
it('should return the response on success', () => {
const expected = { data: ['data'], meta: {} };
const body = JSON.stringify(expected);
window.fetch = jest.fn().mockImplementation(() =>
Promise.resolve(mockResponse(200, null, body)));
return getJson('http://endpoint').then(actual => expect(actual).toEqual(expected));
});
});
});
But the test fails with:
Expected value to equal:
{"data": ["data"], "meta": {}}
Received:
["Unexpected end of JSON input"]
Difference:
Comparing two different types of values:
Expected: object
Received: array
I've not been able to figure out why this isn't working. Why am I receiving the "Unexpected end of JSON input" error? And how do I successfully mock fetch locally in a test? In this medium post it's done in basically the same way..
So apparently the test was still using the global fetch library, and not my patched version. The solution was to:
Remove the 'isomorphic-fetch' mock (in __mocks__ at the root of the project).
Import 'isomorphic-fetch' once at the root of my project with import 'isomorphic-fetch;
Remove the 'isomorphic-fetch' import at the top of my api module (since it's already imported at the entrypoint
Update the test to:
test:
// to make the Response constructor available
import 'isomorphic-fetch';
import { getJson } from '../api';
describe('api middleware', () => {
describe('getJson', () => {
beforeEach(() => {
window.fetch = jest.genMockFunction();
});
it('should return the response on success', () => {
const expected = { data: ['data'], meta: {} };
const body = JSON.stringify(expected);
const init = { status: 200, statusText: 'OK' };
window.fetch.mockReturnValueOnce(Promise.resolve(new Response(body, init)));
return getJson('http://endpoint').then(actual => expect(actual).toEqual(expected));
});
});
});
Most probably because your getJson function does not use the global (window) fetch.
The way I would suggest doing it is to use Dependency Injection (DI); make getJson retrieve the the "http request" library/function (in your case fetch) and in your tests, create a mock function which is injected. The mock function will return the data that you want as part of testing.
Related
I wrote a response with an axios interceptors and send the return value of this response to a js file named handleResponse. This js file takes the return value and returns a result to me. If I get an error, I have it drop to reject.
const instance = axios.create({
baseURL:
apiName === ""
? process.env.VUE_APP_API_URL
: process.env.VUE_APP_API_URL + apiName,
withCredentials: false,
headers: headers
});
instance.interceptors.response.use(
(response) => handleResponse(response),
(error) => console.log(error)
);
My handleResponse js file inside interceptors is as follows
export const handleResponse = (response) => {
return new Promise((resolve) => {
if (response.data["Success"]) resolve(response.data["Payload"]);
else {
let msg = "";
if (response.data["Information"]) msg = response.data["Information"];
showError(msg);
reject(response);
}
});
};
Here I make it fall into catch where I call the api when it drops to the reject operation.
const cancelStorageTransfer = () => {
return StorageTransferRequestService.cancelStorageTransfer(selectedStorageTransfer.value.Id)
.then(() => {
showSuccess("Transfer İptal İşlemi Başarıyla Gerçekleşti")
storageTransferRequestSummary()
}).catch(response => {
showError(response.data.Information)
})
}
I call the api here, but I don't want to use the catch. But when I don't use it, I get "Uncauth(in promise)" error on the log screen.
Here how can I do whether to use the catch at my own will?
I'm having a hard time finding info on how to test this function:
const MyService = {
async stringify (entry, cb) {
try {
const response = await axios.post('localhost:3005/stringify', {
entry
})
cb(null, response.data)
} catch (minificationError) {
if (minificationError.response.status === 500) {
cb('error 1', null)
} else {
cb('error 2', null)
}
}
}
}
I understand I can import axios and mock the .post like this:
axios.post.mockResolvedValue({
data: { some: 'value' }
})
That'd work great if I the MyService was returning the promise... but how do I deal with the callback? Is this a bad practice and should the service be returning the promise and then handle errors in the component functions instead?
Additionally, how would I mock a status code with jest (to test the failed states?)
First, you have to set up mock axios after that you have to call your mockapi's in your test case
const axios = {
post: jest.fn(() => {
return Promise.resolve({
data: {},
});
}),
create: () => axios,
request: {},
defaults: {
adapter: {},
headers: {},
},
interceptors: {
request: {
use() {},
},
response: {
use() {},
},
},
};
Once you setup mock axios then you can access in your test case and return whatever mock response and status code you want.
mockAxios.post.mockImplementation((url) => {
if (url.includes("something")) {
return Promise.resolve({ data:{"response":""}, status: 200 });
}
return Promise.reject(new Error("not found"));
});
I have a function, as below, that performs 2 fetch calls within the same function
getNames() {
var qs = require("qs");
fetch(<URL>,
{
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
body: qs.stringify({
firstName: this.state.firstName,
lastName: this.state.lastName
})
})
.then(response => response.json()).then((data) => {
console.log(data)
});
var url = new URL(<someURL>)
fetch(<someURL>).then(response => response.json()).then((data) => {
...do something...
}
})
.catch(error => {
alert("no response");
console.log(error);
});
}
I am testing this using Jest and Enzyme on React. The above belongs to the GetName component. Below is my test case:
describe('getName', () => {
const wrapper = shallow(<GetName />).instance();
beforeEach(() => {
global.fetch.resetMocks();
});
it('positive flow', () => {
global.fetch.mockResolvedValue(
new Response(JSON.stringify({data: "mockData"}))
);
const state = {
firstName: "don",
lastName: "Lee"
};
wrapper.setState(state);
const actualValue = wrapper.getNames();
expect(actualValue).toBeUndefined();
});
});
Once I do this, I get an error that TypeError: body used already for: undefined
I understand that the fetch here is being used for the POST call, but how do I make sure that I can mock both the fetch calls within the function?
I have also tried fetch.mockResponse and fetch.mockResponses and also fetch.mockResponseOnce. None of them seem to help me mock them more than once and I get this error with all functions mentioned.
Is there any other way to mock both the fetch calls?
I am using axios mock adapter to mock HTTP request to test my function. After I defined the behaviour for the function, and then I created an instance of the class to call the function, the result is
**Promise { <pending> }**,
what is the problem? how can I return the value I defined?
Here is my code:
UserService.js
export default class UserService {
getUserInfo = userId => {
const params = {
userId,
};
return axios
.get('https://www.usefortesting.com', {
params: { userId: params },
})
.then(response => response.data.userInfo)
.catch(error => error);
};
}
UserService.test.js
import React from 'react';
import axios from 'axios';
import UserService from './UserService';
import MockAdapter from 'axios-mock-adapter';
describe('testing', () => {
let axiosMock;
const Info = {
userInfo: {
id: '123',
name: 'omg',
},
};
beforeEach(function() {
axiosMock = new MockAdapter(axios);
});
afterEach(() => {
axiosMock.reset();
axiosMock.restore();
});
it('testing', () => {
axiosMock
.onGet('https://www.usefortesting.com', {
params: { userId: 'user_1' },
})
.reply(200, Info);
let userService = new UserService();
let response = userService.getUserInfo('user_1');
console.log(response);
});
});
You need to await for response in your test. Either use callbacks or async/await as shown below.
Your test should be like this:
it('testing', async () => { // notice async here
axiosMock
.onGet('https://www.usefortesting.com', {
params: { userId: 'user_1' },
})
.reply(200, Info);
let userService = new UserService();
let response = await userService.getUserInfo('user_1'); // notice await here
console.log(response);
});
OR
it('testing', () => {
...
userService.getUserInfo('user_1').then(response => {
console.log(response);
});
});
You can check this link on jest docs for more examples.
Also there is error in your getUserInfo() method, in params you are passing an object for userId but you need to pass string or int. What you should do is:
return axios.get('https://www.usefortesting.com', {
params: { userId: params.userId },
})...
OR
return axios.get('https://www.usefortesting.com', {
params,
})...
Hi guys I'm having troubles to test an async function with a fetch to a server inside. I'm using mocha with chai-as-promised. The test that is failing is: 'return proper title' I guess I would have to mock the fetch call or something, or maybe the problem is that I'm calling an async function, and as I'm executing a unit test and I don't resolve the promise. I'm not pretty sure how to achieve that. Could you help me?
The function to test is:
import React from 'react'
import Technologies from './Technologies'
import fetch from '../../core/fetch'
let title= 'Technologies'
export default {
path: '/technologies',
async action () {
const resp = await fetch('/graphql', {
method: 'post',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: '{technologies{name,icon,url}}',
}),
credentials: 'include',
})
let { data, } = await resp.json()
if (!data || !data.technologies) throw new Error('Failed to load technologies.')
return {
title:title,
component: <Technologies title={title} technologies={data.technologies} />,
}
},
}
And my tests:
describe('Route', () => {
it('has right path', () => {
expect(Route.path === '/technologies').to.be.true
})
it('return proper title', () => {
const title = 'Technologies'
expect(Route.action().title === title).to.be.true
})
})
try with:
describe('Route', () => {
it('has right path', () => {
return expect(Route.path === '/technologies').to.be.true
})
it('return proper title', () => {
const title = 'Technologies'
return expect(Route.action().title === title).to.be.true
})
})
The first strategy suggested in the mocha documentation is using the ‘done’ callback. This is an extra argument to the callback in the it . You call it after the last assertion in your test.
for example, for your test you have forget to return the function in expect :
describe('Route', () => {
it('has right path', (done) => {
return expect(Route.path === '/technologies').to.be.true
done();
})
it('return proper title', (done) => {
const title = 'Technologies'
return expect(Route.action().title === title).to.be.true
done();
})
})