Jest和TypeScript: VS Code找不到名称

Question

我正在使用TypeScript的Jest。尽管我的代码可以工作和构建项目，但Visual Studio Code会针对所有Jest方法（describe()，test()...）抛出错误：

Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha`.ts(2582)

我有一个名为 src 和 tests 的文件夹，它们是分开的。我按照网上找到的配置进行设置，但没有任何变化，我错过了什么？到目前为止，唯一的方法是在 tsconfig 中的 include 设置中包含我的 tests 文件夹，这很糟糕，因为它是在 dist 目录中构建的。

已安装的开发依赖项: jest ts-jest @types/jest

tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowJs": true,
    "jsx": "react",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "baseUrl": "./",
    "paths": {
      "*": ["src/*"]
    },
    "typeRoots": ["./node_modules/@types"],
    "types": ["node", "jest"]
  },
  "strict": true,
  "compileOnSave": false,
  "include": ["src"]
}

jest.config.js

：

这是一个与 Jest 测试框架相关的配置文件，用于配置测试运行时的各种选项，如测试的匹配模式、测试运行的超时时间等。

module.exports = {
  roots: ['<rootDir>'],
  preset: 'ts-jest',
  testRegex: 'tests/src/.*\\.test.(js|jsx|ts|tsx)$',
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  transformIgnorePatterns: [],
  snapshotSerializers: ['enzyme-to-json/serializer'],
  moduleDirectories: ['node_modules', 'src', 'tests'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  moduleNameMapper: {
    '\\.(css|scss|jpg|png|svg)$': 'mocks/empty.ts',
  },
  setupFilesAfterEnv: ['<rootDir>/tests/jest.setup.ts'],
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{js{,x},ts{,x}}', '!src/index.tsx', '!src/custom.d.ts'],
}

- Alpha60

---

我认为问题不在于你的 tsconfig.json 文件，你不应该在那里做任何事情，关于你的 jest.config.js 文件，我不确定，但是你是否尝试使用 it() 开发测试，并且如果可以，请发布带有导入语句的代码？此外，您在终端中运行什么来运行测试？请记住，Jest默认情况下不具有任何有关TypeScript的知识，即使使用 jest 和 ts-jest 也会出现问题。 - Daniel

请查看类似问题的答案：https://dev59.com/Jbroa4cB1Zd3GeqPdBSc#61153019。 - AKd

Answer 1

只需要在你的 tsconfig.json 中将 jest 作为 typeAcquisition 包含进去，例如：

// tsconfig.json
{
  "compilerOptions": { /* ... */ },
  "typeAcquisition": { "include": ["jest"] },
  // ... your other options go here
}

- Yannick Schuchmann

---

太好了！谢谢！截至2022年8月19日，此选项在tsconfig.json中现已更名为“types”，而非“typeAcquisition”。 - Manfred

@Manfred，就参考文档 https://www.typescriptlang.org/tsconfig 而言，我认为那不正确。types 是 compilerOptions 的一个字段，但是重要的设置在于 typeAcquisition。或者我错了吗？ - Yannick Schuchmann

是的，你说得对。我的错误。 :-) - Manfred

Answer 2

我有同样的问题。我找到了解决方法 - 在项目的根目录中打开它，而不是父级目录。 或者，您可以创建一个包含您的项目的工作区。

- oneWalker