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で、テストコードをコンパイル対象から外す方法。

  1. tsconfig.jsonと同階層にtsconfig.app.jsonのようなファイルを作成しtsconfig.jsonを拡張する。
{
  "extends": "./tsconfig.json",
  "include": ["src/**/*"],
  "exclude": ["src/node_modules", "src/dist", "**/*.test.ts"]
}
  1. コンパイル時にtsconfig.app.jsonを指定して実行する
tsc --project tsconfig.app.json

tsconfig.jsonのオプション

参考

https://stackoverflow.com/questions/56595053/cannot-find-name-it-in-jest-typescript

https://stackoverflow.com/questions/54139158/cannot-find-name-describe-do-you-need-to-install-type-definitions-for-a-test

https://github.com/Microsoft/TypeScript/issues/31226