fix: Fixes frontend tests (#363)

**QA Steps:**
1. Create a scaf project
2. Cd into frontend folder
3. run `npm run test` and expect to see success (make sure `npm i` is
run to install packages)

---------

Co-authored-by: sedatbasar <[email protected]>

{{cookiecutter.project_slug}}/frontend/.eslintrc.json

@@ -42,6 +42,11 @@
             "name": "@apollo/client/core",
             "importNames": ["gql"],
             "message": "Use the @/__generated__/gql to get proper typings!"
+          },
+          {
+            "name": "@testing-library/react",
+            "importNames": ["*"],
+            "message": "Use the imports from test-utils instead!"
           }
         ]
       }

{{cookiecutter.project_slug}}/frontend/README.md

@@ -17,10 +17,10 @@ This project uses GraphQL for the backend, and Apollo Client for the frontend. T
 ## Environment Variables
 
 | Variable Name                | Explanation                                                |
-| ---------------------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------- |
-| IS_PRE_PUSH_HOOKS_ENABLED    | Controls husky pre-push hooks for frontend folder          |  |
+| ---------------------------- | ---------------------------------------------------------- | --- |
+| IS_PRE_PUSH_HOOKS_ENABLED    | Controls husky pre-push hooks for frontend folder          |     |
 | NEXT_PUBLIC_GRAPHQL_ENDPOINT | The public graphql endpoint url                            |
-| NEXT_GRAPHQL_ENDPOINT        | The graphql endpoint url to be used for serverside queries |  |
+| NEXT_GRAPHQL_ENDPOINT        | The graphql endpoint url to be used for serverside queries |     |
 
 ## Suggested Tools
 

{{cookiecutter.project_slug}}/frontend/__tests__/about.test.tsx

@@ -1,8 +1,23 @@
 import { expect, test } from 'vitest'
-import { render, screen } from '@testing-library/react'
 import AboutPage from '../pages/about'
+import { GET_ME } from '@/pages'
+import { render, screen } from '@/utils/test-utils'
 
-test('AboutPage', () => {
-  render(<AboutPage />)
-  expect(screen.getByRole('heading', { level: 1, name: 'About Page' })).toBeDefined()
+const mocks = [
+  {
+    request: {
+      query: GET_ME
+    },
+    result: {
+      data: {
+        me: { id: '1', name: 'John Doe' }
+      }
+    }
+  }
+]
+
+test('AboutPage', async () => {
+  render(<AboutPage />, { mocks })
+  expect(await screen.findByRole('heading', { level: 1, name: 'About Page' })).toBeInTheDocument()
+  expect(await screen.findByText('John Doe')).toBeInTheDocument()
 })

{{cookiecutter.project_slug}}/frontend/lib/apolloClient.ts

@@ -19,7 +19,10 @@ const errorLink = onError(({ graphQLErrors, networkError }) => {
 })
 
 const httpLink = new HttpLink({
-  uri: typeof window === 'undefined' ? process.env.NEXT_GRAPHQL_ENDPOINT || 'http://backend:8000/graphql/' : process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT || 'http://localhost:8000/graphql/',
+  uri:
+    typeof window === 'undefined'
+      ? process.env.NEXT_GRAPHQL_ENDPOINT || 'http://backend:8000/graphql/'
+      : process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT || 'http://localhost:8000/graphql/',
   credentials: 'include'
 })