在VS Code中，Jest的智能感知功能无法正常工作

Question

编辑：运行npm install @types/jest --save-dev以解决问题

我试图打字it()，但自动建议是isTag

我已尝试添加jsconfig.json文件

{
"compilerOptions": {
    "target": "es6"
},
"exclude": [
    "node_modules",
    "assets"
  ]
}

感谢所有提供建议的人！！

- Barrard

---

请安装 "@types/jest" 模块，以便在 VSCode 中使用 Jest 自动完成功能。有关详细信息，请参阅 https://tekloon.dev/autocomplete-for-jest-in-vscode 和 https://github.com/jest-community/vscode-jest/issues/440。 - vikramvi

Answer 1

添加到你的 jsconfig.json 文件中：

{
    "typeAcquisition": {
        "include": [
            "jest"
        ]
    }
}

如果这不起作用，请尝试使用此命令：

npm install @types/jest

或者

yarn add -D @types/jest

- Diogo Rocha

---

谢谢您的建议，但仍然得到相同的结果。 - Barrard

你是否已经安装了 jest 的 npm 包？ - Diogo Rocha

你首先需要本地或全局安装jest：npm i jest。假设你有一个包含两个目录（backend和frontend）的项目，请将此文件放入这两个目录中。然后重新启动vscode。现在应该可以使用自动完成功能了。 - Muhammed Bera Koç

这就是神奇的 npm install @types/jest。 - JackWilson

我确认安装@types/jest后需要重新启动VSCODE，这样它才能正常工作！ - German

Answer 2

更新 2023

只需通过此命令安装@types/jest：

npm i @types/jest --save-dev

或者

yarn add -D @types/jest

- S. Hesam

---

我会更新这个说法为“npm i @types/jest --save-dev”，这不应该作为普通依赖项与项目一起导出，仅用于本地测试。 - JesseBoyd

这个方法有效。不要像那样抢劫npm，我们也有-D选项，而不是冗长的--save-dev哈哈。 - undefined

是的，但是 --save-dev 对于教程方面更有意义和适合。 - undefined

Answer 3

{
    "typeAcquisition": {
        "include": [
            "jest"
        ]
    }
}

对于那些在根目录下无法成功添加上述内容到jsconfig.json的人：尝试将其添加到测试文件夹中（包含*.test.js文件的文件夹）

- solmans

---

谢谢。将此放入测试文件夹中（而不是根文件夹）对我有效。 - Bigdragon

为什么同样的事情对一些人有效，而对另一些人无效？ - cikatomo

到目前为止，这些答案都不适用于我。 安装了各种类型并尝试将此配置文件放置在根目录和测试文件夹中，但没有任何进展。 - Tsar Bomba

这个方法可行，我认为是因为我在jest.config.js中更改了roots，所以我必须将jsconfig.json放在我的根目录下。 - Kyle Pittman

Answer 4

这并非适用于所有人，但如果代码库采用单一存储库排列方式，并且您使用vscode作为编辑器，则可能希望在根目录中安装@types/jest，而不是分别安装。

- mykeels

---

谢谢您。我有这个直觉，但没有尝试过，看到这个后它起作用了。 - Whyashh

Answer 5

对我来说，没有任何解决方案可用。在浏览了一些能够正常工作的GitHub仓库之后，我发现了一个名为jest.config.js的文件。以下是该文件的配置：

module.exports = {
  transform: {
    '^.+\\.ts?$': 'ts-jest',
  },
  testEnvironment: 'node',
  testRegex: './src/.*\\.(test|spec)?\\.(ts|ts)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  roots: ['<rootDir>/src'],
};

注意：这是针对ts的。如果您没有使用TypeScript，请将所有ts更改为js。 保存后，重新启动Vscode，它将按预期工作。

- Noobish

Answer 6

Typescript扩展是我问题的根本原因。我试图使用Jest，但expect类型被expect.js中的expect覆盖了，这显然是由Typescript在/Users/cameronhudson/Library/Caches/typescript/5.0/node_modules/@types/expect.js处自动安装到全局缓存中的。我的初步“解决方案”是禁用Typescript扩展的自动类型获取。这可以在扩展的设置中完成。

我有一种感觉，这是一个笨重的解决方案，但希望它能引导某人找到正确的解决方案。

- Cameron Hudson

Answer 7

npm i -D @types/jest

它会自动在package.json中添加一行。

    "devDependencies": {
        "@types/jest": "^29.5.2",
        "jest": "^29.5.0"
      }

你没有其他事情要做。

- Lurin

---

你真是个救命恩人 - undefined

Answer 8

你调用代码的位置很重要。有时当你在错误的函数或代码块中时，智能感知无法正常工作。

因此，如果你尝试：

  beforeEach(() => ({
    mockedUseAccount.
  }));

智能感知无法工作。

如果您尝试：

  beforeEach(() => {
    mockedUseAccount.
  });

智能感知运作良好。

- Centerwork

Answer 9

奇怪的是这些还没有被分享 - 使用jsdoc代替。

https://jestjs.io/docs/configuration

jest.config.js

/** @type {import('jest').Config} */
const config = {
  verbose: true,
};

module.exports = config;

/** @returns {Promise<import('jest').Config>} */
module.exports = async () => {
  return {
    verbose: true,
  };
};

如果您正在使用 TypeScript 文件（jest.config.ts）：

import type {Config} from 'jest';

const config: Config = {
  verbose: true,
};

export default config;

import type {Config} from 'jest';

export default async (): Promise<Config> => {
  return {
    verbose: true,
  };
};

- Jose A

Answer 10

正确的答案确实是安装@types/jest：

yarn add -D @types/jest

然而，如果你已经安装了 Jest 并且 VS Code 中 Jest 的函数（describe、it等）仍然没有类型信息，请检查你的 tsconfig.json 文件中的 typeRoots。

我为一个没有任何自定义类型的包创建了一些自定义类型，并将它们放在了 ./types 文件夹中。为了让 TypeScript 能够识别这些类型，我在我的 tsconfig.json 中添加了 typeRoots: ["./types"]。然而，在那里指定类型根目录会覆盖 TypeScript 的默认值["./node_modules/@types"], 因此它将无法找到 @types/jest。

所以，如果你在你的 tsconfig.json 中有一个自定义的 typeRoots 值，除了安装 @types/jest 外，还要确保你也包含了这个（将 ./types 替换为其他你配置的自定义类型根目录）：

    "typeRoots": ["./node_modules/@types", "./types"],

- Bart van Oort