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

[lexicalunit]

I'm using create-react-app v4.0.1.

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",
[...]
}

[lexicalunit]

Also, with this configuration I can not run yarn lint:

± yarn lint
yarn run v1.22.10
$ tsc --noEmit && eslint src/**/*.ts{,x}

/Users/me/source/spellbot/dash/src/App.tsx
  0:0  error  Parsing error: Cannot read file '/users/me/source/spellbot/dash/dash/tsconfig.json'

[...]

But I can get yarn lint to work if I modify .eslintrc.js like so:

  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
    project: './tsconfig.json',
  },

Note that I changed project from ./dash/tsconfig.json to ./tsconfig.json. The actual location of this file on my system is at $REPO_ROOT/dash, which is where all my React app code is also located.

With this change, yarn lint works:

± yarn lint
yarn run v1.22.10
$ tsc --noEmit && eslint src/**/*.ts{,x}
✨  Done in 4.90s.

But now vscode-eslint fails in a different way:

It's looking for my tsconfig.json file in the wrong location now.

[lexicalunit]

Using project: './tsconfig.json' and if I open the dash directory directly instead of the repository root, then both yarn lint and vscode-eslint seem happy.

So I guess my real issue is that I have a react app that is not at the root of the repository and vscode-eslint is getting confused about how to resolve the path './tsconfig.json' correctly?

Is there something I can do to resolve this better?

[Ranguna]

Should this issue be opened in https://github.com/jest-community/eslint-plugin-jest instead ?

[lexicalunit]

@Ranguna i don’t think it has anything to do with that package. Everything works fine on the command line. It’s only in vscode that issues arise. If I open the project at the repo root it doesn’t work. If I open the project at the sub directory, it works.

[Ranguna]

The plugin tries to get jest's version from a path starting at the cwd, probably vscode executes eslint from the root of your workspace directory.

I think it's that eslint's plugin fault into thinking that the cwd will always be the root of the project where node_modules is located.

Vscode is just executing commands here, I'm not really sure what can be done on this side. But maybe I'm wrong.

[dbaeumer]

@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.

[lexicalunit]

@dbaeumer What if the editor just ran the commands from the base directory of where the eslintrc file is located?

[dbaeumer]

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.

[deyvisonsouto]

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

npm install --save-dev jest

[dbaeumer]

Thanks for the suggestion.