feat(eslint-config-react-app): support ESLint 8.x (#11375)

Author: MichaelDeBoey

package-lock.json

@@ -25,7 +25,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "alex": "^8.2.0",
-    "eslint": "^7.30.0",
+    "eslint": "^8.3.0",
     "execa": "^5.1.1",
     "fs-extra": "^9.0.1",
     "get-port": "^5.1.1",

package.json

@@ -16,10 +16,10 @@ The easiest way to use this configuration is with [Create React App](https://git
 
 If you want to use this ESLint configuration in a project not built with Create React App, you can install it with the following steps.
 
-First, install this package, ESLint and the necessary plugins. Note that when using npm 7 (or greater) this step is not required, as npm will automatically install peer dependencies.
+First, install this package and ESLint.
 
 ```sh
-npm install --save-dev eslint-config-react-app @babel/eslint-parser@^7.14.7 @typescript-eslint/eslint-plugin@^4.0.0 @typescript-eslint/parser@^4.0.0 babel-preset-react-app@^10.0.0 eslint@^7.5.0 eslint-plugin-flowtype@^5.2.0 eslint-plugin-import@^2.22.0 eslint-plugin-jsx-a11y@^6.3.1 eslint-plugin-react@^7.20.3 eslint-plugin-react-hooks@^4.0.8
+npm install --save-dev eslint-config-react-app eslint@^8.0.0
 ```
 
 Then create a file named `.eslintrc.json` with following contents in the root folder of your project:
@@ -36,13 +36,7 @@ That's it! You can override the settings from `eslint-config-react-app` by editi
 
 This config also ships with optional Jest rules for ESLint (based on [`eslint-plugin-jest`](https://github.com/jest-community/eslint-plugin-jest)).
 
-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 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.
+You can enable these rules by adding the Jest config to the `extends` array in your ESLint config.
 
 ```json
 {

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

@@ -31,18 +31,31 @@ module.exports = {
         'jest/no-jasmine-globals': 'error',
         'jest/no-jest-import': 'error',
         'jest/no-mocks-import': 'error',
-        'jest/valid-describe': 'error',
+        'jest/valid-describe-callback': '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-await-sync-query': 'error',
+        'testing-library/no-container': 'error',
+        'testing-library/no-debugging-utils': 'error',
         'testing-library/no-dom-import': ['error', 'react'],
+        'testing-library/no-node-access': 'error',
+        'testing-library/no-promise-in-fire-event': 'error',
+        'testing-library/no-render-in-setup': 'error',
+        'testing-library/no-unnecessary-act': 'error',
         'testing-library/no-wait-for-empty-callback': 'error',
+        'testing-library/no-wait-for-multiple-assertions': 'error',
+        'testing-library/no-wait-for-side-effects': 'error',
         'testing-library/no-wait-for-snapshot': 'error',
+        'testing-library/prefer-find-by': 'error',
+        'testing-library/prefer-presence-queries': 'error',
+        'testing-library/prefer-query-by-disappearance': 'error',
+        'testing-library/prefer-screen-queries': 'error',
+        'testing-library/render-result-naming-convention': 'error',
       },
     },
   ],

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

@@ -17,23 +17,23 @@
     "jest.js"
   ],
   "peerDependencies": {
-    "eslint": "^7.30.0"
+    "eslint": "^8.0.0"
   },
   "dependencies": {
-    "@babel/core": "^7.14.2",
-    "@babel/eslint-parser": "^7.14.7",
-    "@rushstack/eslint-patch": "^1.0.6",
-    "@typescript-eslint/eslint-plugin": "^4.0.0",
-    "@typescript-eslint/parser": "^4.0.0",
+    "@babel/core": "^7.16.0",
+    "@babel/eslint-parser": "^7.16.3",
+    "@rushstack/eslint-patch": "^1.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/parser": "^5.5.0",
     "babel-preset-react-app": "^10.0.0",
     "confusing-browser-globals": "^1.0.10",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "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-testing-library": "^3.9.0"
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jest": "^25.3.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-testing-library": "^5.0.1"
   },
   "engines": {
     "node": ">=14.0.0"

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

@@ -35,16 +35,16 @@
     "lib/index.js"
   ],
   "devDependencies": {
-    "@babel/code-frame": "^7.12.13",
-    "@babel/core": "^7.14.2",
+    "@babel/code-frame": "^7.16.0",
+    "@babel/core": "^7.16.0",
     "anser": "^1.4.10",
     "babel-jest": "^27.1.0",
     "babel-loader": "^8.2.2",
     "babel-preset-react-app": "^10.0.0",
     "chalk": "^2.4.2",
     "chokidar": "^3.5.1",
     "cross-env": "^7.0.3",
-    "eslint": "^7.30.0",
+    "eslint": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
     "flow-bin": "^0.116.0",
     "html-entities": "^1.3.1",

packages/react-error-overlay/package.json

@@ -28,7 +28,7 @@
   },
   "types": "./lib/react-app.d.ts",
   "dependencies": {
-    "@babel/core": "^7.14.2",
+    "@babel/core": "^7.16.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
     "@svgr/webpack": "^5.5.0",
     "babel-jest": "^27.1.0",
@@ -43,9 +43,9 @@
     "css-minimizer-webpack-plugin": "^3.0.2",
     "dotenv": "^9.0.2",
     "dotenv-expand": "^5.1.0",
-    "eslint": "^7.30.0",
+    "eslint": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
-    "eslint-webpack-plugin": "^2.5.4",
+    "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
     "html-webpack-plugin": "^5.3.2",