Skip to content

Commit c50c9f4

Browse files
mercedesbmercedesb
committed
handle 204 no content responses
1 parent de8f8aa commit c50c9f4

File tree

3 files changed

+141
-39
lines changed

3 files changed

+141
-39
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-use-fetch-api",
3-
"version": "1.0.4",
3+
"version": "1.0.5",
44
"description": "React hook for making simple JSON API requests using the browser Fetch API",
55
"author": "Mercedes Bernard",
66
"repository": {

‎src/index.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,13 @@ async function fetchData(url, method, data) {
1818
}
1919
return response;
2020
})
21-
.then(response => response.json());
21+
.then(response => {
22+
if (response.status === 204) {
23+
return {};
24+
} else {
25+
return response.json();
26+
}
27+
});
2228

2329
return response;
2430
}

‎test/index.test.js‎

Lines changed: 133 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ let url;
99
let data;
1010
let status;
1111
let ok;
12-
let mockResponse = {};
12+
let mockResponse = { data: "here" };
1313
let mockJsonPromise = Promise.resolve(mockResponse);
1414
let mockFetchPromise;
1515

@@ -56,22 +56,47 @@ describe("useApi", () => {
5656
});
5757

5858
describe("when the response is successful", () => {
59-
it("returns the response as json", done => {
60-
const { get } = useApi();
61-
const response = get(url);
62-
expect(response).toEqual(mockJsonPromise);
59+
describe("when the status code is 204 No Content", () => {
60+
beforeEach(() => {
61+
status = 204;
62+
mockFetchPromise = Promise.resolve({
63+
status: status,
64+
ok: ok,
65+
json: () => Promise.resolve({})
66+
});
67+
68+
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
69+
});
6370

64-
process.nextTick(() => {
65-
global.fetch.mockClear();
66-
done();
71+
it("returns an empty json object", done => {
72+
const { get } = useApi();
73+
const response = get(url);
74+
expect(response).toEqual(Promise.resolve({}));
75+
76+
process.nextTick(() => {
77+
global.fetch.mockClear();
78+
done();
79+
});
80+
});
81+
});
82+
83+
describe("when the status code is any other successful status", () => {
84+
it("returns the response as json", done => {
85+
const { get } = useApi();
86+
const response = get(url);
87+
expect(response).toEqual(mockJsonPromise);
88+
89+
process.nextTick(() => {
90+
global.fetch.mockClear();
91+
done();
92+
});
6793
});
6894
});
6995
});
7096

7197
describe("when the response is not successful", () => {
7298
describe("when the status code is 401 Unauthorized", () => {
7399
beforeEach(() => {
74-
url = "https://jsonplaceholder.typicode.com/todos/1";
75100
status = 401;
76101
ok = false;
77102
mockFetchPromise = Promise.resolve({
@@ -102,7 +127,6 @@ describe("useApi", () => {
102127

103128
describe("when the status code is any other error ", () => {
104129
beforeEach(() => {
105-
url = "https://jsonplaceholder.typicode.com/todos/1";
106130
status = 500;
107131
ok = false;
108132
mockFetchPromise = Promise.resolve({
@@ -164,22 +188,47 @@ describe("useApi", () => {
164188
});
165189

166190
describe("when the response is successful", () => {
167-
it("returns the response as json", done => {
168-
const { post } = useApi();
169-
const response = post(url, data);
170-
expect(response).toEqual(mockJsonPromise);
191+
describe("when the status code is 204 No Content", () => {
192+
beforeEach(() => {
193+
status = 204;
194+
mockFetchPromise = Promise.resolve({
195+
status: status,
196+
ok: ok,
197+
json: () => Promise.resolve({})
198+
});
199+
200+
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
201+
});
171202

172-
process.nextTick(() => {
173-
global.fetch.mockClear();
174-
done();
203+
it("returns an empty json object", done => {
204+
const { post } = useApi();
205+
const response = post(url, data);
206+
expect(response).toEqual(Promise.resolve({}));
207+
208+
process.nextTick(() => {
209+
global.fetch.mockClear();
210+
done();
211+
});
212+
});
213+
});
214+
215+
describe("when the status code is any other successful status", () => {
216+
it("returns the response as json", done => {
217+
const { post } = useApi();
218+
const response = post(url, data);
219+
expect(response).toEqual(mockJsonPromise);
220+
221+
process.nextTick(() => {
222+
global.fetch.mockClear();
223+
done();
224+
});
175225
});
176226
});
177227
});
178228

179229
describe("when the response is not successful", () => {
180230
describe("when the status code is 401 Unauthorized", () => {
181231
beforeEach(() => {
182-
url = "https://jsonplaceholder.typicode.com/todos";
183232
data = { title: "Gotta do all the things!", completed: false };
184233
status = 401;
185234
ok = false;
@@ -211,7 +260,6 @@ describe("useApi", () => {
211260

212261
describe("when the status code is any other error ", () => {
213262
beforeEach(() => {
214-
url = "https://jsonplaceholder.typicode.com/todos";
215263
status = 500;
216264
ok = false;
217265
mockFetchPromise = Promise.resolve({
@@ -273,22 +321,47 @@ describe("useApi", () => {
273321
});
274322

275323
describe("when the response is successful", () => {
276-
it("returns the response as json", done => {
277-
const { put } = useApi();
278-
const response = put(url, data);
279-
expect(response).toEqual(mockJsonPromise);
324+
describe("when the status code is 204 No Content", () => {
325+
beforeEach(() => {
326+
status = 204;
327+
mockFetchPromise = Promise.resolve({
328+
status: status,
329+
ok: ok,
330+
json: () => Promise.resolve({})
331+
});
332+
333+
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
334+
});
280335

281-
process.nextTick(() => {
282-
global.fetch.mockClear();
283-
done();
336+
it("returns an empty json object", done => {
337+
const { put } = useApi();
338+
const response = put(url, data);
339+
expect(response).toEqual(Promise.resolve({}));
340+
341+
process.nextTick(() => {
342+
global.fetch.mockClear();
343+
done();
344+
});
345+
});
346+
});
347+
348+
describe("when the status code is any other successful status", () => {
349+
it("returns the response as json", done => {
350+
const { put } = useApi();
351+
const response = put(url, data);
352+
expect(response).toEqual(mockJsonPromise);
353+
354+
process.nextTick(() => {
355+
global.fetch.mockClear();
356+
done();
357+
});
284358
});
285359
});
286360
});
287361

288362
describe("when the response is not successful", () => {
289363
describe("when the status code is 401 Unauthorized", () => {
290364
beforeEach(() => {
291-
url = "https://jsonplaceholder.typicode.com/todos";
292365
data = { title: "Gotta do all the things!", completed: false };
293366
status = 401;
294367
ok = false;
@@ -320,7 +393,6 @@ describe("useApi", () => {
320393

321394
describe("when the status code is any other error ", () => {
322395
beforeEach(() => {
323-
url = "https://jsonplaceholder.typicode.com/todos";
324396
status = 500;
325397
ok = false;
326398
mockFetchPromise = Promise.resolve({
@@ -381,22 +453,47 @@ describe("useApi", () => {
381453
});
382454

383455
describe("when the response is successful", () => {
384-
it("returns the response as json", done => {
385-
const { del } = useApi();
386-
const response = del(url);
387-
expect(response).toEqual(mockJsonPromise);
456+
describe("when the status code is 204 No Content", () => {
457+
beforeEach(() => {
458+
status = 204;
459+
mockFetchPromise = Promise.resolve({
460+
status: status,
461+
ok: ok,
462+
json: () => Promise.resolve({})
463+
});
464+
465+
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
466+
});
388467

389-
process.nextTick(() => {
390-
global.fetch.mockClear();
391-
done();
468+
it("returns an empty json object", done => {
469+
const { del } = useApi();
470+
const response = del(url);
471+
expect(response).toEqual(Promise.resolve({}));
472+
473+
process.nextTick(() => {
474+
global.fetch.mockClear();
475+
done();
476+
});
477+
});
478+
});
479+
480+
describe("when the status code is any other successful status", () => {
481+
it("returns the response as json", done => {
482+
const { del } = useApi();
483+
const response = del(url);
484+
expect(response).toEqual(mockJsonPromise);
485+
486+
process.nextTick(() => {
487+
global.fetch.mockClear();
488+
done();
489+
});
392490
});
393491
});
394492
});
395493

396494
describe("when the response is not successful", () => {
397495
describe("when the status code is 401 Unauthorized", () => {
398496
beforeEach(() => {
399-
url = "https://jsonplaceholder.typicode.com/todos/1";
400497
status = 401;
401498
ok = false;
402499
mockFetchPromise = Promise.resolve({
@@ -427,7 +524,6 @@ describe("useApi", () => {
427524

428525
describe("when the status code is any other error ", () => {
429526
beforeEach(() => {
430-
url = "https://jsonplaceholder.typicode.com/todos/1";
431527
status = 500;
432528
ok = false;
433529
mockFetchPromise = Promise.resolve({

0 commit comments

Comments
 (0)