Add Jest testing setup and ParticleSystem component tests

components/background/__tests__/particle-system.test.tsx

@@ -0,0 +1,42 @@
+import { render } from '@testing-library/react'
+import { ThemeProvider } from 'next-themes'
+import { ParticleSystem } from '../particle-system'
+import 'jest-canvas-mock'
+
+// Mock window.matchMedia
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // deprecated
+      removeListener: jest.fn(), // deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  })
+})
+
+const renderWithTheme = (component: React.ReactNode) => {
+  return render(
+    <ThemeProvider attribute="class">
+      {component}
+    </ThemeProvider>
+  )
+}
+
+describe('ParticleSystem', () => {
+  it('renders without crashing', () => {
+    const { container } = renderWithTheme(<ParticleSystem />)
+    expect(container).toBeInTheDocument()
+  })
+
+  it('creates a canvas element', () => {
+    const { container } = renderWithTheme(<ParticleSystem />)
+    const canvas = container.querySelector('canvas')
+    expect(canvas).toBeInTheDocument()
+  })
+})

jest.config.js

@@ -0,0 +1,18 @@
+const nextJest = require('next/jest')
+
+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 customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testEnvironment: 'jest-environment-jsdom',
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/$1',
+  },
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

jest.setup.js

@@ -0,0 +1,3 @@
+// Learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom'
+import 'jest-canvas-mock'

package.json

@@ -6,7 +6,10 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   },
   "dependencies": {
     "@coral-xyz/anchor": "^0.30.1",
@@ -70,10 +73,16 @@
     "vaul": "^1.1.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/jest": "^29.5.14",
     "@types/node": "^20.11.24",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
     "autoprefixer": "^10.4.18",
+    "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.35"
   }
 }