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

BREAKING CHANGE: Requires ESLint@^8.0.0

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.0.0",
     "execa": "1.0.0",
     "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

@@ -39,10 +39,17 @@ module.exports = {
         // 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-debug': '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-unnecessary-act': 'error',
         'testing-library/no-wait-for-empty-callback': 'error',
-        'testing-library/no-wait-for-snapshot': 'error',
+        'testing-library/prefer-find-by': '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.15.8",
+    "@babel/eslint-parser": "^7.15.8",
+    "@rushstack/eslint-patch": "^1.0.8",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.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": "^5.9.2",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jest": "^25.0.5",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-testing-library": "^4.12.4"
   },
   "engines": {
     "node": ">=14.0.0"

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

@@ -44,7 +44,7 @@
     "chalk": "2.4.2",
     "chokidar": "^3.5.1",
     "cross-env": "7.0.3",
-    "eslint": "^7.30.0",
+    "eslint": "^8.0.0",
     "eslint-config-react-app": "^6.0.0",
     "flow-bin": "^0.116.0",
     "html-entities": "1.3.1",

packages/react-error-overlay/package.json

@@ -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.0.0",
     "eslint-config-react-app": "^6.0.0",
-    "eslint-webpack-plugin": "^2.5.4",
+    "eslint-webpack-plugin": "^3.0.1",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
     "html-webpack-plugin": "5.3.2",