Remove ESLint extends and add Jest rules (facebook#9587)

mrmckeb · Rowan Crawford · commit 93c18c0a14f3 · 2021-06-01T15:47:49.000+12:00
diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md
@@ -24,6 +24,5 @@ You can adjust various development and production settings by setting environmen
 | GENERATE_SOURCEMAP      | 🚫 Ignored  |  ✅ Used   | When set to `false`, source maps are not generated for a production build. This solves out of memory (OOM) issues on some smaller machines.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | INLINE_RUNTIME_CHUNK    | 🚫 Ignored  |  ✅ Used   | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP.                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | IMAGE_INLINE_SIZE_LIMIT | 🚫 Ignored  |  ✅ Used   | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| EXTEND_ESLINT           |   ✅ Used   |  ✅ Used   | When set to `true`, user provided ESLint configs will be used by `eslint-loader`. Note that any rules set to `"error"` will stop the application from building.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | FAST_REFRESH            |   ✅ Used   | 🚫 Ignored | When set to `false`, disables experimental support for Fast Refresh to allow you to tweak your components in real time without reloading the page.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | TSC_COMPILE_ON_ERROR    |   ✅ Used   |  ✅ Used   | When set to `true`, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
diff --git a/docusaurus/docs/setting-up-your-editor.md b/docusaurus/docs/setting-up-your-editor.md
@@ -26,16 +26,15 @@ Note that even if you customise your ESLint config, these changes will **only af
 
 If you want to enforce a coding style for your project, consider using [Prettier](https://github.com/jlongster/prettier) instead of ESLint style rules.
 
-### Experimental: Extending the ESLint config
+### Extending or replacing the default ESLint config
 
-We recognise that in some cases, further customisation is required. It is now possible to extend the base ESLint config by setting the `EXTEND_ESLINT` environment variable to `true`. See [advanced configuration](advanced-configuration.md) for more information on available environment variables.
-
-Note that any rules set to `"error"` will stop the project from building.
+You can extend our base ESLint config, or replace it completely if you need.
 
 There are a few things to remember:
 
 1. We highly recommend extending the base config, as removing it could introduce hard-to-find issues.
 1. When working with TypeScript, you'll need to provide an `overrides` object for rules that should _only_ target TypeScript files.
+1. It's important to note that any rules that are set to `"error"` will stop the project from building.
 
 In the below example:
 
diff --git a/packages/cra-template-typescript/template.json b/packages/cra-template-typescript/template.json
@@ -10,6 +10,9 @@
       "@types/jest": "^26.0.0",
       "typescript": "^3.9.5",
       "web-vitals": "^0.2.2"
+    },
+    "eslintConfig": {
+      "extends": ["react-app", "react-app/jest"]
     }
   }
 }
diff --git a/packages/cra-template/template.json b/packages/cra-template/template.json
@@ -5,6 +5,9 @@
       "@testing-library/react": "^10.4.3",
       "@testing-library/user-event": "^12.0.11",
       "web-vitals": "^0.2.2"
+    },
+    "eslintConfig": {
+      "extends": ["react-app", "react-app/jest"]
     }
   }
 }
diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md
@@ -32,6 +32,24 @@ Then create a file named `.eslintrc.json` with following contents in the root fo
 
 That's it! You can override the settings from `eslint-config-react-app` by editing the `.eslintrc.json` file. Learn more about [configuring ESLint](http://eslint.org/docs/user-guide/configuring) on the ESLint website.
 
+## Jest rules
+
+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 plugin.
+
+```sh
+npm install --save-dev  eslint-plugin-jest@24.x
+```
+
+You can then enable these rules by adding the Jest config to the `extends` array in your ESLint config.
+
+```json
+{
+  "extends": ["react-app", "react-app/jest"]
+}
+```
+
 ## Accessibility Checks
 
 The following rules from the [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) plugin are activated:
diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js
@@ -10,8 +10,8 @@
 // Inspired by https://github.com/airbnb/javascript but less opinionated.
 
 // We use eslint-loader so even warnings are very visible.
-// This is why we only use "WARNING" level for potential errors,
-// and we don't use "ERROR" level at all.
+// This is why we prefer to use "WARNING" level for potential errors,
+// and we try not to use "ERROR" level at all.
 
 // In the future, we might create a separate list of rules for production.
 // It would probably be more strict.
diff --git a/packages/eslint-config-react-app/jest.js b/packages/eslint-config-react-app/jest.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+// We use eslint-loader so even warnings are very visible.
+// This is why we prefer to use "WARNING" level for potential errors,
+// and we try not to use "ERROR" level at all.
+
+module.exports = {
+  plugins: ['jest'],
+  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',
+      },
+    },
+  ],
+};
diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json
@@ -21,6 +21,7 @@
     "eslint": "^7.0.0",
     "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"
diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json
@@ -48,6 +48,7 @@
     "eslint-config-react-app": "^5.2.1",
     "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",
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
@@ -51,8 +51,6 @@ const webpackDevClientEntry = require.resolve(
 // makes for a smoother build process.
 const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 
-const isExtendingEslintConfig = process.env.EXTEND_ESLINT === 'true';
-
 const imageInlineSizeLimit = parseInt(
   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
 );
@@ -364,15 +362,6 @@ module.exports = function (webpackEnv) {
                 formatter: require.resolve('react-dev-utils/eslintFormatter'),
                 eslintPath: require.resolve('eslint'),
                 resolvePluginsRelativeTo: __dirname,
-                // @remove-on-eject-begin
-                ignore: isExtendingEslintConfig,
-                baseConfig: isExtendingEslintConfig
-                  ? undefined
-                  : {
-                      extends: [require.resolve('eslint-config-react-app')],
-                    },
-                useEslintrc: isExtendingEslintConfig,
-                // @remove-on-eject-end
               },
               loader: require.resolve('eslint-loader'),
             },
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
@@ -49,6 +49,7 @@
     "eslint-loader": "^4.0.2",
     "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",

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,9 @@`
`10`	`10`	`"@types/jest": "^26.0.0",`
`11`	`11`	`"typescript": "^3.9.5",`
`12`	`12`	`"web-vitals": "^0.2.2"`
	`13`	`+ },`
	`14`	`+ "eslintConfig": {`
	`15`	`+ "extends": ["react-app", "react-app/jest"]`
`13`	`16`	`}`
`14`	`17`	`}`
`15`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,9 @@`
`5`	`5`	`"@testing-library/react": "^10.4.3",`
`6`	`6`	`"@testing-library/user-event": "^12.0.11",`
`7`	`7`	`"web-vitals": "^0.2.2"`
	`8`	`+ },`
	`9`	`+ "eslintConfig": {`
	`10`	`+ "extends": ["react-app", "react-app/jest"]`
`8`	`11`	`}`
`9`	`12`	`}`
`10`	`13`	`}`