feat: Setup Unit Test Environment and Refactor Typescript Config (#365)

* modify tsconfig and set up unit tests

* generate .d.ts files

* setup project dependencies and configuration for unit tests

* Add test setup and layout-test-utils along with first spec

* Add paths back to tsconfig

* remove type=module from package.json

* Add typescript definition for .env

* update package-lock

client/test/layout-test-utils.tsx

@@ -0,0 +1,21 @@
+import { render as rtlRender } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AuthContextProvider } from '~/hooks/AuthContext';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+const client = new QueryClient();
+
+function renderWithProvidersWrapper(ui, { ...options } = {}) {
+  function Wrapper({ children }) {
+    return (
+      <QueryClientProvider client={client}>
+        <Router>
+          <AuthContextProvider>{children}</AuthContextProvider>
+        </Router>
+      </QueryClientProvider>
+    );
+  }
+  return rtlRender(ui, { wrapper: Wrapper, ...options });
+}
+export * from '@testing-library/react';
+export { renderWithProvidersWrapper as render };

client/test/setupTests.js

@@ -0,0 +1,18 @@
+/* This file is automatically executed before running tests
+ * https://create-react-app.dev/docs/running-tests/#initializing-test-environment
+ */
+
+// react-testing-library renders your components to document.body,
+// this adds jest-dom's custom assertions
+// https://github.com/testing-library/jest-dom#table-of-contents
+import '@testing-library/jest-dom';
+
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
+
+// Mock canvas when run unit test cases with jest.
+// 'react-lottie' uses canvas
+import 'jest-canvas-mock';