✅(app-desk) install jest

Jest is a JavaScript Testing Framework, usefull to test React
components and to do unit testing.

.github/workflows/people.yml

@@ -58,6 +58,27 @@ jobs:
             exit 1
           fi
 
+  test-front-desk:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: src/frontend/app/desk
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+          cache-dependency-path: src/frontend/app/desk/yarn.lock
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Test Desk App
+        env:
+          CI: true
+        run: yarn test
+
   build-front-desk:
     runs-on: ubuntu-latest
     defaults:

src/frontend/app/desk/.eslintrc.js

@@ -1,16 +1,16 @@
 module.exports = {
-  extends: [
-    'next',
-    'plugin:prettier/recommended',
-    'plugin:@typescript-eslint/recommended',
-  ],
+  extends: ['next', 'plugin:prettier/recommended'],
   settings: {
     next: {
-      rootDir: 'src/frontend/app/desk',
+      rootDir: __dirname,
+    },
+  },
+  parserOptions: {
+    babelOptions: {
+      presets: [require.resolve('next/babel')],
     },
   },
   rules: {
-    '@typescript-eslint/no-explicit-any': 'error',
     'block-scoped-var': 'error',
     'no-alert': 'error',
     'import/no-duplicates': ['error', { considerQueryString: false }],
@@ -30,7 +30,7 @@ module.exports = {
         ],
         pathGroups: [
           {
-            pattern: '+@/**',
+            pattern: '@/**',
             group: 'internal',
           },
         ],
@@ -51,4 +51,63 @@ module.exports = {
       },
     ],
   },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/recommended-requiring-type-checking',
+      ],
+      parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.json'],
+      },
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'error',
+        '@typescript-eslint/no-non-null-assertion': 'error',
+        'sort-imports': [
+          'error',
+          {
+            ignoreDeclarationSort: true,
+          },
+        ],
+      },
+    },
+    {
+      files: ['*.spec.*', '*.test.*', '**/__mock__/**/*'],
+      plugins: ['jest'],
+      extends: ['plugin:jest/recommended', 'plugin:testing-library/react'],
+      rules: {
+        '@typescript-eslint/ban-types': 'off',
+        '@typescript-eslint/no-empty-function': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        '@typescript-eslint/no-unsafe-argument': 'off',
+        '@typescript-eslint/no-unsafe-assignment': 'off',
+        '@typescript-eslint/no-unsafe-call': 'off',
+        '@typescript-eslint/no-unsafe-member-access': 'off',
+        '@typescript-eslint/no-unsafe-return': 'off',
+        'testing-library/no-await-sync-events': [
+          'error',
+          { eventModules: ['fire-event'] },
+        ],
+        'testing-library/await-async-events': [
+          'error',
+          {
+            eventModule: 'userEvent',
+          },
+        ],
+        'testing-library/no-manual-cleanup': 'off',
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          { varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
+        ],
+        'react/display-name': 0,
+        'jest/expect-expect': 'error',
+        '@typescript-eslint/unbound-method': 'off',
+        'jest/unbound-method': 'error',
+      },
+    },
+  ],
 };

src/frontend/app/desk/jest.config.ts

@@ -0,0 +1,15 @@
+import type { Config } from 'jest';
+import nextJest from 'next/jest.js';
+
+const createJestConfig = nextJest({
+  dir: './',
+});
+
+// Add any custom config to be passed to Jest
+const config: Config = {
+  coverageProvider: 'v8',
+  testEnvironment: 'jsdom',
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config);

src/frontend/app/desk/package.json

@@ -9,27 +9,36 @@
     "start": "next start",
     "lint": "next lint",
     "prettier": "prettier --write .",
-    "stylelint": "stylelint \"**/*.css\""
+    "stylelint": "stylelint \"**/*.css\"",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "dependencies": {
     "@openfun/cunningham-react": "2.4.0",
     "next": "14.0.4",
-    "react": "18",
-    "react-dom": "18"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/node": "20",
-    "@types/react": "18",
-    "@types/react-dom": "18",
+    "@testing-library/jest-dom": "6.2.0",
+    "@testing-library/react": "14.1.2",
+    "@types/jest": "29.5.11",
+    "@types/node": "20.10.8",
+    "@types/react": "18.2.47",
+    "@types/react-dom": "18.2.18",
     "@typescript-eslint/eslint-plugin": "6.18.1",
     "eslint": "8.0.1",
     "eslint-config-next": "14.0.4",
     "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-jest": "27.6.2",
     "eslint-plugin-prettier": "5.1.2",
+    "eslint-plugin-testing-library": "6.2.0",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "prettier": "3.1.1",
     "stylelint": "16.1.0",
     "stylelint-config-standard": "36.0.0",
     "stylelint-prettier": "5.0.0",
-    "typescript": "5"
+    "typescript": "5.3.3"
   }
 }

src/frontend/app/desk/src/app/__tests__/page.test.tsx

@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import Page from '../page';
+
+describe('Page', () => {
+  it('checks Page rendering', () => {
+    render(<Page />);
+
+    expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
+      'Hello world!',
+    );
+
+    expect(
+      screen.getByRole('button', {
+        name: 'Button Cunningham',
+      }),
+    ).toBeInTheDocument();
+  });
+});