Jest(ts-jest),VSCode環境で表示される”Cannot find name '〇〇'.”エラーの解決方法
はじめに
VSCodeでts-jestをインストールしてテスト環境構築しテストファイルを作成した際にtestファイルにVSCodeからエラーメッセージが出力され解決に時間がかかったので、解決方法をまとめておきます。
エラー内容
Cannot find name 'test'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha`.
Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha`
状況
- 下記モジュールはインストール済み
@types/jest
jest
ts-jest
typescript
- ディレクトリ構成(__tests__にtest用のファイルが入っている。)
.
├── src
│ ├── __tests__
│ ├── dist
│ ├── node_modules
│ ├── package-lock.json
│ └── package.json
└── tsconfig.json
- tsconfig(testファイルはコンパイルの対象外に設定)
//"typeRoots" : "",
},
"include": ["src/**/*"],
"exclude": ["src/node_modules", "src/dist", "**/*.test.ts"]
}
解決方法
解決方法-1
① testファイルをTypeScriptのコンパイルの対象にする。今回の状況では、excludeから**/*.test.ts
を除外。
},
"include": ["src/**/*"],
"exclude": ["src/node_modules", "src/dist"]
}
② tsconfig.jsonのtypeRoots
のコメントアウトを外し設定を追加。
"typeRoots": "./src/node_modules/@types",
},
"include": ["src/**/*"],
"exclude": ["src/node_modules", "src/dist"]
}
src配下にtsconfig.jsonがなく、srcディレクトリと同階層に設置していたのでこれが原因でvscodeのエラーだけでなく、jestでテスト実行時も同じエラーで失敗してしまいました。
この構成が問題で、stack overflow等を参考にしながらエラー解決を試みましたがなかなかうまく行かず苦戦してしまいました。
デメリット
- テストコードもコンパイルの対象になってしまう。
- テストコードをコンパイル対象から外すとなると手間が増える。
解決策-2
テストファイルにimport
を追加する。
import { describe, test, expect } from "@jest/globals";
メリット
-
tsconfig.json
の設定は変更なしでエラーが出力されなくなり、テストも実行できる。 - テストコードがコンパイルされることもない。
デメリット
- テストファイルで毎回
import
するのが手間になる
解決策-3
① __tests__
ディレクトリにtsconfig.json
を設置してrootに設置したtsconfig.json
を拡張する。
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../dist"
},
"include": ["../**/*"],
"exclude": ["../node_modules/", "../dist"]
}
②tsconfig.jsonのtypeRoots
のコメントアウトを外し設定を追加。
"typeRoots": "./src/node_modules/@types",
},
"include": ["src/**/*"],
"exclude": ["src/node_modules", "src/dist"]
}
メリット
- テストコードがコンパイルされることはない。
デメリット
- コンパイルに使用しない
tsconfig.json
を設置しないといけない。
解決策-1で、テストコードをコンパイル対象から外す方法。
-
tsconfig.json
と同階層にtsconfig.app.json
のようなファイルを作成しtsconfig.json
を拡張する。
{
"extends": "./tsconfig.json",
"include": ["src/**/*"],
"exclude": ["src/node_modules", "src/dist", "**/*.test.ts"]
}
- コンパイル時に
tsconfig.app.json
を指定して実行する
tsc --project tsconfig.app.json
tsconfig.jsonのオプション
- extends
https://www.typescriptlang.org/ja/tsconfig#extends - typeRoots
https://www.typescriptlang.org/ja/tsconfig#typeRoots
参考
Author And Source
この問題について(Jest(ts-jest),VSCode環境で表示される”Cannot find name '〇〇'.”エラーの解決方法), 我々は、より多くの情報をここで見つけました https://zenn.dev/yu46/articles/083ea1911d1e62著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol