Adds jestdom typings and modifies image URL to satisfy test runner

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub'

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {}

fileTransformer.js

@@ -0,0 +1,7 @@
+const path = require('path')
+
+module.exports = {
+  process(src, filename, config, options) {
+    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'
+  }
+}

jest.config.js

@@ -1,13 +1,16 @@
 module.exports = {
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
   testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
   testEnvironment: 'jest-environment-jsdom',
   transform: {
-    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest'
+    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/fileTransformer.js'
   },
   moduleNameMapper: {
     '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
     '^.+\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/__mocks__/fileMock.js'
   },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   transformIgnorePatterns: ['/node_modules/', '^.+\\.module\\.(css|sass|scss)$']
 }

package.json

@@ -34,6 +34,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.2.1",
+    "@types/testing-library__jest-dom": "^5.14.1",
     "@types/jest": "^27.0.2",
     "@types/react": "17.0.19",
     "@typescript-eslint/eslint-plugin": "^4.32.0",

src/components/footer.tsx

@@ -1,6 +1,5 @@
 import Image from 'next/image'
 import CustomLink from './customLink'
-import ScribeDAOLogo from '../../public/static/ScribeDAO_Logo.svg'
 import { FaDiscord, FaGithub, FaTwitter } from 'react-icons/fa'
 
 import { FOOTER_NAV_LIST } from '../data/constants'
@@ -13,7 +12,7 @@ export default function Footer() {
         <div className="col-span-2 md:col-span-4 lg:col-span-2">
           <div className="mb-6 lg:mb-10 w-60 md:w-80 lg:w-60">
             <Image
-              src={ScribeDAOLogo}
+              src="/static/ScribeDAO_Logo.svg"
               alt="ScribeDAO"
               layout="responsive"
               width={180}

src/components/navbar/index.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import Image from 'next/image'
 import CustomLink from '../customLink'
-import ScribeDAOLogo from '../../../public/static/ScribeDAO_Logo.svg'
 
 import { HEADER_NAV_LIST } from '../../data/constants'
 import HeaderNav from './headerNav'
@@ -17,7 +16,7 @@ export default function Nav() {
         <section className="flex justify-between items-center">
           <CustomLink href="/">
             <Image
-              src={ScribeDAOLogo}
+              src="/static/ScribeDAO_Logo.svg"
               alt="ScribeDAO"
               width={180}
               height={35}

tests/index.test.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import { render, screen } from '@testing-library/react'
 import Home from '../src/pages'
 
+import '@testing-library/jest-dom'
+
 describe('Home', () => {
   it('renders welcome heading', () => {
     render(<Home />)

tsconfig.json

@@ -13,8 +13,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "types": ["cypress"]
+    "types": ["cypress", "node", "jest", "@testing-library/jest-dom"]
   },
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules", ],
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
 }