Setting up unit testing: Add Jest configuration, tests, and CI workflow (#5)

This pull request introduces a comprehensive testing setup for the
project, including configuration for Jest, new test scripts, and initial
test cases for the `WelcomeScreen` component.

Testing configuration and setup:

*
[`.github/workflows/test.yml`](diffhunk://#diff-faff1af3d8ff408964a57b2e475f69a6b7c7b71c9978cccc8f471798caac2c88R1-R37):
Added a GitHub Actions workflow to run tests and linting on every push
and pull request to the `main` branch.
*
[`jest.config.cjs`](diffhunk://#diff-17d090b5ad85e342cd83ee805ef525ea9307d4be9588ac4a7db60042ef6c6d14R1-R24):
Created a Jest configuration file to set up the testing environment,
module name mappings, and coverage collection.
*
[`tsconfig.test.json`](diffhunk://#diff-e4fb77850197aa340b1f8f426bb0d445c854e20f0a3dd184050ed555fae92713R1-R10):
Added a TypeScript configuration file for tests, specifying compiler
options and including test files.
*
[`src/setupTests.ts`](diffhunk://#diff-84f6be72ed45f1bf4cdbd441d0bd824e38270a7599bd4eac2981b05eb7ad9d29R1):
Imported `@testing-library/jest-dom` to extend Jest matchers for DOM
node assertions.

Test scripts and dependencies:

*
[`package.json`](diffhunk://#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L10-R13):
Added test scripts (`test`, `test:watch`, `test:coverage`) and necessary
testing dependencies (`jest`, `ts-jest`, `@testing-library/react`,
etc.).
[[1]](diffhunk://#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L10-R13)
[[2]](diffhunk://#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R31-R34)
[[3]](diffhunk://#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R43-R48)

Initial test cases:

*
[`src/components/__tests__/WelcomeScreen.test.tsx`](diffhunk://#diff-48e4b4f1541e0008acd4d6582d5aa07acf9ccc87051f5fb80fdeee891921c535R1-R28):
Added test cases for the `WelcomeScreen` component, including rendering
tests, event handling tests, and style checks.Introduced Jest-based
testing setup with `jest.config.cjs` and required dependencies. Added
example test for `WelcomeScreen` component in
`src/components/__tests__`. Configured GitHub Actions workflow for
running tests, coverage, and linting on push and pull requests to the
main branch.

Author: shahariaazam

.github/workflows/CI.yml

@@ -0,0 +1,52 @@
+name: CI
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  test:
+    name: test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests with coverage
+        run: npm run test:coverage
+
+      # Optional: Add step to save coverage report as an artifact
+      - name: Upload coverage report
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage
+          path: coverage/
+          retention-days: 7
+
+  lint:
+    name: lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linting
+        run: npm run lint

.gitignore

@@ -23,4 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 
-.env
+.env
+coverage

eslint.config.js

@@ -5,24 +5,30 @@ import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 
 export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
+    { ignores: ['dist', 'coverage/**'] },  // Added coverage directory to ignores
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ['**/*.{ts,tsx}'],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: {
+                ...globals.browser,
+                React: 'readonly',  // Add React global
+            },
+        },
+        plugins: {
+            'react-hooks': reactHooks,
+            'react-refresh': reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            'react-refresh/only-export-components': [
+                'warn',
+                { allowConstantExport: true },
+            ],
+            'no-useless-catch': 'error',  // This is for the API file errors
+            // Optional: If you want to disable the hooks exhaustive-deps warning
+            // 'react-hooks/exhaustive-deps': 'warn'  // or 'off' if you want to disable it
+        },
     },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-)
+)

jest.config.cjs

@@ -0,0 +1,24 @@
+/** @type {import('jest').Config} */
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+    moduleNameMapper: {
+        '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+        '^@/(.*)$': '<rootDir>/src/$1'
+    },
+    setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+    transform: {
+        '^.+\\.tsx?$': ['ts-jest', {
+            tsconfig: 'tsconfig.test.json'
+        }]
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+    rootDir: '.',
+    collectCoverage: true,
+    collectCoverageFrom: [
+        'src/**/*.{ts,tsx}',
+        '!src/**/*.d.ts',
+        '!src/main.tsx',
+        '!src/vite-env.d.ts'
+    ],
+};