Setup Jest unit testing (#534)

Realized in #533 that there were no unit tests within this project.
Added support for Jest unit testing.

Author: AlexJSully

.github/workflows/code-qa.yaml

@@ -45,7 +45,7 @@ jobs:
             - name: Checkout repository
               uses: actions/checkout@v5
             - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@v5
               with:
                   node-version: ${{ matrix.node-version }}
             - name: Cache Node.js modules
@@ -63,7 +63,9 @@ jobs:
               run: npm run eslint:check
             - name: Quality check - type check
               run: npm run tsc
-            - name: Quality check - cypress
-              run: npm run e2e:headless
+            - name: Quality check - unit tests
+              run: npm run test:jest
+            - name: Quality check - cypress e2e tests
+              run: npm run test:cypress:e2e
             - name: Build check
               run: npm run build

.github/workflows/markdown-lint.yaml

@@ -26,7 +26,7 @@ jobs:
             - name: Checkout repository
               uses: actions/checkout@v5
             - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@v5
               with:
                   node-version: ${{ matrix.node-version }}
             - name: Cache Node.js modules

jest.config.js

@@ -0,0 +1,31 @@
+module.exports = {
+	preset: 'ts-jest',
+	moduleNameMapper: {
+		'^@/(.*)$': '<rootDir>/src/$1',
+		'^@components/(.*)$': '<rootDir>/src/components/$1',
+		'^@configs/(.*)$': '<rootDir>/src/configs/$1',
+		'^@data/(.*)$': '<rootDir>/src/data/$1',
+		'^@helpers/(.*)$': '<rootDir>/src/helpers/$1',
+		'^@images/(.*)$': '<rootDir>/src/images/$1',
+		'^@layouts/(.*)$': '<rootDir>/src/layouts/$1',
+		'^@styles/(.*)$': '<rootDir>/src/styles/$1',
+		'^@util/(.*)$': '<rootDir>/src/util/$1',
+		'\\.(css|less|scss|sass)$': 'jest-transform-stub',
+		'\\.(svg|png|jpg|jpeg|gif|webp)$': '<rootDir>/jest/svg-mock.js',
+	},
+	testEnvironment: 'jsdom',
+	verbose: true,
+	moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+	testPathIgnorePatterns: ['/node_modules/', '/cypress/'],
+	setupFilesAfterEnv: ['<rootDir>/jest/setup.ts'],
+	transform: {
+		'^.+\\.(ts|tsx)$': [
+			'ts-jest',
+			{
+				tsconfig: {
+					jsx: 'react-jsx',
+				},
+			},
+		],
+	},
+};

jest/setup.ts

@@ -0,0 +1,9 @@
+import '@testing-library/jest-dom';
+
+// Polyfills for Node.js environment
+if (typeof global.TextEncoder === 'undefined') {
+	global.TextEncoder = require('util').TextEncoder;
+}
+if (typeof global.TextDecoder === 'undefined') {
+	global.TextDecoder = require('util').TextDecoder;
+}

jest/svg-mock.js

@@ -0,0 +1,2 @@
+const React = require('react');
+module.exports = React.forwardRef((props, ref) => React.createElement('svg', { ...props, ref }));