在 Jest TypeScript 中找不到名称 'it'

Cannot find name 'it' in Jest TypeScript

我尝试在 React + TypeScript 中为 Jest 创建一个初始设置。我已经完成初始设置并尝试检查测试是否 运行s。 当我 运行 使用命令 npm test 进行测试时,出现以下错误:

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

我已经为 Jest 安装了类型并删除了 tsconfig.json 中的类型,但我仍然遇到同样的错误。

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "plugins": [{ "name": "typescript-tslint-plugin" }],
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "pretty": true,
    "baseUrl": "src",
    "types": ["jest"],
    "typeRoots": ["./src/types"],
    "suppressImplicitAnyIndexErrors": true
  },
  "include": ["src", "node_modules/@types/jest"],
  "exclude": ["node_modules"]
}
`

Package.json


    "jest": {
        "transform": {
          ".(ts|tsx)": "ts-jest"
        },
        "testRegex": "(/__tests__/.*|\.(test|spec))\.(ts|tsx|js)$",
        "moduleFileExtensions": [
          "ts",
          "tsx",
          "js"
        ]
      },
      "devDependencies": {
        "@babel/plugin-proposal-export-default-from": "^7.2.0",
        "@types/enzyme": "^3.9.3",
        "@types/jest": "^24.0.14",
        "enzyme": "^3.10.0",
        "gh-pages": "^1.2.0",
        "husky": "^2.2.0",
        "jest": "^24.8.0",
        "node-sass": "^4.11.0",
        "prettier": "^1.17.0",
        "react-scripts": "2.1.8",
        "react-test-renderer": "^16.8.6",
        "stylelint": "^9.3.0",
        "stylelint-config-recommended-scss": "^3.2.0",
        "stylelint-config-standard": "^18.2.0",
        "stylelint-order": "^0.8.1",
        "stylelint-scss": "^3.1.3",
        "ts-jest": "^24.0.2",
        "tslint": "^5.16.0",
        "tslint-config-prettier": "^1.18.0",
        "tslint-plugin-prettier": "^2.0.1",
        "tslint-react": "^4.0.0",
        "tslint-react-hooks": "^2.1.0"
      }

在tsconfig.json中添加以下代码

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

ts-loader 更新为 v6.0.1 或更高版本可以解决问题。

安装

npm install -D jest @types/jest ts-jest

jest.config.js -- 在根目录

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

tsconfig.json

{
    "compilerOptions": {
     ...

      "types": ["reflect-metadata", "jest"],
      "typeRoots": ["./types", "./node_modules/@types"]
     
     ...
    },
    "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"],
    "include": ["./src/**/*.tsx", "./src/**/*.ts"]
  }

对我来说,问题是我的 tsconfig.json 是用

构建的
  "include": [
    "src"
  ]

我不得不将其更改为

  "include": [
    "src",
    "tests"
  ]

(我的测试都在目录 'tests' 中)

就我而言,问题是我的 ./node_modules/@types 目录中实际上没有 jest 文件夹。 运行 npm i @types/jest 声称该软件包是 up to date 但它仍然不存在于我应该安装它的 node_modules/@types 中,因此错误仍然存​​在。

我通过全局安装 @types/jest 并将安装的软件包复制到我的 ./node_modules/@types 来解决这个问题。

全局安装@jest/types运行:

npm i -g @types/jest

获取全局路径 node_modules 运行:

npm root -g

确认 @types/jest 包在那里 运行:

ls $(npm root -g)/@types

然后 cd 到你的项目目录和 运行

cp -R $(npm root -g)/@types/jest ./node_modules/@types

复制到本地node_modules。

安装@types/jest npm install @types/jest 并在 package.json 添加配置到 jest

...
"jest": {
     "globals": {
      "ts-jest": {
        "tsconfig": "path_our_tests/jest.tsconfig.json"
      }
    }
}

在测试目录中创建文件 jest.tsconfig.json,就像这样:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "types": ["jest"]
  }
}

这样你就不会更改项目的全局配置,并防止破坏你的代码

我必须在 devDependency 中安装 jest:

npm i --save-dev @types/jest

我已经尝试了上述所有解决方案,但不幸的是,none 对我来说是可行的。不过,在我的案例中有效的解决方案是通过文件顶部的 /// <reference types="@types/jest" />; 引用类型定义。您需要先安装 @types/jest 软件包。它的缺点是你必须将它导入到所有文件中。

在您的任何测试文件中导入它:

import '@types/jest';

我必须将 "@types/jest" 添加到 tsconfig.json 中的 "types" 数组。

None 以上解决方案对我有用。甚至不导入在执行 npm 测试时抛出错误的 '@types/jest' 而是导入 'jest'。对我来说唯一的解决方案是 import { describe, it, beforeEach } from '@jest/globals' to test files

检查 npx ts-jest config:init 的输出后(如 in the ts-jest documentation 所建议),我发现将此行添加到我的 jest.config.js 文件的顶部就可以了:

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */