🙆♀️
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ファイルはコンパイルの対象外に設定）
tsconfig.json
//"typeRoots" : "",
},
"include": ["src/**/*"],
"exclude": ["src/node_modules", "src/dist", "**/*.test.ts"]
}
解決方法
解決方法-1
① testファイルをTypeScriptのコンパイルの対象にする。今回の状況では、excludeから**/*.test.tsを除外。
tsconfig.json
},
"include": ["src/**/*"],
"exclude": ["src/node_modules", "src/dist"]
}
② tsconfig.jsonのtypeRootsのコメントアウトを外し設定を追加。
tsconfig.json
"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を拡張する。
/__tests__/tsconfig.json
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../dist"
},
"include": ["../**/*"],
"exclude": ["../node_modules/", "../dist"]
}
②tsconfig.jsonのtypeRootsのコメントアウトを外し設定を追加。
tsconfig.json
"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
参考
Discussion