Write test for useFetch

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 .next/
 out/
 package-lock.json
+coverage

.husky/pre-commit

@@ -3,14 +3,14 @@
 
 echo 'Lets check if the code is well formatted 😎'
 
-yarn check-format || (
+( yarn check-format || npm run format ) || (
   echo 'oops! your format doesnt looks good. Run yarn format and try commiting again!';
   false;
 )
 
 echo 'Ok, the format looks good, how about lint check? 😋'
 
-yarn check-lint || (
+(yarn check-lint || npm run lint ) || (
   echo 'oops! you did not meet the linting standards!';
   false;
 )

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+(npm test -- --watchAll=false || yarn test -- --watchAll=false)

jest.config.js

@@ -8,4 +8,13 @@ module.exports = {
     '^@store(.*)$': '<rootDir>/src/store$1',
     '^@helper-functions(.*)$': '<rootDir>/src/helper-functions$1',
   },
+  collectCoverageFrom: ['**/src/**/*.js'],
+  coverageThreshold: {
+    global: {
+      statements: 90,
+      branches: 90,
+      functions: 90,
+      lines: 90,
+    },
+  },
 };

package.json

@@ -14,6 +14,7 @@
     "lint": "eslint --fix .",
     "format": "prettier --write .",
     "test": "jest --env=jsdom",
+    "test-coverage": "jest --coverage",
     "test-watch": "jest --env=jsdom --watch",
     "prepare": "husky install",
     "storybook": "start-storybook -s ./public -p 6006",
@@ -28,11 +29,12 @@
     "next": "^12.1.0",
     "next-use-posthog": "^1.16.0",
     "prop-types": "^15.7.2",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "react-hook-form": "^6.15.5",
     "sass": "^1.30.0",
-    "validator": "^13.7.0"
+    "validator": "^13.7.0",
+    "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^6.3.5",
@@ -44,7 +46,8 @@
     "@storybook/react": "^6.3.5",
     "@testing-library/dom": "^8.1.0",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^13.4.0",
+    "@types/whatwg-fetch": "^0.0.33",
     "babel-jest": "^27.0.6",
     "eslint": "^7.27.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -58,6 +61,7 @@
     "husky": "^7.0.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.0.6",
+    "msw": "^0.47.4",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.3.0"
   },

src/custom-hooks/useFetch.js

@@ -10,7 +10,7 @@ const defaults = {
 /**
  * @param {string} url
  */
-const useFetch = (url) => {
+const useFetch = ({ url } = {}) => {
   const [loading, setLoading] = useState(defaults.loading);
   const [error, setError] = useState(defaults.error);
   const [data, setData] = useState(defaults.data);

src/test/unit/Hook/useFetch.test.js

@@ -0,0 +1,53 @@
+import 'whatwg-fetch';
+import { renderHook, waitFor } from '@testing-library/react';
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import useFetch from '../../../custom-hooks/useFetch';
+
+const mockData = { data: ['real', 'real-dev'] };
+const resolveUrl = 'https://api/resolve';
+
+const server = setupServer(
+  rest.get(resolveUrl, (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(mockData));
+  })
+);
+
+beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
+afterAll(() => server.close());
+afterEach(() => server.resetHandlers());
+
+test('test useFetch Hook with resolve', async () => {
+  const { result } = renderHook(useFetch, {
+    initialProps: { url: resolveUrl },
+  });
+  expect(result.current.loading).toBe(true);
+  expect(result.current.data).toBe(undefined);
+  expect(result.current.error).toBe(undefined);
+
+  waitFor(() => expect(result.current.loading).toBe(false));
+  waitFor(() => expect(result.current.data).toStrictEqual(mockData));
+  waitFor(() => expect(result.current.error).toBe(undefined));
+});
+
+test('test useFetch Hook with reject', async () => {
+  const rejectUrl = 'https://api/reject';
+  server.use(
+    rest.get(rejectUrl, (req, res, ctx) => {
+      return res(ctx.status(401));
+    })
+  );
+
+  const { result } = renderHook(useFetch, {
+    initialProps: { url: rejectUrl },
+  });
+  expect(result.current.loading).toBe(true);
+  expect(result.current.data).toBe(undefined);
+  expect(result.current.error).toBe(undefined);
+
+  waitFor(() => expect(result.current.loading).toBe(false));
+  waitFor(() => expect(result.current.data).toStrictEqual(undefined));
+  waitFor(() =>
+    expect(result.current.error).toStrictEqual(new Error('Unauthorized'))
+  );
+});