Setup RTL script, packages, and YAML

.github/workflows/ci.yml

@@ -6,6 +6,7 @@ on:
 
 jobs:
     build-and-push:
+        permissions: write-all
         runs-on: ubuntu-latest
         steps:
             - name: Check out the repo
@@ -25,3 +26,25 @@ jobs:
                   file: ./Dockerfile.dev
                   push: true
                   tags: ghcr.io/letsgettechnical/image:dev
+  #A workflow is for testing
+    tests:
+        runs-on: ubuntu-latest
+
+        strategy:
+          matrix: 
+            node-version: [20.x]
+
+        steps: 
+          - uses: actions/checkout@v4
+          - uses: pnpm/action-setup@v2
+            with:
+              version: 8
+          - name: Use Node.js ${{ matrix.node-version }}
+            uses: actions/setup-node@v3
+            with:
+              node-version: ${{ matrix.node-version }}
+              cache: 'pnpm'
+          - name: Install dependencies
+            run: pnpm install
+          - name: tests
+            run: pnpm test   

__tests__/Home.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from "@testing-library/react";
+import Home from "@/components/Home";
+
+describe("Home", () => {
+  it("should have Login text", () => {
+    render(<Home />);
+
+    const findElem = screen.getByText("Login");
+
+    expect(findElem).toBeInTheDocument();
+  });
+});

components/Home.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Home() {
+  return (
+    <div>Login</div>
+  )
+}

jest.config.ts

@@ -0,0 +1,19 @@
+import type { Config } from "jest";
+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
+const config: Config = {
+  coverageProvider: "v8",
+  testEnvironment: "jest-environment-jsdom",
+  // Add more setup options before each test is run
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  preset: "ts-jest",
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config);

jest.setup.js

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

package.json

@@ -3,7 +3,9 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "test": "jest",
+    "test:watch": "jest --watchAll"
   },
   "dependencies": {
     "@supabase/ssr": "latest",
@@ -15,12 +17,19 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",
+    "ts-node": "^10.9.2",
     "typescript": "5.1.3"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "20.3.1",
     "@types/react": "18.2.8",
     "@types/react-dom": "18.2.5",
-    "encoding": "^0.1.13"
+    "encoding": "^0.1.13",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.1.1"
   }
 }