Standardjs Jest Test Files Show Errors on Vscode With Create Create App

Dimas Maulana Development

14-01-2022

You want to fix issues with ESLint configurations when working with Jest test files in a Create React App project within Visual Studio Code. This problem can occur due to the way ESLint and Jest interact in some setups. To resolve this, you can follow these steps:

Install ESLint Jest Plugin:

First, make sure you have the ESLint Jest plugin installed in your project. You can install it using npm or yarn:
1 2 3

npm install eslint-plugin-jest --save-dev # or yarn add eslint-plugin-jest --dev
Update ESLint Configuration:

Update your ESLint configuration to include the “jest” environment. You can do this in your package.json as you’ve shown or in your .eslintrc file if you have one. Here’s an example of how to add it to your package.json:
1 2 3 4

"standard": { "env": ["jest"], "plugins": ["jest"] }
Or in a .eslintrc.js file:
1 2 3 4 5 6 7

module.exports = { env: { jest: true, }, plugins: ["jest"], // ... other ESLint configurations };

Configure Jest Environment in VS Code:

Sometimes, Visual Studio Code doesn’t automatically pick up the environment set in your ESLint configuration. To ensure that VS Code recognizes the Jest environment, you can add a configuration in your project’s .vscode/settings.json file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    },
    "html",
    "markdown"
  ],
  "eslint.options": {
    "envs": ["jest"]
  }
}

Make sure to restart VS Code after adding or modifying this file to ensure the changes take effect.

Install VS Code Extensions:

Ensure you have the ESLint and Jest extensions installed in Visual Studio Code. You can search for these extensions in the VS Code marketplace and install them.
Reload Window:

After making these changes, reload the VS Code window to ensure that the new ESLint and Jest configurations are applied.

With these steps, you should be able to work with Jest test files in your Create React App project without ESLint errors in Visual Studio Code. Remember to adjust the configuration files according to your project’s needs if you have custom ESLint or Jest configurations.