Refactor fetch with timeout to separate utility

jest.setup.js

@@ -8,6 +8,12 @@
 import { enableFetchMocks } from 'jest-fetch-mock';
 import { AbortController } from 'node-abort-controller';
 
+// DOMException is not polyfilled in released version of jest-fetch-mock
+// refs: https:/jefflau/jest-fetch-mock/pull/160
+if (typeof DOMException === 'undefined') {
+ global.DOMException = require('domexception');
+}
+
 global.AbortController = AbortController;
 
 enableFetchMocks();

package.json

@@ -84,6 +84,7 @@
  "@types/jest": "^27.0.2",
  "@typescript-eslint/parser": "^4.9.1",
  "babel-preset-expo": "8.5.1",
+ "domexception": "^4.0.0",
  "eslint": "^7.4.0",
  "eslint-plugin-compat": "^3.9.0",
  "eslint-plugin-eslint-comments": "^3.1.2",

utils/Fetch.js

@@ -0,0 +1,20 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+export function fetchWithTimeout(url, timeout) {
+ const abortController = new AbortController();
+ const { signal } = abortController;
+
+ const timeoutId = setTimeout(() => {
+ console.log('fetch timed out, aborting');
+ abortController.abort();
+ }, timeout);
+
+ return fetch(url, { signal })
+ .finally(() => {
+ clearTimeout(timeoutId);
+ });
+}

utils/ServerValidator.js

@@ -6,6 +6,8 @@
 
 import normalizeUrl from 'normalize-url';
 
+import { fetchWithTimeout } from './Fetch';
+
 const TIMEOUT_DURATION = 5000; // timeout request after 5s
 
 export const parseUrl = (host = '', port = '') => {
@@ -31,24 +33,13 @@ export const fetchServerInfo = async (server = {}) => {
  const infoUrl = `${serverUrl}system/info/public`;
  console.log('info url', infoUrl);
 
- // Try to fetch the server's public info
- const controller = new AbortController();
- const { signal } = controller;
-
- const request = fetch(infoUrl, { signal });
-
- const timeoutId = setTimeout(() => {
- console.log('request timed out, aborting');
- controller.abort();
- }, TIMEOUT_DURATION);
-
- const responseJson = await request.then(response => {
- clearTimeout(timeoutId);
- if (!response.ok) {
- throw new Error(`Error response status [${response.status}] received from ${infoUrl}`);
- }
- return response.json();
- });
+ const responseJson = await fetchWithTimeout(infoUrl, TIMEOUT_DURATION)
+ .then(response => {
+ if (!response.ok) {
+ throw new Error(`Error response status [${response.status}] received from ${infoUrl}`);
+ }
+ return response.json();
+ });
  console.log('response', responseJson);
 
  return responseJson;

utils/__tests__/Fetch.test.js

@@ -0,0 +1,32 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { fetchWithTimeout } from '../Fetch';
+
+describe('Fetch', () => {
+ beforeEach(() => {
+ fetch.resetMocks();
+ jest.clearAllMocks();
+ });
+
+ afterEach(() => {
+ jest.useRealTimers();
+ });
+
+ describe('fetchWithTimeout()', () => {
+ it('should throw an error when duration passes', async () => {
+ jest.useFakeTimers();
+ fetch.mockResponse(() => {
+ jest.runAllTimers();
+ return Promise.resolve('');
+ });
+
+ await expect(fetchWithTimeout('http://example.com', 100))
+ .rejects
+ .toThrow('The operation was aborted. ');
+ });
+ });
+});