chore: setup unit & integration tests

apps/web/jest.config.mjs

@@ -0,0 +1,19 @@
+// jest.config.mjs
+import nextJest from "next/jest.js"
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: "./",
+})
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const config = {
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
+  testEnvironment: "jest-environment-jsdom",
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config)

apps/web/package.json

@@ -3,13 +3,14 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "FORCE_COLOR=1 next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "analyze": "ANALYZE=true yarn build",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "storybook": "FORCE_COLOR=1 storybook dev -p 6006",
+    "build-storybook": "FORCE_COLOR=1 storybook build",
+    "test": "FORCE_COLOR=1 jest --passWithNoTests"
   },
   "dependencies": {
     "next": "^13.1.1",

apps/web/pages/_app.test.tsx

@@ -0,0 +1,29 @@
+import { render } from "@testing-library/react"
+import { AppProps } from "next/app"
+import MyApp from "./_app"
+
+// Mock router object with required properties
+const router = {
+  basePath: "",
+  pathname: "/",
+  query: {},
+  asPath: "/",
+}
+
+describe("MyApp", () => {
+  it("should render a component with page props", () => {
+    const props: AppProps = {
+      Component: ({ title }) => (
+        <>
+          <div>Test Component</div>
+          <div>{title}</div>
+        </>
+      ),
+      pageProps: { title: "Test Page" },
+      router: router as never, // Include mocked router object in props
+    }
+    const { getByText } = render(<MyApp {...props} />)
+    expect(getByText("Test Component")).toBeInTheDocument()
+    expect(getByText("Test Page")).toBeInTheDocument()
+  })
+})