added jest for frontend testing of browser app

net/web/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    ['@babel/preset-react', {runtime: 'automatic'}],
+  ],
+};

net/web/package.json

@@ -1,19 +1,31 @@
 {
-  "name": "antd-demo",
+  "name": "databag",
   "version": "0.1.0",
   "private": true,
+  "jest": {
+    "testEnvironment": "jsdom",
+    "modulePaths": [
+      "<rootDir>/src/"
+    ],
+    "testMatch": [
+      "**/test/**"
+    ],
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+    }
+  },
   "dependencies": {
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
     "antd": "^5.0.4",
     "axios": "^0.27.2",
     "base-64": "^1.0.0",
     "crypto-js": "^4.1.1",
     "jsencrypt": "^2.3.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-color": "^2.19.3",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-easy-crop": "^4.1.4",
     "react-player": "^2.10.0",
     "react-resize-detector": "^7.0.0",
@@ -45,5 +57,16 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@testing-library/dom": "^8.19.1",
+    "@testing-library/react": "^13.4.0",
+    "babel-jest": "^29.3.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "react-test-renderer": "^18.2.0"
   }
 }

net/web/test/Profile.test.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect, useContext } from 'react';
+import {render, act, screen, waitFor, fireEvent} from '@testing-library/react'
+import { ProfileContextProvider, ProfileContext } from 'context/ProfileContext';
+import * as fetchUtil from 'api/fetchUtil';
+
+function ProfileView() {
+  const profile = useContext(ProfileContext);
+
+  return (
+    <div data-testid="profile" profile={profile}>
+      <span data-testid="guid">{ profile.state.profile?.guid }</span>
+      <span data-testid="handle">{ profile.state.profile?.handle }</span>
+      <span data-testid="name">{ profile.state.profile?.name }</span>
+      <span data-testid="description">{ profile.state.profile?.description }</span>
+      <span data-testid="location">{ profile.state.profile?.location }</span>
+      <span data-testid="image">{ profile.state.profile?.image }</span>
+      <span data-testid="revision">{ profile.state.profile?.revision }</span>
+      <span data-testid="seal">{ profile.state.profile?.seal }</span>
+      <span data-testid="version">{ profile.state.profile?.version }</span>
+      <span data-testid="node">{ profile.state.profile?.node }</span>
+    </div>
+  );
+}
+
+function ProfileTestApp() {
+  return (
+    <ProfileContextProvider>
+      <ProfileView />
+    </ProfileContextProvider>
+  )
+}
+
+const realFetchWithTimeout = fetchUtil.fetchWithTimeout;
+const realFetchWithCustomTimeout = fetchUtil.fetchWithCustomTimeout;
+let identity = { };
+
+beforeEach(() => {
+  const mockFetch = jest.fn().mockImplementation((url, options) => {
+    if (options.method === 'PUT') {
+      identity = JSON.parse(options.body);
+    }
+    return Promise.resolve({
+      json: () => Promise.resolve(identity)
+    });
+  });
+  fetchUtil.fetchWithTimeout = mockFetch;
+  fetchUtil.fetchWithCustomTimeout = mockFetch;
+});
+
+afterEach(() => {
+  fetchUtil.fetchWithTimeout = realFetchWithTimeout;
+  fetchUtil.fetchWithCustomTimeout = realFetchWithCustomTimeout;
+});
+
+test('testing', async () => {
+  render(<ProfileTestApp />);
+
+  await waitFor(async () => {
+    expect(screen.getByTestId('name').textContent).toBe("");
+  });
+ 
+});
+
+
+