Enable ESLint Plugins for Testing Library and Jest-DOM

Author: cajieh

frontend/.eslintrc.js

@@ -26,7 +26,15 @@ module.exports = {
     extraFileExtensions: ['.json'],
     tsconfigRootDir: './',
   },
-  plugins: ['react', 'react-hooks', '@typescript-eslint', 'graphql', 'eslint-plugin-tsdoc'],
+  plugins: [
+    'react',
+    'react-hooks',
+    '@typescript-eslint',
+    'graphql',
+    'eslint-plugin-tsdoc',
+    'testing-library',
+    'jest-dom',
+  ],
   rules: {
     camelcase: [
       'error',
@@ -129,4 +137,26 @@ module.exports = {
     VoidFunction: 'readonly',
     RequestInit: 'readonly',
   },
+  overrides: [
+    {
+      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+      plugins: ['testing-library', 'jest-dom'],
+      extends: ['plugin:testing-library/react', 'plugin:jest-dom/recommended'],
+      rules: {
+        // NOTE: Using eslint-plugin-testing-library v3.x (compatible with ESLint 6)
+        // Some newer rules are not available in this version:
+        // - prefer-user-event (added in v5.x) - Use code review to enforce userEvent over fireEvent
+        // - no-node-access (added in v5.x) - Use code review to enforce no container usage
+        // - prefer-query-by-disappearance - Not available in v3.x
+        //
+        // Available rules being enforced:
+        'testing-library/await-fire-event': 'warn', // Encourages userEvent which is always async
+        'testing-library/prefer-find-by': 'error', // Similar to prefer-query-by-disappearance
+        'testing-library/no-await-sync-query': 'error',
+        'testing-library/no-wait-for-empty-callback': 'error',
+        'testing-library/prefer-screen-queries': 'error',
+        'testing-library/prefer-presence-queries': 'error',
+      },
+    },
+  ],
 };

frontend/package.json

@@ -265,6 +265,8 @@
     "cypress-jest-adapter": "^0.1.1",
     "cypress-multi-reporters": "^2.0.5",
     "esbuild-loader": "^4.4.2",
+    "eslint-plugin-jest-dom": "^4.0.3",
+    "eslint-plugin-testing-library": "^3.10.0",
     "file-loader": "6.2.0",
     "find-up": "4.x",
     "fork-ts-checker-webpack-plugin": "9.1.0",

frontend/packages/.eslintrc.js

@@ -1,4 +1,26 @@
 module.exports = {
   root: true,
   extends: ['plugin:console/react-typescript-prettier'],
+  plugins: ['testing-library', 'jest-dom'],
+  overrides: [
+    {
+      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+      extends: ['plugin:testing-library/react', 'plugin:jest-dom/recommended'],
+      rules: {
+        // NOTE: Using eslint-plugin-testing-library v3.x (compatible with ESLint 6)
+        // Some newer rules are not available in this version:
+        // - prefer-user-event (added in v5.x) - Use code review to enforce userEvent over fireEvent
+        // - no-node-access (added in v5.x) - Use code review to enforce no container usage
+        // - prefer-query-by-disappearance - Not available in v3.x
+        //
+        // Available rules being enforced:
+        'testing-library/await-fire-event': 'warn', // Encourages userEvent which is always async
+        'testing-library/prefer-find-by': 'error', // Similar to prefer-query-by-disappearance
+        'testing-library/no-await-sync-query': 'error',
+        'testing-library/no-wait-for-empty-callback': 'error',
+        'testing-library/prefer-screen-queries': 'error',
+        'testing-library/prefer-presence-queries': 'error',
+      },
+    },
+  ],
 };