vscode-eslint: Unable to detect Jest version in create-react-app project

Error Log:

[Info  - 11:26:57 AM] ESLint server is starting
[Info  - 11:26:57 AM] ESLint server running in node v12.14.1
[Info  - 11:26:57 AM] ESLint server is running.
[Info  - 11:26:58 AM] ESLint library loaded from: /Users/me/source/spellbot/dash/node_modules/eslint/lib/api.js
[Error - 11:27:00 AM] ESLint stack trace:
[Error - 11:27:00 AM] Error: Error while loading rule 'jest/no-deprecated-functions': Unable to detect Jest version - please ensure jest package is installed, or otherwise set version explicitly
Occurred while linting /Users/me/source/spellbot/dash/src/App.tsx
    at detectJestVersion (/Users/me/source/spellbot/dash/node_modules/eslint-plugin-jest/lib/rules/no-deprecated-functions.js:38:9)
    at create (/Users/me/source/spellbot/dash/node_modules/eslint-plugin-jest/lib/rules/no-deprecated-functions.js:61:256)
    at Object.create (/Users/me/source/spellbot/dash/node_modules/@typescript-eslint/experimental-utils/dist/eslint-utils/RuleCreator.js:13:24)
    at createRuleListeners (/Users/me/source/spellbot/dash/node_modules/eslint/lib/linter/linter.js:761:21)
    at /Users/me/source/spellbot/dash/node_modules/eslint/lib/linter/linter.js:931:31
    at Array.forEach (<anonymous>)
    at runRules (/Users/me/source/spellbot/dash/node_modules/eslint/lib/linter/linter.js:876:34)
    at Linter._verifyWithoutProcessors (/Users/me/source/spellbot/dash/node_modules/eslint/lib/linter/linter.js:1173:31)
    at Linter._verifyWithConfigArray (/Users/me/source/spellbot/dash/node_modules/eslint/lib/linter/linter.js:1271:21)
    at Linter.verify (/Users/me/source/spellbot/dash/node_modules/eslint/lib/linter/linter.js:1226:25)

tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

.eslintrc.js:

module.exports = {
  extends: [
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'plugin:jest/recommended',
    'prettier',
    'prettier/react',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  plugins: ['react', '@typescript-eslint', 'jest'],
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
    project: './dash/tsconfig.json',
  },
  rules: {
    'semi': ['error', 'never'],
    'linebreak-style': 'off',
    'prettier/prettier': ['error', {
      endOfLine: 'auto',
      'semi': false,
    }],
  },
};

package.json:

{
  "name": "dash",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^14.14.14",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.6",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "format": "prettier --write src/**/*.ts{,x}",
    "lint": "tsc --noEmit && eslint src/**/*.ts{,x}"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.10.0",
    "@typescript-eslint/parser": "^4.10.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-airbnb-typescript": "^12.0.0",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.0",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "4.0.0",
    "prettier": "^2.2.1"
  }
}

settings.json:

{
[...]
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.formatOnSave": false,
  "eslint.codeAction.disableRuleComment": { "enable": true, "location": "separateLine" },
  "eslint.codeAction.showDocumentation": { "enable": true },
  "eslint.codeActionsOnSave.mode": "all",
  "eslint.format.enable": false,
  "eslint.lintTask.enable": false,
  "eslint.lintTask.options": ".",
  "eslint.migration.2_x": "on",
  "eslint.trace.server": "off",
[...]
}

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 4
Comments: 17 (6 by maintainers)

Commits related to this issue

eslint: Specify Jest version in config. This fixes a problem where format-on-save had stopped working for me, probably after updating vscode-eslint. I'd been getting this error: ``` Error: Error whi... — committed to chrisbobbe/zulip-mobile by chrisbobbe 3 years ago
eslint: Specify Jest version in config. This fixes a problem where format-on-save had stopped working for me, probably after updating vscode-eslint. I'd been getting this error: ``` Error: Error whi... — committed to chrisbobbe/zulip-mobile by chrisbobbe 3 years ago
fix: lint settings Related https://github.com/microsoft/vscode-eslint/issues/1145 — committed to nain93/react-native-kakao-login by hyochan 2 years ago

Most upvoted comments

You can define this in the root of you eslint config:


"settings": {
	"jest": {
		"version": 26
	}
},

It fixed it for me. EDIT: Change 26 to you jest version.

+46

Ranguna on Feb 17, 2021

@lexicalunit this can very likely be addressed using the eslint.workingDirectories setting. If in the terminal you need to change directory into the sub directory you need to let VS Code now about this. By default VS Code executes ESLint in the workspace folder root.

+11

dbaeumer on Jan 5, 2021

@dbaeumer Power’s back on and I was able to quickly test this. It works! 🎉

I added the following to my .eslintrc.js file in the react app’s root, which is a subdirectory off the root of my repository:

module.exports = {

[...]

  settings: {
    jest: { version: 26 }
  },

[...]

}

And now when I open up the root of the repository in vscode my eslint plugin seems to work just fine.

Full context and solution for anyone else who has this issue:

From the root of my repository I have a Python project and then a subdirectory which contains my react application.

.
├── dash/
│   ├── .eslintrc.js
│   ├── .prettierrc
│   ├── package.json
│   ├── tsconfig.json
│   ├── node_modules/
│   ├── public/
│   └── src/
├── dist/
├── docs/
├── src/
└── tests/

And my dash/.eslintrc.js contains:

module.exports = {
  extends: [
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'plugin:jest/recommended',
    'prettier',
    'prettier/react',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  settings: {
    jest: { version: 26 }
  },
  plugins: ['react', '@typescript-eslint', 'jest'],
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
    project: `${__dirname}/tsconfig.json`,
  },
  rules: {
    'semi': ['error', 'never'],
    'linebreak-style': 'off',
    'no-param-reassign': ['error', { 'props': false }],
    'prettier/prettier': ['error', {
      endOfLine: 'auto',
      'semi': false,
    }],
  },
}

My dash/.prettierrc contains:

{
  "endOfLine": "auto",
  "semi": false
}

And the relevant parts of my dash/package.json include:

{
  "name": "dash",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000/",
  "dependencies": {
    [...]
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "format": "prettier --write src/**/*.ts{,x}",
    "lint": "tsc --noEmit && eslint src/**/*.ts{,x}"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }
}

And in my vscode I have the following relevant settings changes from the default:

{

  [...]

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false
  },
  "[typescript]": {
    "editor.detectIndentation": false,
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.detectIndentation": false,
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.tabSize": 2
  },
 "javascript.validate.enable": false,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.formatOnSave": false,

  [...]

}

My installed vscode extensions include:

dbaeumer.vscode-eslint
esbenp.prettier-vscode
HookyQR.beautify
mgmcdermott.vscode-language-babel
mike-co.import-sorter
mohsen1.prettify-json
richie5um2.vscode-sort-json

lexicalunit on Feb 18, 2021

Guys, It’s missing to Jest a devDependencie, that was the fix on my end

npm install --save-dev jest

deyvisonsouto on Feb 2, 2021

ESLint has many ways to store configurations including package.json files. So simply looking for eslintrc might not be good enough.

There is an auto mode for the eslint.workingDirectories which does some probing but might not work in all cases. Auto is not the default since it might break exising users relying on a different working directory to resolve the ignore file.

dbaeumer on Jan 5, 2021