fe test setup (#3997)

dashboard/jest.config.js

@@ -0,0 +1,10 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  testEnvironment: "jsdom",
+  moduleNameMapper: {
+    "^.+\\.(jpg|jpeg|png|gif|webp|svg)$": "<rootDir>/src/__mocks__/fileMock.js",
+    "^shared/(.*)$": "<rootDir>/src/shared/$1",
+    "^components/(.*)$": "<rootDir>/src/components/$1",
+    "^assets/(.*)$": "<rootDir>/src/assets/$1",
+  },
+};

dashboard/package.json

@@ -83,7 +83,7 @@
     "npm": "9.7.2"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
     "start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
     "build": "NODE_ENV=\"production\" webpack",
     "build-and-analyze": "ENABLE_ANALYZER=true NODE_ENV=\"production\" ./node_modules/webpack/bin/webpack.js",

dashboard/src/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "";

dashboard/src/__tests__/CreateProject.test.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import { fireEvent, render, screen } from "../test-utils";
+
+import "@testing-library/jest-dom";
+
+import { NewProjectFC } from "../main/home/new-project/NewProject";
+
+/**
+ * @jest-environment jsdom
+ */
+test("create new project with no name", async () => {
+  render(<NewProjectFC />);
+  fireEvent.click(screen.getByText("Create project"));
+  await screen.findByText(/^the name cannot be empty/i);
+});
+
+/**
+ * @jest-environment jsdom
+ */
+test("create new project", async () => {
+  render(<NewProjectFC />);
+  const input = screen.getByPlaceholderText("ex: perspective-vortex");
+  fireEvent.change(input, { target: { value: "hello-world-project" } });
+  fireEvent.click(screen.getByText("Create project"));
+  await screen.findByText(/^creating project/i);
+});

dashboard/src/test-utils.tsx

@@ -0,0 +1,40 @@
+import React, { type ReactElement } from "react";
+import {
+  render,
+  type RenderOptions,
+  type RenderResult,
+} from "@testing-library/react";
+import { useHistory, useLocation } from "react-router";
+import { BrowserRouter } from "react-router-dom";
+import { createGlobalStyle, ThemeProvider } from "styled-components";
+
+import AuthProvider from "shared/auth/AuthContext";
+import { ContextProvider } from "shared/Context";
+import standard from "shared/themes/standard";
+
+const AllTheProviders: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <ThemeProvider theme={standard}>
+      <BrowserRouter>
+        <ContextProvider history={null} location={null}>
+          <AuthProvider>{children}</AuthProvider>
+        </ContextProvider>
+      </BrowserRouter>
+    </ThemeProvider>
+  );
+};
+
+const customRender = (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, "wrapper">
+): RenderResult =>
+  render(ui, {
+    wrapper: AllTheProviders,
+    ...options,
+  });
+
+export * from "@testing-library/react";
+
+export { customRender as render };

dashboard/tsconfig.json

@@ -15,5 +15,5 @@
     "strict": true,
     "skipLibCheck": true
   },
-  "exclude": ["node_modules", "build"]
+  "exclude": ["node_modules", "build", "jest.config.js"]
 }