From a670c12e91b39d747ae666cfc764d7485f1d75e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Tue, 5 May 2020 22:59:48 +0200 Subject: [PATCH] feat(eslint-config-react-app): Add jest & testing-library rules --- packages/eslint-config-react-app/README.md | 4 +-- packages/eslint-config-react-app/jest.js | 27 ++++++++++++++----- packages/eslint-config-react-app/package.json | 11 +++++++- packages/react-error-overlay/.eslintrc | 2 +- packages/react-error-overlay/package.json | 3 ++- packages/react-scripts/package.json | 3 ++- 6 files changed, 37 insertions(+), 13 deletions(-) diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md index 7467c3a1d68..daacb2c9b33 100644 --- a/packages/eslint-config-react-app/README.md +++ b/packages/eslint-config-react-app/README.md @@ -19,7 +19,7 @@ If you want to use this ESLint configuration in a project not built with Create First, install this package, ESLint and the necessary plugins. ```sh -npm install --save-dev eslint-config-react-app @typescript-eslint/eslint-plugin@^4.0.0 @typescript-eslint/parser@^4.0.0 babel-eslint@^10.0.0 eslint@^7.5.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 +npm install --save-dev eslint-config-react-app @typescript-eslint/eslint-plugin@^4.0.0 @typescript-eslint/parser@^4.0.0 babel-eslint@^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 ``` Then create a file named `.eslintrc.json` with following contents in the root folder of your project: @@ -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. diff --git a/packages/eslint-config-react-app/jest.js b/packages/eslint-config-react-app/jest.js index 43ab8dc51cb..289068635df 100644 --- a/packages/eslint-config-react-app/jest.js +++ b/packages/eslint-config-react-app/jest.js @@ -12,7 +12,7 @@ // and we try not to use "ERROR" level at all. module.exports = { - plugins: ['jest'], + plugins: ['jest', 'testing-library'], overrides: [ { files: ['**/__tests__/**/*', '**/*.{spec,test}.*'], @@ -20,13 +20,26 @@ module.exports = { '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', }, }, ], diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index f0964ed72de..cc5d8d80d7a 100644 --- a/packages/eslint-config-react-app/package.json +++ b/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 + } }, "dependencies": { "confusing-browser-globals": "^1.0.9" diff --git a/packages/react-error-overlay/.eslintrc b/packages/react-error-overlay/.eslintrc index 9dadba0d985..c0c3c776e93 100644 --- a/packages/react-error-overlay/.eslintrc +++ b/packages/react-error-overlay/.eslintrc @@ -1,5 +1,5 @@ { - "extends": "react-app", + "extends": ["react-app", "react-app/jest"], "rules": { "curly": "warn" } diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index 34b45faa922..5ab4bbb7b8d 100644 --- a/packages/react-error-overlay/package.json +++ b/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", diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index ebfb08c905e..a0e5a875235 100644 --- a/packages/react-scripts/package.json +++ b/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",