feat(eslint-config-react-app): Add jest & testing-library rules (#8963)

Author: MichaelDeBoey

packages/eslint-config-react-app/README.md

@@ -39,7 +39,7 @@ This config also ships with optional Jest rules for ESLint (based on [`eslint-pl
 You'll first need to add the ESLint plugin for Jest (if you don't already have it installed).
 
 ```sh
-npm install --save-dev eslint-plugin-jest@^24.0.0
+npm install --save-dev eslint-plugin-jest@^24.0.0 eslint-plugin-testing-library&^3.9.0
 ```
 
 You can then enable these rules by adding the Jest config to the `extends` array in your ESLint config.

packages/eslint-config-react-app/jest.js

@@ -12,21 +12,34 @@
 // and we try not to use "ERROR" level at all.
 
 module.exports = {
-  plugins: ['jest'],
+  plugins: ['jest', 'testing-library'],
   overrides: [
     {
       files: ['**/__tests__/**/*', '**/*.{spec,test}.*'],
       env: {
         'jest/globals': true,
       },
       // A subset of the recommended rules:
-      // https://github.com/jest-community/eslint-plugin-jest#rules
       rules: {
-        'jest/expect-expect': 'warn',
-        'jest/no-identical-title': 'warn',
-        'jest/valid-describe': 'warn',
-        'jest/valid-expect': 'warn',
-        'jest/valid-expect-in-promise': 'warn',
+        // https://github.com/jest-community/eslint-plugin-jest
+        'jest/no-conditional-expect': 'error',
+        'jest/no-identical-title': 'error',
+        'jest/no-interpolation-in-snapshots': 'error',
+        'jest/no-jasmine-globals': 'error',
+        'jest/no-jest-import': 'error',
+        'jest/no-mocks-import': 'error',
+        'jest/valid-describe': 'error',
+        'jest/valid-expect': 'error',
+        'jest/valid-expect-in-promise': 'error',
+        'jest/valid-title': 'warn',
+
+        // https://github.com/testing-library/eslint-plugin-testing-library
+        'testing-library/await-async-query': 'error',
+        'testing-library/await-async-utils': 'error',
+        'testing-library/no-await-sync-query': 'warn',
+        'testing-library/no-dom-import': ['error', 'react'],
+        'testing-library/no-wait-for-empty-callback': 'error',
+        'testing-library/no-wait-for-snapshot': 'error',
       },
     },
   ],

packages/eslint-config-react-app/package.json

@@ -26,7 +26,16 @@
     "eslint-plugin-jest": "^24.0.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.8"
+    "eslint-plugin-react-hooks": "^4.0.8",
+    "eslint-plugin-testing-library": "^3.9.0"
+  },
+  "peerDependenciesMeta": {
+    "eslint-plugin-jest": {
+      "optional": true
+    },
+    "eslint-plugin-testing-library": {
+      "optional": true
+    }
   },
   "peerDependenciesMeta": {
     "eslint-plugin-jest": {

packages/react-error-overlay/.eslintrc

@@ -1,5 +1,5 @@
 {
-  "extends": "react-app",
+  "extends": ["react-app", "react-app/jest"],
   "rules": {
     "curly": "warn"
   }

packages/react-error-overlay/package.json

@@ -48,10 +48,11 @@
     "eslint-config-react-app": "^5.2.1",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jest": "^24.0.1",
+    "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.2",
+    "eslint-plugin-testing-library": "^3.9.2",
     "flow-bin": "^0.116.0",
     "html-entities": "1.3.1",
     "jest": "26.4.2",

packages/react-scripts/package.json

@@ -48,10 +48,11 @@
     "eslint-config-react-app": "^5.2.1",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jest": "^24.0.1",
+    "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.2",
+    "eslint-plugin-testing-library": "^3.9.2",
     "eslint-webpack-plugin": "^2.1.0",
     "file-loader": "6.1.0",
     "fs-extra": "^9.0.0",