Build & Test With Jest on Github Actions Every Branch

.github/workflows/nextjs-build-test.yml

@@ -0,0 +1,29 @@
+name: Build and Test Next.js App
+
+on:
+  push:
+    branches: [ "*" ]
+  pull_request:
+    branches: [ "*" ]
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Set up Node.js
+      uses: actions/setup-node@v1
+      with:
+        node-version: '18' # Specify the Node.js version you are using
+
+    - name: Install Dependencies
+      run: npm install
+
+    - name: Build
+      run: npm run build
+
+    - name: Run Tests
+      run: npm test
+
+    - name: Check Build Output
+      run: ls .next

__tests__/hooks/useEventHandler.test.ts

@@ -0,0 +1,36 @@
+import { renderHook } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import useEventListener from '@/utils/hooks/useEventListener';
+
+describe('useEventListener', () => {
+  it('calls event handler when specified event is triggered on window', () => {
+    const handler = jest.fn();
+    renderHook(() => useEventListener('click', handler));
+
+    act(() => {
+      const event = new Event('click');
+      window.dispatchEvent(event);
+    });
+
+    expect(handler).toHaveBeenCalled();
+    expect(handler).toHaveBeenCalledWith(expect.any(Event));
+  });
+
+  it('calls event handler when specified event is triggered on element', () => {
+    const handler = jest.fn();
+
+    // Create a mock element and ref object for the test
+    const element = document.createElement('div');
+    const refObject = { current: element };
+
+    renderHook(() => useEventListener('click', handler, refObject));
+
+    act(() => {
+      const event = new Event('click');
+      element.dispatchEvent(event);
+    });
+
+    expect(handler).toHaveBeenCalled();
+    expect(handler).toHaveBeenCalledWith(expect.any(Event));
+  });
+});

__tests__/utils/format-number.test.ts

@@ -0,0 +1,30 @@
+import numberWithCommas from "@/utils/format-number";
+
+describe('numberWithCommas', () => {
+
+    // Returns a string with commas separating thousands when given a number greater than or equal to 1000 and less than or equal to 100,000,000.
+    it('should return a string with commas separating thousands', () => {
+            // Arrange
+        const input = 1234567;
+        const expected = '1,234,567';
+
+            // Act
+        const result = numberWithCommas(input);
+
+            // Assert
+        expect(result).toEqual(expected);
+    });
+
+    // Returns undefined when given a non-numeric value.
+    it('should return undefined when given a non-numeric value', () => {
+        // Arrange
+        const input = 'abc';
+
+        // Act
+        const result = numberWithCommas(input);
+
+        // Assert
+        expect(result).toBeUndefined();
+      });
+
+})

jest.config.ts

@@ -0,0 +1,18 @@
+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: 'jsdom',
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config)