no log: Setup unit tests for UI

frontend/index.html

@@ -20,6 +20,6 @@
     <script>
       window.Bazarr = {{BAZARR_SERVER_INJECT | tojson | safe}};
     </script>
-    <script type="module" src="./src/index.tsx"></script>
+    <script type="module" src="./src/dom.tsx"></script>
   </body>
 </html>

frontend/package.json

@@ -30,6 +30,10 @@
     "@fortawesome/free-solid-svg-icons": "^5.15",
     "@fortawesome/react-fontawesome": "^0.1.16",
     "@reduxjs/toolkit": "^1.6",
+    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/bootstrap": "^5",
     "@types/lodash": "^4",
     "@types/node": "^15",
@@ -44,6 +48,7 @@
     "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "husky": "^7",
+    "jsdom": "latest",
     "lodash": "^4",
     "moment": "^2.29.1",
     "prettier": "^2",
@@ -57,8 +62,9 @@
     "rooks": "^5.7.1",
     "sass": "^1",
     "typescript": "^4",
-    "vite": "^2.7.13",
-    "vite-plugin-checker": "^0.3.4"
+    "vite": "latest",
+    "vite-plugin-checker": "^0.3.4",
+    "vitest": "latest"
   },
   "scripts": {
     "start": "vite",
@@ -67,7 +73,7 @@
     "check": "eslint --ext .ts,.tsx src",
     "check:ts": "tsc --noEmit --incremental false",
     "check:fmt": "prettier -c .",
-    "test": "exit 0",
+    "test": "vitest",
     "format": "prettier -w .",
     "prepare": "cd .. && husky install frontend/.husky"
   },

frontend/src/dom.tsx

@@ -0,0 +1,4 @@
+import ReactDOM from "react-dom";
+import { Entrance } from ".";
+
+ReactDOM.render(<Entrance />, document.getElementById("root"));

frontend/src/index.tsx

@@ -2,7 +2,6 @@ import queryClient from "@/apis/queries";
 import store from "@/modules/redux/store";
 import "@/styles/index.scss";
 import "@fontsource/roboto/300.css";
-import ReactDOM from "react-dom";
 import { QueryClientProvider } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
 import { Provider } from "react-redux";
@@ -29,5 +28,3 @@ export const Entrance = () => (
     </QueryClientProvider>
   </Provider>
 );
-
-ReactDOM.render(<Entrance />, document.getElementById("root"));

frontend/test/render.test.tsx

@@ -0,0 +1,9 @@
+import { render } from "@testing-library/react";
+import { describe, it } from "vitest";
+import { Entrance } from "../src";
+
+describe("render test", () => {
+  it("render without crashing", () => {
+    render(<Entrance />);
+  });
+});

frontend/test/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

frontend/tsconfig.json

@@ -22,5 +22,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["./src"]
+  "include": ["./src", "./test"]
 }

frontend/vite.config.ts

@@ -1,3 +1,5 @@
+/// <reference types="vitest" />
+/// <reference types="vite/client" />
 /// <reference types="node" />
 
 import react from "@vitejs/plugin-react";
@@ -46,6 +48,11 @@ export default defineConfig(async ({ mode, command }) => {
         },
       },
     },
+    test: {
+      globals: true,
+      environment: "jsdom",
+      setupFiles: "./test/setup.ts",
+    },
     server: {
       proxy: {
         "^/(api|images|test|bazarr.log)/.*": {