chore: setup unit & integration tests

apps/docs/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --port 3001",
+    "dev": "FORCE_COLOR=1 next dev --port 3001",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

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",
+    "storybook": "FORCE_COLOR=1 storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "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()
+  })
+})

package.json

@@ -7,9 +7,10 @@
     "packages/*"
   ],
   "scripts": {
-    "build": "turbo run build",
+    "build": "turbo run build --color",
-    "dev": "turbo run dev",
+    "dev": "turbo run dev --color",
-    "lint": "turbo run lint",
+    "test": "turbo run test --color",
+    "lint": "turbo run lint --color",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "postinstall": "patch-package"
   },
@@ -18,9 +19,13 @@
     "tailwind-merge": "^1.10.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
     "@total-typescript/ts-reset": "^0.4.2",
     "autoprefixer": "^10.4.14",
     "eslint-config-custom": "*",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "patch-package": "^6.5.1",
     "postcss": "^8.4.21",
     "postinstall-postinstall": "^2.1.0",

turbo.json

@@ -11,6 +11,9 @@
     },
     "dev": {
       "cache": false
+    },
+    "test": {
+      "outputs": ["coverage/**"]
     }
   }
 }