[ui] eject from react-create-app and fix jest config

Author: Platane

quickwit/quickwit-ui/.eslintignore

@@ -1,2 +1,3 @@
 node_modules
 build
+dist

quickwit/quickwit-ui/jest.config.js

@@ -0,0 +1,31 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  setupFiles: ["react-app-polyfill/jsdom"], // polyfill jsdom api (such as fetch)
+
+  setupFilesAfterEnv: ["@testing-library/jest-dom"],
+
+  testEnvironment: "jsdom",
+
+  transform: {
+    // transform js file (typescript and es6 import)
+    "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": [
+      "babel-jest",
+      {
+        presets: [["babel-preset-react-app", { runtime: "automatic" }]],
+        babelrc: false,
+        configFile: false,
+      },
+    ],
+
+    // transform asset files
+    "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-transform-stub",
+  },
+
+  moduleNameMapper: {
+    "monaco-editor": "<rootDir>/mocks/monacoMock.js",
+    "swagger-ui-react": "<rootDir>/mocks/swaggerUIMock.js",
+    "@mui/x-charts": "<rootDir>/mocks/x-charts.js",
+  },
+
+  resetMocks: true,
+};

quickwit/quickwit-ui/src/components/ApiUrlFooter.tsx

@@ -17,19 +17,21 @@ import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import { QUICKWIT_LIGHT_GREY } from "../utils/theme";
 
 const Footer = styled(Box)`
-display: flex;
-height: 25px;
-padding: 0px 5px;
-position: absolute;
-bottom: 0px;
-font-size: 0.90em;
-background-color: ${QUICKWIT_LIGHT_GREY};
-opacity: 0.7;
+  display: flex;
+  height: 25px;
+  padding: 0px 5px;
+  position: absolute;
+  bottom: 0px;
+  font-size: 0.9em;
+  background-color: ${QUICKWIT_LIGHT_GREY};
+  opacity: 0.7;
 `;
 
 export default function ApiUrlFooter(url: string) {
   const urlMaxLength = 80;
   const origin =
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     process.env.NODE_ENV === "development"
       ? "http://localhost:7280"
       : window.location.origin;

quickwit/quickwit-ui/src/index.test.js

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { expect, describe, it } from "@jest/globals";
 import { render, screen } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
 import App from "./views/App";

quickwit/quickwit-ui/src/providers/EditorProvider.tsx

@@ -22,7 +22,7 @@ import {
 } from "react";
 
 type ContextProps = {
-  editorRef: MutableRefObject<any | null> | null;
+  editorRef: MutableRefObject<unknown | null> | null;
   monacoRef: MutableRefObject<typeof monacoEditor | null> | null;
 };
 
@@ -33,8 +33,8 @@ const defaultValues = {
 
 const EditorContext = createContext<ContextProps>(defaultValues);
 
-export const EditorProvider = ({ children }: PropsWithChildren<{}>) => {
-  const editorRef = useRef<any | null>(null);
+export const EditorProvider = ({ children }: PropsWithChildren<unknown>) => {
+  const editorRef = useRef<unknown | null>(null);
   const monacoRef = useRef<typeof monacoEditor | null>(null);
 
   return (

quickwit/quickwit-ui/src/react-app-env.d.ts

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { expect, jest, describe, it } from "@jest/globals";
 import { SearchRequest } from "../utils/models";
 import { Client } from "./client";
 
@@ -42,7 +43,7 @@ describe("Client unit test", () => {
     };
 
     const client = new Client();
-    expect(client.buildSearchBody(searchRequest, null)).toBe(
+    expect(client.buildSearchBody(searchRequest, null)).toEqual(
       '{"query":"severity_error:ERROR","max_hits":20,"start_timestamp":100,"end_timestamp":200,"sort_by_field":"+timestamp"}',
     );
 

quickwit/quickwit-ui/src/services/client.test.ts

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { expect, jest, test, beforeEach, afterEach } from "@jest/globals";
 import { render, unmountComponentAtNode } from "react-dom";
 import { waitFor } from "@testing-library/react";
 import { screen } from "@testing-library/dom";

quickwit/quickwit-ui/src/setupTests.ts

@@ -19,7 +19,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["vite/client"]
+    "types": ["vite/client", "@types/jest"]
   },
-  "include": ["src", "typings", "tests", "tests/integration/index.test.ts"]
+  "exclude": ["dist", "build"]
 }