Unit tests with Jest and React testing (#53)

app/(root)/__tests__/Home.test.tsx

@@ -0,0 +1,37 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import Home from '../page';
+
+
+describe('Landing Page: has Explore Button', () => {
+    test('should render with label "Explore the Ecosystem"', () => {
+
+      render(<Home />);
+
+      const buttonElement = screen.getByRole('button', {name: "Explore the Ecosystem"});
+      expect(buttonElement).toBeInTheDocument()
+      expect(buttonElement.textContent).toEqual("Explore the Ecosystem");
+
+    });
+    test('should be clickable', () => {
+
+        render(<Home />);
+
+        const buttonElement = screen.getByRole('button', {name: "Explore the Ecosystem"});
+        fireEvent.click(buttonElement);
+      });
+
+  })
+
+describe('Landing Page has link to documentation', () => {
+    test('should render with label "View docs"', () => {
+
+      render(<Home />);
+
+      const docsLinkElement = screen.getByRole('link');
+      expect(docsLinkElement).toHaveTextContent('View docs');
+
+
+    });
+
+    // todo: add test for checking the link
+  })

app/(root)/investors/page.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react'
+import InstitueInstitutionalInvestorsSection from './page'
+
+describe('Investor Page has Our Mission topic', () => {
+
+    test('should render the "Our Mission" heading', () => {
+        // ARRANGE
+        render(<InstitueInstitutionalInvestorsSection />) 
+
+        //ACT
+        const header = screen.getByRole('heading', {
+            name: 'Our Mission'
+        })
+
+        // ASSERT
+        expect(header).toBeInTheDocument()
+    })
+
+})

app/(root)/page.tsx

@@ -176,10 +176,10 @@ export default function Home() {
                 Build, deploy, and scale your applications with our powerful infrastructure.
               </p>
               <div className="flex flex-col sm:flex-row gap-4">
-                <a href="" className="bg-3UM-color text-white px-6 py-3 rounded-lg font-semibold hover:bg-black transition-colors">Explore the Ecosystem</a>
+                <a href="" role="button" className="bg-3UM-color text-white px-6 py-3 rounded-lg font-semibold hover:bg-black transition-colors">Explore the Ecosystem</a>
 
                 <div className="group relative cursor-default">
-                  <a href="" className="text-gray-900 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors flex items-center pointer-events-none">
+                  <a href="" role="link" className="text-gray-900 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors flex items-center pointer-events-none">
                     View docs
                     <svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />

jest.config.js

@@ -0,0 +1,13 @@
+const nextJest = require("next/jest");
+
+const createJestConfig = nextJest({
+  dir: "./",
+});
+
+const customJestConfig = {
+  setupFilesAfterEnv: ["./jest.setup.js"], 
+  testEnvironment: "jest-environment-jsdom",
+  preset: 'ts-jest'
+};
+
+module.exports = createJestConfig(customJestConfig);

jest.setup.js

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