🐈

vscodeでワークスペースをrootで開いた際、サブディレクトリのjestモジュールが読み込まれない問題の解決方法

2021/02/03に公開

Jest

tech

はじめに

TypeScriptのモノリポ構成のパッケージでJestのテストファイルを開いた際に Cannot find name 'describe' と表示されてしまう問題の解決方法です。

課題

下記のような構成で複数のプロジェクトが１つのパッケージにあるとします。
VSCODEでワークスペースをrootで開いた場合、jestのモジュールが読み込まれず、エラーが表示される。

- .vscode
- app1
  - ...
- app2
  - ...
- .prettierrc.js

解決方法

自分が調べた限り解決方法を2つ見つけました。

開くワークスペースをapp1のようにプロジェクトがrootになるようにする
tsconfig.json でtestファイルもビルドに含まれるようにする

開くワークスペースを`app1`のようにプロジェクトがrootになるように開く

こちらはVSCODEで開くワークスペースを変更するだけです。

しかし、rootに.vscodeや.prettierrc.jsのような設定ファイルが置かれている場合、開く場所を変えると読み込まれないです。
この時、各プロジェクトでシンボリックリンクを作成するなどの対策が必要です。

またこの方法は他のプロジェクトやrootのファイルが参照しづらいというデメリットがあります。

`tsconfig.json` でtestファイルもビルドに含まれるようにする

こちらはtsconfig.jsonの設定を変えることで対応可能です。rootのワークスペースから開くことができるので、他のプロジェクトファイルの参照も簡単に可能です。
下記のようにテストファイルもビルドに含まれるようにすると正しく読み込まれました。

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2019",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "./src/**/*",
    "__tests__"
  ]
}

しかし、このままではビルド時の成果物に不要なテストコードも含まれてしまいます。この時の解決方法としてはtsconfig.json と tsconfig-build.json のようにビルド用のconfigファイル別途作成するで対応可能です。

参考資料

おわりに

調べた際に、以外と情報がなかったのでまとめました。