typescript - 名前 'describe' が見つかりません。テストランナー用の型定義をインストールする必要がありますか？

TypeScriptをJestと一緒に使用すると、私のスペックは次のようなエラーメッセージで失敗してしまいました:

test/unit/some.spec.ts:1:1 - error TS2582: 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`.
test/unit/some.spec.ts:2:3 - error TS2582: 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`.
test/unit/some.spec.ts:3:7 - error TS2304: Cannot find name 'expect'.
test/unit/some.spec.ts:7:1 - error TS2582: Cannot find name 'test'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha`.

型はすでにインストールされています。

私は使います：

    "@types/jest": "^23.3.12",
    "jest": "^23.6.0",
    "ts-jest": "^23.10.5",
    "typescript": "^3.1.6"

私はjest --forceExit --coverage --verboseを使ってテストを実行します

回答 #1

これは少し厄介です。なぜなら、あなたのIDE（例えば、Visual Studio Code）とTypeScriptの両方がそれぞれの目的でtsconfig.jsonを使用するからです。

初期の問題を解決するための簡単なチェックリスト：

（TypeScript と Jest を使用する場合）

1. @types/jest と @types/node がインストールされていることを確認してください。
2. これらの型が tsconfig.json にリンクされていることを確認してください: "types": ["jest", "node"]
3. 必ず、tsconfig.json の excluded プロパティから、テストや tests ディレクトリが除外されていないことを確認してください。

トランスパイルにおける副作用

さて、もしあなたが TypeScript から JavaScript へのトランスパイラを使ってアプリケーションを構築していて、そのトランスパイラが tsconfig.json に依存している場合（例えば、typescript パッケージをインストールした際に提供される tsc）、テストもビルドに含めている場合、それらがトランスパイルされることに気付くかもしれません。（出力/ビルドディレクトリを確認すると、それらの .js 対応ファイルが確認できます）。

もしこの時点で混乱している場合や、難しすぎると感じる場合は、まず tsconfig.json の設定ドキュメントを調べて、戻ってきてください。

ほとんどの場合、次のいずれかを持つことになります:

1. デフォルトの設定を拡張または上書きする設定を持つ別の tsconfig.prod.json。おそらく無効にしたい inlineSource、sourceMaps、inlineSourceMaps などの多くの設定があります。

例：

tsc --project tsconfig.prod.json

ビルドを実行する

2. 何らかのスクリプト: デフォルトの設定を特定のフラグで上書きするシェル/bashまたはターミナルのコマンド。例えば、ドキュメントに従ってテストをビルドから除外するために、--excludeFiles や --excludeDirectories フラグを使用できます。

例：

npx tsc --inlineSourceMap false --declarationMap false --inlineSources false --sourceMap false

それから、コード変換が成功した後で、rimraf のようなライブラリを使って不要なファイルやディレクトリを削除することができます。設定を上書きするよりも難しくないかもしれませんし、ビルドステップとして維持するのも簡単です。

例：

npx rimraf build/**/*.test.js

IDE または TypeScript サービスの再起動

注意: 時には、IDE（あるいは正確には TypeScript サービス）が変更を認識するまでに少し時間がかかることがあります。数秒待って、再インデックスされるのを確認してください。手動で再起動を行いたい場合は:

• VSCodeでは、ウィンドウの右下部分に例えば「TypeScript 4.2.1」のような注釈があります。これをクリックして「サービスの再起動」を選択してください。

• あるいは、VSCode では Ctrl+Shift+P または CMD+Shift+P を使用します。ドロップダウンが表示され、そこで「>Typescript」と入力し、「>TypeScript: restart service」を選択します。

• WebStorm (2024.3) で、設定 | 言語 & フレームワーク | TypeScript を選択します。

ヒント：Node と TypeScript のソース元の設定を確認してください。複数のバージョンやプロジェクトをインストールすると、古い場所に切り替わって問題が発生することがあります。設定は、意図したバージョン（例えば nvm や他のバージョンマネージャを使用して）にポイントするか、プロジェクトの node_modules にポイントする必要があります。

Webstorm の例:

ヒント 2：時間をかけて、NodeJSとTypeScriptの関連、自分のファイル、そして舞台裏で何が起きているかを理解するようにしましょう。プロジェクトの設定を急がず、一歩ずつ丁寧に進めてください。ほとんどのTypeScriptの問題は、特定のステップで自分が何を達成しようとしているかを理解していれば簡単に解決できます。

回答 #2

私は IDE として Visual Studio Code を使用しており、Angular プロジェクトで、ファイル tsconfig.json の型をコメントアウト/削除し、tsconfig.spec.json の型に "jest" を追加する必要がありました。

ファイル tsconfig.json

{
  "compilerOptions": {
    // "types": []
  }
}

ファイル tsconfig.spec.json

{
  "compilerOptions": {
    "types": ["jest", "node"]
  }
}

回答 #3

これは私にはうまくいきました:

import '@types/jest';

回答 #4

これまでのどの回答も私の問題を解決しませんでした。

私は tsconfig.json ファイルの types 配列に "@types/jest" を追加する必要がありました。

回答 #5

これを修正できた唯一の方法は、tsconfig.json ファイルの "include" に tests/ フォルダーを追加することでした:

"include": [
  "src/**/*.ts",
  "tests/*.ts"
] 

ESLintが警告を出している場合は、.eslintrc.jsonファイルにJestを追加する必要があります:

"env": {
  "es2020": true,
  "node": true,
  "jest": true
}

回答 #6

しばらく tsconfig.json をいじった後、"types": [], をコメントアウトすればうまくいくことがやっと分かりました。

設定に失敗（前）

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

動作設定

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

回答 #7

テストファイルにJestをインポートする必要があります：

import 'jest';

別の解決方法は、tsconfig.json ファイルにそれを追加することです:

   "compilerOptions": {
     "types": [ "node", "jest" ],
     "moduleResolution": "node"
   }

もしTSLintを使用している場合、問題はtsconfig.jsonファイルの末尾に不要なコンマがあることかもしれません。例えば:

{
  "compileOnSave": true,
  "include": [
    "src"
  ],  // Remove this comma
}

回答 #8

私の場合（Visual Studio Code、Create React App、Yarn ワークスペース、Jest v26、@types/jest、tsconfig.json に "types": ["node", "jest"] が存在）、テストは正常に実行されていましたが、IDE はすべての describe と it を赤で 下線 していました。

かなり長く試した後、Visual Studio Code のウィンドウを リロードするまで何も助けになりませんでした。

回答 #9

以下の構成は私にはうまく動作します。私は node_modules/@types を typeRoots に追加しました。

{
  "compilerOptions": {
    // ...rest of my settings
    "typeRoots": ["node_modules/@types"],
    "types": ["jest", "node"]
  }
}

回答 #10

あなたはファイルtsconfig.jsonにテストパスを含める必要があります。

例：例えば、パスを tests/ と名付けてプロジェクトのルートディレクトリに置いた場合、テストファイルを探すために tsconfig の "include" パラメータで指定する必要があります:

1. tsconfig.json に移動

2. 追加 :

   "include": [
       "tests/*.<file_test_extension>",
   ],
   

   <file_test_extension>: ts | js | その他

回答 #11

tsconfig.json にテストパスを含める必要があります。

私はプロジェクトのルートに tsconfig.json と tsconfig.build.json を置くことで問題を解決しました。tsconfig.json にはすべてのオプションが含まれています。

"include": ["src/**/*", "test/**/*"],

tsconfig.build.json:

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

次に、package.jsonで（クリーンスクリプトは任意）：

"scripts": {
  "clean": "rm -rf dist",
  "build": "npm run clean && tsc --build tsconfig.build.json,
  ...
}

回答 #12

テストフォルダ __tests__ に別の tsconfig.json を置くことができます:

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "baseUrl": "./",
        "outDir": "../build",
        "noEmit": true,
        "rootDir": "../",
    },
    "exclude": ["node_modules"],
}

これはルートフォルダのものを拡張します:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./lib",
    "rootDir": "./src",
    "strict": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
  },
  "exclude": ["node_modules", "**/*.test.ts", "__tests__"]
}

この方法で、テストファイルは依然として公開ビルドから除外されますが、すべての共通オプションは引き続き共有されます。

もし excludes の代わりに、または excludes と併用して includes を使用している場合は、拡張でも同様に使用するようにしてください。例えば:

tsconfig.json

{
  "includes": ["src"],
  ...
}

tests/tsconfig.json

{
  "extends": "../tsconfig.json"
  "includes": ["../"]
}

これはビルドフォルダーに含まれる内容を変更することはありませんが、Visual Studio Code が Jest の型を見つけられるようになります。