fix lintings issue and test

web/package.json

@@ -1,6 +1,9 @@
 {
     "name": "mitmproxy",
     "private": true,
+    "jest": {
+        "verbose": true
+    },
     "scripts": {
         "test": "jest --coverage",
         "build": "gulp prod",
@@ -31,6 +34,7 @@
         "@types/redux-mock-store": "^1.0.2",
         "esbuild": "^0.12.9",
         "esbuild-jest": "^0.5.0",
+        "fetch-mock": "^9.11.0",
         "gulp": "^4.0.2",
         "gulp-clean-css": "^4.3.0",
         "gulp-esbuild": "^0.8.2",
@@ -42,6 +46,7 @@
         "gulp-replace": "^1.1.3",
         "gulp-sourcemaps": "^3.0.0",
         "jest": "^27.0.4",
+        "node-fetch": "^2.6.1",
         "through2": "^4.0.2"
     }
 }

web/src/js/__tests__/components/Command/CommandSpec.js

@@ -1,8 +1,11 @@
 import React from 'react'
 import CommandBar from '../../../components/CommandBar'
 import { render } from "../../test-utils"
+import fetchMock from 'fetch-mock';
 
 test('CommandBar Component', async () => {
+    fetchMock.get('./commands.json', {status: 200})
+
     const {asFragment, store} = render(
         <CommandBar/>
     );

web/src/js/__tests__/components/Command/__snapshots__/CommandSpec.js.snap

@@ -1,5 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`CommandBar Component 1`] = `
+<DocumentFragment>
+  <div
+    class="command"
+  >
+    <div
+      class="command-title"
+    >
+      Command Result
+    </div>
+    <div
+      class="command-result"
+    />
+    <div
+      class="command-input input-group"
+    >
+      <span
+        class="input-group-addon"
+      >
+        <i
+          class="fa fa-fw fa-terminal"
+        />
+      </span>
+      <input
+        class="form-control"
+        placeholder="Enter command"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`CommandBar Component should render correctly 1`] = `
 Array [
   <div