在开玩笑的打字稿中找不到名字

Question

我尝试在react + typescript中为玩笑创建一个初始设置。我已经完成了初始设置并尝试检查测试是否运行。当我使用命令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`.

我已经安装了开玩笑的类型，并删除了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"
      }

Answer 1

将其导入到您的任何测试文件中：

import '@types/jest';

Answer 2

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

Answer 3

对我来说，问题是我tsconfig.json是用

  "include": [
    "src"
  ]

我不得不把它改成

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

（我的测试都在目录“tests”中）

Answer 4

在 tsconfig.json 中添加以下代码

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

Answer 5

我已经尝试了上述所有解决方案，但不幸的是，它们都不适合我。/// <reference types="@types/jest" />;不过，在我的例子中有效的解决方案是通过文件顶部引用类型定义。您需要@types/jest先安装包。它的缺点是您必须将其导入到所有文件中。

Answer 6

安装::

npm install 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"]
  }

希望它对您有用... :)

Answer 7

安装 @types/jestnpm install @types/jest并添加 jest 的配置：

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

在测试目录中创建 jest.tsconfig.json 并进行如下调整：

// path_to_our_tests/jest.tsconfig.json"
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "types": ["jest"]
  },
  "include": ["../src", "**/*"]
}

确保您的根 tsconfig 仅包含 src 文件，而不包含测试文件：

// tsconfig.json
{
  // ...
  "include": ["src"]
}

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

两个配置都应该通过编译器检查：

npx tsc && npx tsc -p path_to_our_tests/jest.tsconfig.json